导航菜单(移动出现子菜单)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="Keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> /* 这以下是重置样式 Remove margin padding */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } /* Default Font */ body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; } h1,h2,h3,h4,h5,h6 { font-size:100%; } address,cite,dfn,em,var { font-style:normal; } code,kbd,pre,samp { font-family:courier new,courier,monospace; } small { font-size:12px; } ul,ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } legend { color:#000; } fieldset,img { border:0; } button,input,select,textarea{ font-size:100%; } table { border-collapse:collapse; border-spacing:0; } /* Remove Float */ .clear { display:block; height:0; overflow:hidden; clear:both; } .clearfix:after { content:‘\20‘; display:block; height:0; clear:both; } .clearfix { *zoom:1; } /* 重置样式结束 */ </style> </head> <body style="padding-top:50px;"> <style type="text/css"> .nav { height:25px; font-family:"Microsoft Yahei"; } .nav ul li { position:relative; float:left; display:inline; margin-left:1px; width:100px; text-align:center; height:25px; line-height:25px; } .nav ul li a { transition:background 500ms linear; text-decoration:none; display:block; text-shadow:0px 1px 0px #000; width:100%; height:100%; text-align:center; background-color:#089478; color:#FFF; } .nav ul li a:hover, .nav ul li a.current { background-color:#076451; text-decoration:none; } .nav .sub-nav { display:none; position:absolute; top:24px; left:0px; padding-top:10px; } .nav .sub-nav li { float:none; display:block; width:100px; height:30px; line-height:30px; } .nav .sub-nav .triangle { position:absolute; left:50%; top:5px; margin-left:-3px; display:block; width:0; height:0; overflow:hidden; line-height:0; font-size:0; border-bottom:5px solid #089478; border-top:none; border-left:5px solid #FFF; border-right:5px solid #FFF; } </style> <div class="nav"> <ul class="clearfix"> <li> <a href="#">导航1</a> <ul class="sub-nav"> <span class="triangle"></span> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> <li><a href="#">子导航5</a></li> </ul> </li> <li> <a href="#">导航2</a> <ul class="sub-nav"> <span class="triangle"></span> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> <li><a href="#">子导航5</a></li> </ul> </li> <li> <a href="#">导航3</a> <ul class="sub-nav"> <span class="triangle"></span> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> <li><a href="#">子导航5</a></li> </ul> </li> <li> <a href="#">导航4</a> <ul class="sub-nav"> <span class="triangle"></span> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> <li><a href="#">子导航5</a></li> </ul> </li> <li> <a href="#">导航5</a> <ul class="sub-nav"> <span class="triangle"></span> <li><a href="#">子导航1</a></li> <li><a href="#">子导航2</a></li> <li><a href="#">子导航3</a></li> <li><a href="#">子导航4</a></li> <li><a href="#">子导航5</a></li> </ul> </li> </ul> </div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(‘.nav ul li‘).hover(function(){ $(this).children(‘a‘).addClass(‘current‘); $(this).children(‘ul‘).stop(true,true).fadeIn(400); }, function(){ $(this).children(‘ul‘).stop(true,true).fadeOut(400); $(this).children(‘a‘).removeClass(‘current‘); }); </script> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。