使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation
有时,一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么本文介绍的流动导航菜单Fluid Navigation也可以解决此问题,同时也为网站设计的添加了一些时尚而又动感元素。那么我们应该如何实现流动导航菜单呢?
一、效果图
二、实现步骤
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]):通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
演示地址: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/archive/2010/02/23/1671644.html ,如需转载请自行联系原作者
使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation相关推荐
- 为SharePoint网站创建自定义导航菜单
相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoint 2007/2010的网站导航基本上基于标准的ASP.NET SiteMap模型,所以只要 ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
- html左侧分级导航,jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: (function($){ $.fn.extend({ dro ...
- html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
- html 下拉框设置名称,html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- html导航栏中加超链接,用CSS设置超链接与导航菜单.ppt
水平菜单 水平菜单可以自由地转换为竖直菜单和折行菜单 玻璃效果的菜单 基本页面 设置菜单整体效果 应用滑动门技术 用CSS设置 链接与导航菜单 在HTML语言中,超链接是通过标记来实现的,链接的具体地 ...
- css 导航界面,CSS界面组件之导航菜单
title: CSS界面组件之导航菜单 date: 2016-09-17 16:39 tags: CSS界面组件 CSS 0x00 纵向菜单 代码示例: Document *{ margin:0; p ...
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
最新文章
- 解决ifconfig命令未找到
- 第八章 Oralce的管理员密码的管理
- @RequestParam和@RequestBody
- 【应用】Lambda表达式
- javascript获取浏览器客户端IP
- 智能车的转弯部分_江西智能搬运平板车铁路轨道运输车-厂家直销
- Oracle例外处理
- 深度学习——ReLU在x=0的时候是条线,为什么什么是非线性函数?
- 微信小程序或微信网页里关注公众号
- @Trasactional 事务解读
- 真香!微软办公环境大揭秘!
- 公众号排名优化被动引流截流之关于公众号注册申请的那些事儿
- THINKPAD X250 加SSD安装WIN10 BIOS设置
- flutter整合极光推送完美版
- 动态SQL的 if 条件判断
- 电机控制器培训资料-《如何快准狠的标定永磁同步电机》 品牌:车用电机控制器
- RISCV toolchain编译工具链搭建
- ldd 执行结果:不是动态可执行文件
- Realsense L515使用
- 2022电大国家开放大学网上形考任务-桥梁工程技术非免费(非答案)
热门文章
- Kafka/Metaq设计思想学习笔记 转
- web网页上面调用qq
- IOS数据本地存储的四种方式--
- [C++]各编译器对C++11的支持比较
- POJ PKU 2305 java大数进制转化 JAVA 大数转换成字符串 转
- Com 方法默认参数值设置
- 软考信息系统项目管理师_信息化与信息系统4_软件工程_新一代信息技术---软考高级之信息系统项目管理师006
- AndroidStudio_android通过自定义来实现倒计时的AlertDialog---Android原生开发工作笔记245
- DataBseDesign工作笔记003---ERStudio使用笔记_基本使用方法详解
- Android学习笔记---文件的操作模式,各种模式之间的关系,以及沿用linux系统的安全性