一侧具有鼠标跟随效果的垂直导航菜单
分类:实例代码
本章节分享一段代码实例,它实现了垂直导航菜单效果。
当鼠标悬浮于导航栏目的时候,在左侧会有动画方式跟随的竖条,这也是常见的特效。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; *overflow: auto; _overflow-x: hidden; } body { margin: 0; } p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; } dl, dd { margin-left: 0; } ul, ol { padding-left: 0; *margin-left: 0; list-style-type: none; } ul li { *zoom: 1; *vertical-align: bottom; } em, var, cite, i { font-style: normal; } small { font-size: inherit; } s, a { text-decoration: none; } :focus { outline: none; } blockquote, q { quotes: none; margin: 0; } table { border-collapse: collapse; border-spacing: 0; empty-cells: show; /*table-layout:fixed;*/ } img, iframe { border: none; } img { vertical-align: top; -ms-interpolation-mode: bicubic; /*ie7防止图片缩小失真的*/ } /*---------竖向菜单(非必需)---------*/ .bl-vernav li { border-bottom: 1px solid #ddd; margin-bottom: -1px; padding-top: 1px; } .bl-vernav a { display: block; height: 20px; line-height: 20px; padding: 10px 16px; } .bl-vernav a:hover { background: #F8F8F8; text-decoration: none; } /*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/ .bl-vernav-ord { border: 1px solid #ddd; } .vernav-level li li { border-left: none; border-right: none; } .vernav-level li li a { padding-left: 40px; } .vernav-level .cur .one { background: #F8F8F8; } .vernav-level li .cur a { background: #F8F8F8; } /*diy*/ .bl-vernav-wrap { position: relative; } .bl-vernav-wrap .sideLine { position: absolute; left: -6px; top: 0; z-index: 1; line-height: 0; font-size: 0; border-left: #FF5F3E solid 7px; background-color: #F8F8F8; } .bl-vernav { position: relative; z-index: 2; } .bl-vernav a:hover { background-color: transparent; } .demobox { width: 460px; font-size: 14px; color: #333; } a { color: #333; text-decoration: none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var verNav = $(".bl-vernav"), //第一层ul. line = verNav.siblings(".sideLine"), //左边条纹线 verNavFirst = verNav.children("li:first"), //第一层ul中第一个li curY = verNav.children("li.cur").position().top; //设置辅助线初始化高度和宽度,也可以直接用css设置好,这里就不用js计算了 line.height(verNavFirst.outerHeight() - 1).width(verNavFirst.outerWidth()); verNav.find("li").mouseenter(function () { var thisY = $(this).position().top; line.stop(true, true).animate({ top: thisY }, 200); return false }).end().mouseleave(function () { line.stop(true, true).animate({ top: curY }, 300) }).trigger("mouseleave"); }); </script> </head> <body style="padding:50px;"> <div class="demobox"> <h1 class="h3">左边条纹跟随鼠标滑动导航</h1><br /> <div class="bl-vernav-wrap"> <div class="sideLine"></div> <ul class="bl-vernav vernav-level"> <li><a href="#" class="one">导航菜单</a></li> <li class="cur"> <a href="#" class="one">前端专区</a> <ul> <li><a href="#">div教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">js教程</a></li> </ul> </li> <li><a href="#" class="one">前端教程网一</a></li> <li><a href="#" class="one">前端教程网二</a></li> <li><a href="#" class="one">前端教程网三</a></li> </ul> </div> </div> </body> </html>