<html>
<style type="text/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;}
.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;
}
</style>
<!--[if IE]>
<style type="text/css">
#menuBar li a{width:50px;}
.menuInfo { margin-left:-65px; width:80px;}
</style>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menuBar li').click(function(){
// 获得a标签的href属性
var url = $(this).find('a').attr('href');
document.location.href = url;
});
/*
* hover(over, out)
* overFunction鼠标移到元素上要触发的函数
* outFunction鼠标移出元素要触发的函数
*/
//一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
//这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
//当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。
//当鼠标移出这个元素时，会触发指定的第二个函数。
//而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），
//如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
$('#menuBar li').hover(function(){
/*
* slideDown(speed, [callback])
* speedString,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
* callback (可选)FunctionFunction在动画完成时执行的函数
*/
//通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
$(this).find('.menuInfo').slideDown();
},function(){
/*
* slideUp(speed, [callback])
* speedString,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
* callback (可选)FunctionFunction在动画完成时执行的函数
*/
//通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
$(this).find('.menuInfo').slideUp();
});
});
</script>
<center>
<div id="container">
<h1>Fluid Navigation<br />CSS & jQuery <small>Tutorial by Addy Osmani</small></h1>
<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>
</div>
</center>
</html>
分享到：
相关推荐
Jquery导航菜单栏，循环加载菜单项，方便Jquery前台菜单栏开发。
jquery头部导航菜单，比较好看的，简单好用，特性很炫很实用，适合做前台框架导航菜单，门户网站菜单等等
jquery页面位置定位导航菜单.rar
jquery实现的小巧简洁的无限级树形菜单，可用于后台或前台侧栏菜单！兼容性也比较好。
1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块，对用户数据实现了增、删、改、查、分页等的功能。
下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE...
-Button控件将不再自动拥有display:inline属性，如果希望两个按钮在一行显示，请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
下面的例子将结合项目实际运用来使用Jquery.TreeView,当然在使用控件树需要现在相应的js文件 下面就把我生成的TreeView展现给大家看看希望对大家有所帮助！在使用之前需要下载控件树的js文件和Css样式 介绍一下表...
---index.php 门户首页 （门户首页 的头部导航菜单在这个文件修改） 门户页面导航修改和LOGO 对应页面是index.php LOGO的默认大小是 208*55 位置：images/portal/logo_hx.png ---list_baby.htm 亲子教育 ---...
简单易用：这是一个简便易用的功能强大的系统，在后台没有复杂的菜单，使用起来方便快捷 飞一般的访问速度： 采用双重数据缓存，前台访问飞一般的速度 网站修改随心所欲： 可以在后台一键更换模板，也可以在后台...
Simple-Log主要功能特性：简单易用：这是一个简便易用的功能强大的系统，在后台没有复杂的菜单，使用起来方便快捷 飞一般的访问速度： 采用双重数据缓存，前台访问飞一般的速度 网站修改随心所欲： 可以在后台一键...
简单易用： 这是一个简便易用的功能强大的系统，在后台没有复杂的菜单，使用起来方便快捷 飞一般的访问速度： 采用双重数据缓存，前台访问飞一般的速度 网站修改随心所欲： 可以在后台一键更换模板，也可以在...
1、后台采用xhEditor一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。2、 2、产品图片及列表图片采用了lightbox图片幻灯...
边栏实现模块化，除导航菜单外所有功能模块都可以在后台自由排序删除加载，并且可以自定义新的模块 后台因安全原因使用服务器端的anthem.net框架开发，实现数据操作无刷新 所有数据操作全部封装在数据库里，一定...
基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用，在手机浏览器中能弹出下拉列表，却不能选择列表中的菜单项，通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决，...
边栏实现模块化，除导航菜单外所有功能模块都可以在后台自由排序删除加载，并且可以自定义新的模块 后台因安全原因使用服务器端的anthem.net框架开发，实现数据操作无刷新 所有数据操作全部封装在数据库里，一定...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单，后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能（采用百度分享接口，...
2.导航菜单管理(前台采用jquery插件实现二级下拉菜单，后台可设置菜单的显示和隐藏) 3.客服功能(可以很方便的为企业和客户之间搭建沟通的桥梁。后台无限制添加QQ,6种样式一键切换) 4.分享功能（采用百度分享接口，...
-修正extjs最新版本(v3.2.2)中的一个bug，如果下拉列表中存在两个相同的Text，则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...