纯CSS3打造滑动下拉导航菜单
1 <!DOCTYPE html> 2 <html lang="en" > 3 <head> 4 <meta charset="utf-8" /> 5 <title>Pure CSS3 LavaLamp Menu | Script Tutorials</title> 6 <link href="css/menu.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 <div class="container"> 10 <ul id="nav"> 11 <li> 12 <a href="#">Home</a> 13 </li> 14 <li> 15 <a class="hsubs" href="#">Menu 1</a> 16 <ul class="subs"> 17 <li> 18 <a href="#">Submenu 1</a> 19 </li> 20 <li> 21 <a href="#">Submenu 2</a> 22 </li> 23 <li> 24 <a href="#">Submenu 3</a> 25 </li> 26 <li> 27 <a href="#">Submenu 4</a> 28 </li> 29 <li> 30 <a href="#">Submenu 5</a> 31 </li> 32 </ul> 33 </li> 34 <li> 35 <a class="hsubs" href="#">Menu 2</a> 36 <ul class="subs"> 37 <li> 38 <a href="#">Submenu 2-1</a> 39 </li> 40 <li> 41 <a href="#">Submenu 2-2</a> 42 </li> 43 <li> 44 <a href="#">Submenu 2-3</a> 45 </li> 46 <li> 47 <a href="#">Submenu 2-4</a> 48 </li> 49 <li> 50 <a href="#">Submenu 2-5</a> 51 </li> 52 <li> 53 <a href="#">Submenu 2-6</a> 54 </li> 55 <li> 56 <a href="#">Submenu 2-7</a> 57 </li> 58 <li> 59 <a href="#">Submenu 2-8</a> 60 </li> 61 </ul> 62 </li> 63 <li> 64 <a class="hsubs" href="#">Menu 3</a> 65 <ul class="subs"> 66 <li> 67 <a href="#">Submenu 3-1</a> 68 </li> 69 <li> 70 <a href="#">Submenu 3-2</a> 71 </li> 72 <li> 73 <a href="#">Submenu 3-3</a> 74 </li> 75 <li> 76 <a href="#">Submenu 3-4</a> 77 </li> 78 <li> 79 <a href="#">Submenu 3-5</a> 80 </li> 81 </ul> 82 </li> 83 <li> 84 <a href="#">Menu 4</a> 85 </li> 86 <li> 87 <a href="#">Menu 5</a> 88 </li> 89 <li> 90 <a href="#">Menu 6</a> 91 </li> 92 <li> 93 <a href="#">Back</a> 94 </li> 95 <div id="lavalamp"></div> 96 </ul> 97 </div> 98 </body> 99 </html>
menu.css:
1 *{ 2 margin:0; 3 padding:0; 4 } 5 body { 6 font:14px/1.3 Arial,sans-serif; 7 background-color:#212121; 8 } 9 .container { 10 height: 571px; 11 margin: 30px auto; 12 width: 957px; 13 } 14 #nav,#nav ul { 15 list-style: none outside none; 16 margin: 0; 17 padding: 0; 18 } 19 #nav { 20 background: url('menu_bg.png') no-repeat scroll 0 0 transparent; 21 clear: both; 22 font-size: 12px; 23 height: 58px; 24 padding: 0 0 0 9px; 25 position: relative; 26 width: 957px; 27 } 28 #nav ul { 29 background-color: #222; 30 border:1px solid #222; 31 border-radius: 0 5px 5px 5px; 32 border-width: 0 1px 1px; 33 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); 34 left: -9999px; 35 overflow: hidden; 36 position: absolute; 37 top: -9999px; 38 z-index: 2; 39 40 /* 默认是隐藏的:Y轴缩放为0 */ 41 -moz-transform: scaleY(0); 42 -ms-transform: scaleY(0); 43 -o-transform: scaleY(0); 44 -webkit-transform: scaleY(0); 45 transform: scaleY(0); 46 47 /* 变换的起始点:左上角 */ 48 -moz-transform-origin: 0 0; 49 -ms-transform-origin: 0 0; 50 -o-transform-origin: 0 0; 51 -webkit-transform-origin: 0 0; 52 transform-origin: 0 0; 53 54 -moz-transition: -moz-transform 0.1s linear; 55 -ms-transition: -ms-transform 0.1s linear; 56 -o-transition: -o-transform 0.1s linear; 57 -webkit-transition: -webkit-transform 0.1s linear; 58 transition: transform 0.1s linear; 59 } 60 #nav li { 61 background: url('menu_line.png') no-repeat scroll right 5px transparent; 62 float: left; 63 position: relative; 64 } 65 #nav li a { 66 color: #FFFFFF; 67 display: block; 68 float: left; 69 font-weight: normal; 70 height: 30px; 71 padding: 23px 20px 0; 72 position: relative; 73 text-decoration: none; 74 text-shadow: 1px 1px 1px #000000; 75 } 76 #nav li:hover > a { 77 /* 下一级子元素 */ 78 color: #00B4FF; 79 } 80 #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { 81 background: none repeat scroll 0 0 #121212; 82 outline: 0 none; 83 } 84 #nav li:hover ul.subs { 85 left: 0; 86 top: 53px; 87 width: 180px; 88 89 /* 显示图片:Y轴缩放为1 */ 90 -moz-transform: scaleY(1); 91 -ms-transform: scaleY(1); 92 -o-transform: scaleY(1); 93 -webkit-transform: scaleY(1); 94 transform: scaleY(1); 95 } 96 #nav ul li { 97 background: none; 98 width: 100%; 99 } 100 #nav ul li a { 101 float: none; 102 } 103 #nav ul li:hover > a { 104 background-color: #121212; 105 color: #00B4FF; 106 } 107 #lavalamp { 108 background: url('lavalamp.png') no-repeat scroll 0 0 transparent; 109 height: 16px; 110 left: 13px; 111 position: absolute; 112 top: 0px; 113 width: 64px; 114 115 -moz-transition: all 300ms ease; 116 -ms-transition: all 300ms ease; 117 -o-transition: all 300ms ease; 118 -webkit-transition: all 300ms ease; 119 transition: all 300ms ease; 120 } 121 #lavalamp:hover { 122 /* 作用是? */ 123 -moz-transition-duration: 3000s; 124 -ms-transition-duration: 3000s; 125 -o-transition-duration: 3000s; 126 -webkit-transition-duration: 3000s; 127 transition-duration: 3000s; 128 } 129 #nav li:nth-child(1):hover ~ #lavalamp { 130 /* #nav下的第一个li的hover状态下的同级的#lavalamp*/ 131 left: 13px; 132 } 133 #nav li:nth-child(2):hover ~ #lavalamp { 134 left: 90px; 135 } 136 #nav li:nth-child(3):hover ~ #lavalamp { 137 left: 170px; 138 } 139 #nav li:nth-child(4):hover ~ #lavalamp { 140 left: 250px; 141 } 142 #nav li:nth-child(5):hover ~ #lavalamp { 143 left: 330px; 144 } 145 #nav li:nth-child(6):hover ~ #lavalamp { 146 left: 410px; 147 } 148 #nav li:nth-child(7):hover ~ #lavalamp { 149 left: 490px; 150 } 151 #nav li:nth-child(8):hover ~ #lavalamp { 152 left: 565px; 153 }
用到的图片:
menu_bg.png 
lavalamp.png 
menu_line.png 
最终效果图:
