使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation

简介: 有时,一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么本文介绍的流动导航菜单Fluid Navigation也可以解决此问题,同时也为网站设计的添加了一些时尚而又动感元素。

有时,一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么本文介绍的流动导航菜单Fluid Navigation也可以解决此问题,同时也为网站设计的添加了一些时尚而又动感元素。那么我们应该如何实现流动导航菜单呢?

一、效果图

鼠标滑过Menu,即Show提示信息。

 

 

二、实现步骤

1CSS代码

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:控制提示信息的展示与否。

 

2HTML代码

<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元素:提示内容信息。

3Javascript代码

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

 

演示地址:http://addyosmani.com/resources/fluid-menu/fluid-menu.html

下载地址:http://addyosmani.com/resources/fluid-menu/fluid-menu.zip

参考英文:

http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/#myPosts

 

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

相关文章
|
2月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
32 1
jQuery+CSS3自动轮播焦点图特效源码
|
2月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
52 0
|
26天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
28天前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
17 0
|
2月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
|
2月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
61 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
24 0
|
2月前
|
Java 数据库 Android开发
基于ssm心理测评系统前后台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于ssm心理测评系统前后台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
|
2月前
|
Java 数据库 Maven
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
|
2月前
|
Java 数据库 Android开发
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于SSM框架扶贫信息综合平台前台管理系统(spring+springmvc+mybatis+jsp+jquery+css)