How to use the cool menu realized by CSS3
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.
