Jquery+CSS 创建流动导航菜单 Fluid Navigation

那么我们应该如何实现流动导航菜单呢？一、效果图鼠标滑过Menu，即Show提示信息。二、实现步骤 1、CSS代码复制代码代码如下: menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} #container { margin-top:100px;} #menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .firstchild { border-left:1px solid #ccc;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px; border-radius-bottomleft: 5px; } menuBarHolder: 菜单Menu的固定容器，宽度=730px。 menuInfo：控制提示信息的展示与否。 2、HTML代码复制代码代码如下: <div id="menuBarHolder"> <ul id="menuBar"> <li class="firstchild"><a href="javascript:#">Home</a> <div class="menuInfo">I am some text about the home section</div></li> <li><a href="javascript:#">Services</a> <div class="menuInfo">I am some text about the services section</div></li> <li><a href="javascript:#">Clients</a> <div class="menuInfo">I am some text about the clients section</div></li> <li><a href="javascript:#">Portfolio</a> <div class="menuInfo">I am some text about the portfolio section</div></li> <li><a href="javascript:#">About</a> <div class="menuInfo">I am some text about the about section</div></li> <li><a href="javascript:#">Blog</a> <div class="menuInfo">I am some text about the blog section</div></li> <li><a href="javascript:#">Follow</a> <div class="menuInfo">I am some text about the follow section</div></li> <li><a href="javascript:#">Contact</a> <div class="menuInfo">I am some text about the contact section</div></li> </ul> </div> UI LI元素：列表元素。 DIV元素：提示内容信息。 3、Javascript代码复制代码代码如下: $(document).ready(function() { $('#menuBar li').click(function() { var url = $(this).find('a').attr('href'); document.location.href = url; }); $('#menuBar li').hover(function() { $(this).find('.menuInfo').slideDown(); }, function() { $(this).find('.menuInfo').slideUp(); }); }); click()、 hover():给Li元素绑定单击事件和鼠标滑过事件。 find()函数：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 slideDown(speed, [callback])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 slideUp(speed, [callback])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 #menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} .firstchild { border-left:1px solid #ccc;} #container { margin-top:100px;} #menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px;border-radius-bottomleft: 5px; } h1 { font: 50px normal Georgia, 'Times New Roman', Times, serif; color: #111; margin: 0; text-align: center; padding: 5px 0; } h1 small{ font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 1.4em; display: block; color: #ccc; } #menuBar li a{width:50px;} .menuInfo { margin-left:-65px; width:80px;} Fluid Navigation CSS & jQuery Tutorial by Addy Osmani HomeI am some text about the home section ServicesI am some text about the services section ClientsI am some text about the clients section PortfolioI am some text about the portfolio section AboutI am some text about the about section BlogI am some text about the blog section FollowI am some text about the follow section ContactI am some text about the contact section [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

解决办法 1.设置JSON-LIB让其过滤掉引起循环的字段。 Java代码复制代码代码如下: JsonConfig config = new JsonConfig(); config.setIgnoreDefaultExcludes(false); config.setCycleDetectionStrategy(CycleDete>>>详细阅读

本文标题：Jquery+CSS 创建流动导航菜单 Fluid Navigation

地址：http://www.17bianji.com/kaifa2/JS/27022.html

1/2 1