Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use CSS3 to achieve the cool menu, the editor thinks it is very practical, so share it with you as a reference, I hope you can get something after reading this article.

Index.html

The code is as follows:

Home

Menu 1

Submenu a

Submenu b

Submenu c

Submenu d

Submenu e

Submenu f

Submenu g

Submenu h

Menu 2

Submenu a

Submenu b

Submenu c

Submenu d

Submenu e

Submenu f

Submenu g

Submenu h

Menu 3

Submenu a

Submenu b

Submenu c

Submenu d

Submenu e

Submenu f

Submenu g

Submenu h

Menu 4

Menu 5

2. CSS

Copy the code

The code is as follows:

.menu, .menu ul {

List-style: none

Padding: 0

Margin: 0

}

.menu {

Height: 58px

}

.menu li {

Background:-moz-linear-gradient (# 292929, # 252525)

Background:-ms-linear-gradient (# 292929, # 252525)

Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, # 292929), color-stop (100%, # 252525))

Background:-webkit-linear-gradient (# 292929, # 252525)

Background:-o-linear-gradient (# 292929, # 252525)

Filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#292929', endColorstr='#252525')

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr='#292929', endColorstr='#252525')"

Background: linear-gradient (# 292929, # 252525)

Border-bottom: 2px solid # 181818

Border-top: 2px solid # 303030

Min-width: 160px

}

.menu > li {

Display: block

Float: left

Position: relative

}

.menu > li:first-child {

Border-radius: 5px 0 0

}

.menu a {

Border-left: 3px solid rgba (0,0,0,0)

Color: # 808080

Display: block

Font-family: 'Lucida Console'

Font-size: 18px

Line-height: 54px

Padding: 0 25px

Text-decoration: none

Text-transform: uppercase

}

Hover code snippet:

Copy the code

The code is as follows:

.menu li:hover {

Background-color: # 1c1c1c

Background:-moz-linear-gradient (# 1c1c1c, # 1b1b1b)

Background:-ms-linear-gradient (# 1c1c1c, # 1b1b1b)

Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, # 1c1c1c), color-stop (100%, # 1b1b1b))

Background:-webkit-linear-gradient (# 1c1c1c, # 1b1b1b)

Background:-o-linear-gradient (# 1c1c1c, # 1b1b1b)

Filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#1c1c1c', endColorstr='#1b1b1b')

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr='#1c1c1c', endColorstr='#1b1b1b')"

Background: linear-gradient (# 1c1c1c, # 1b1b1b)

Border-bottom: 2px solid # 222222

Border-top: 2px solid # 1B1B1B

}

.menu li:hover > a {

Border-radius: 5px 0 0 0

Border-left: 3px solid # C4302B

Color: # C4302B

}

CSS

Copy the code

The code is as follows:

/ * submenu styles * /

.submenu {

Left: 0

Max-height: 0

Position: absolute

Top: 100%

Z-index: 0

-webkit-perspective: 400px

-moz-perspective: 400px

-ms-perspective: 400px

-o-perspective: 400px

Perspective: 400px

}

.submenu li {

Opacity: 0

-webkit-transform: rotateY (90deg)

-moz-transform: rotateY (90deg)

-ms-transform: rotateY (90deg)

-o-transform: rotateY (90deg)

Transform: rotateY (90deg)

-webkit-transition: opacity .4s,-webkit-transform .5s

-moz-transition: opacity .4s,-moz-transform .5s

-ms-transition: opacity .4s,-ms-transform .5s

-o-transition: opacity .4s,-o-transform .5s

Transition: opacity .4s, transform .5s

}

.menu .submenu li:hover a {

Border-left: 3px solid # 454545

Border-radius: 0

Color: # ffffff

}

.menu > li:hover .submenu, .menu > li:focus .submenu {

Max-height: 2000px

Z-index: 10

}

.menu > li:hover .submenu li, .menu > li:focus .submenu li {

Opacity: 1

-webkit-transform: none

-moz-transform: none

-ms-transform: none

-o-transform: none

Transform: none

}

CSS

Copy the code

The code is as follows:

/ * CSS3 delays for transition effects * /

.menu li:hover .submenu li:nth-child (1) {

-webkit-transition-delay: 0s

-moz-transition-delay: 0s

-ms-transition-delay: 0s

-o-transition-delay: 0s

Transition-delay: 0s

}

.menu li:hover .submenu li:nth-child (2) {

-webkit-transition-delay: 50ms

-moz-transition-delay: 50ms

-ms-transition-delay: 50ms

-o-transition-delay: 50ms

Transition-delay: 50ms

}

.menu li:hover .submenu li:nth-child (3) {

-webkit-transition-delay: 100ms

-moz-transition-delay: 100ms

-ms-transition-delay: 100ms

-o-transition-delay: 100ms

Transition-delay: 100ms

}

.menu li:hover .submenu li:nth-child (4) {

-webkit-transition-delay: 150ms

-moz-transition-delay: 150ms

-ms-transition-delay: 150ms

-o-transition-delay: 150ms

Transition-delay: 150ms

}

.menu li:hover .submenu li:nth-child (5) {

-webkit-transition-delay: 200ms

-moz-transition-delay: 200ms

-ms-transition-delay: 200ms

-o-transition-delay: 200ms

Transition-delay: 200ms

}

.menu li:hover .submenu li:nth-child (6) {

-webkit-transition-delay: 250ms

-moz-transition-delay: 250ms

-ms-transition-delay: 250ms

-o-transition-delay: 250ms

Transition-delay: 250ms

}

.menu li:hover .submenu li:nth-child (7) {

-webkit-transition-delay: 300ms

-moz-transition-delay: 300ms

-ms-transition-delay: 300ms

-o-transition-delay: 300ms

Transition-delay: 300ms

}

.menu li:hover .submenu li:nth-child (8) {

-webkit-transition-delay: 350ms

-moz-transition-delay: 350ms

-ms-transition-delay: 350ms

-o-transition-delay: 350ms

Transition-delay: 350ms

}

.submenu li:nth-child (1) {

-webkit-transition-delay: 350ms

-moz-transition-delay: 350ms

-ms-transition-delay: 350ms

-o-transition-delay: 350ms

Transition-delay: 350ms

}

.submenu li:nth-child (2) {

-webkit-transition-delay: 300ms

-moz-transition-delay: 300ms

-ms-transition-delay: 300ms

-o-transition-delay: 300ms

Transition-delay: 300ms

}

.submenu li:nth-child (3) {

-webkit-transition-delay: 250ms

-moz-transition-delay: 250ms

-ms-transition-delay: 250ms

-o-transition-delay: 250ms

Transition-delay: 250ms

}

.submenu li:nth-child (4) {

-webkit-transition-delay: 200ms

-moz-transition-delay: 200ms

-ms-transition-delay: 200ms

-o-transition-delay: 200ms

Transition-delay: 200ms

}

.submenu li:nth-child (5) {

-webkit-transition-delay: 150ms

-moz-transition-delay: 150ms

-ms-transition-delay: 150ms

-o-transition-delay: 150ms

Transition-delay: 150ms

}

.submenu li:nth-child (6) {

-webkit-transition-delay: 100ms

-moz-transition-delay: 100ms

-ms-transition-delay: 100ms

-o-transition-delay: 100ms

Transition-delay: 100ms

}

.submenu li:nth-child (7) {

-webkit-transition-delay: 50ms

-moz-transition-delay: 50ms

-ms-transition-delay: 50ms

-o-transition-delay: 50ms

Transition-delay: 50ms

}

.submenu li:nth-child (8) {

-webkit-transition-delay: 0s

-moz-transition-delay: 0s

-ms-transition-delay: 0s

-o-transition-delay: 0s

Transition-delay: 0s

}

This is the end of the article on "how to use CSS3 to achieve the cool menu". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.