当前位置：首页 > 资讯 > 技术文档

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

时间：2021-08-21 04:05 编辑：来源：阅读：
扫一扫，手机访问

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

那么我们应该如何实现流动导航菜单呢？一、效果图 [url=http://addyosmani.com/resources/fluid-menu/fluid-menu.html][/url][url=http://addyosmani.com/resources/fluid-menu/fluid-menu.html][img]http://images.cnblogs.com/cnblogs_com/ywqu/Jquery/Jquery%20CSS%20Menu/image11.jpg[/img] [/url] 鼠标滑过Menu，即Show提示信息。二、实现步骤 1、CSS代码

[url=javascript:#]<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代码

[u]复制代码[/u][/url] 代码如下:

$(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])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

[center] 
<div id="container"> 
    <h1>Fluid Navigation
CSS & jQuery <small>Tutorial by Addy Osmani</small></h1> 
     
<div id="menuBarHolder"> 
[list] 
[*][url=javascript:#]Home[/url]<div class="menuInfo">I am some text about the home section</div>[/*] 
[*][url=javascript:#]Services[/url]<div class="menuInfo">I am some text about the services section</div>[/*] 
[*][url=javascript:#]Clients[/url]<div class="menuInfo">I am some text about the clients section</div>[/*] 
[*][url=javascript:#]Portfolio[/url]<div class="menuInfo">I am some text about the portfolio section</div>[/*] 
[*][url=javascript:#]About[/url]<div class="menuInfo">I am some text about the about section</div>[/*] 
[*][url=javascript:#]Blog[/url]<div class="menuInfo">I am some text about the blog section</div>[/*] 
[*][url=javascript:#]Follow[/url]<div class="menuInfo">I am some text about the follow section</div>[/*] 
[*][url=javascript:#]Contact[/url]<div class="menuInfo">I am some text about the contact section</div>[/*] 
[/list] 
</div> 
</div> 
[/center]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：jQuery实现精美的多级下拉菜单特效
下一篇：jQuery中hover方法和toggle方法使用指南

资讯排行榜
更多>>