jquery长菜单滑动效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery长菜单滑动效果代码,当下拉菜单项太多的时候,采用自动下移旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.8.1.js"></script> <style> body{ margin: 0px; padding: 0px; background: #e74c3c; font-family: 'Lato', sans-serif; } h1{ margin: 2em 0px; padding: 0px; color: #fff; text-align: center; font-weight: 100; font-size: 50px; } nav{ width: 750px; margin: 1em auto; } ul{ margin: 0px; padding: 0px; list-style: none; } ul.dropdown{ position: relative; width: 100%; } ul.dropdown li{ font-weight: bold; float: left; width: 180px; position: relative; background: #ecf0f1; } ul.dropdown a:hover{ color: #000; } ul.dropdown li a { display: block; padding: 20px 8px; color: #34495e; position: relative; z-index: 2000; text-align: center; text-decoration: none; font-weight: 300; } ul.dropdown li a:hover, ul.dropdown li a.hover{ background: #3498db; position: relative; color: #fff; } ul.dropdown ul{ display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; } ul.dropdown ul li a{ display: block; color: #34495e !important; background: #eee !important; } ul.dropdown ul li a:hover{ display: block; background: #3498db !important; color: #fff !important; } .drop > a{ position: relative; } .drop > a:after{ content:""; position: absolute; right: 10px; top: 40%; border-left: 5px solid transparent; border-top: 5px solid #333; border-right: 5px solid transparent; z-index: 999; } .drop > a:hover:after{ content:""; border-left: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid transparent; } </style> </head> <body > <!--Made with Love by Larry Geams--> <h1>Solution for Long Drop Down Items</h1> <nav> <ul class="dropdown"> <li class="drop"><a href="#">Really Tall Menu</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Sed</a></li> <li><a href="#">Natus</a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Voluptas</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Malorum</a></li> <li><a href="#">Bonorum</a></li> <li><a href="#">Nemo</a></li> <li><a href="#">Quisquam</a></li> <li><a href="#">Adipisci </a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0