<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是一个轻量级、高性能的JavaScript库，它的核心优势在于简化了DOM操作、事件处理、...
在这个“jquery页面位置定位导航菜单.rar”压缩包中，我们很可能会找到一个利用jQuery实现的动态页面定位导航菜单的示例。这个菜单能够根据用户滚动页面的位置自动高亮显示相应的导航链接，提供更好的用户体验。 ...
标题中的“简洁时尚的jQuery和CSS3侧边栏菜单插件”揭示了我们要讨论的核心技术：jQuery和CSS3，以及它们在创建一个高效且视觉吸引力强的侧边栏菜单中的应用。这种类型的菜单通常用于现代网页设计，尤其适用于响应式...
本文将深入探讨两个使用jQuery制作的网页导航栏实例，每个实例包含两个不同的导航效果，总共四个效果。 一、基础概念 1. jQuery：jQuery是由John Resig于2006年创建的开源库，它简化了JavaScript代码的编写，使DOM...
在现代网页设计中，动态的、响应式的导航菜单是不可或缺的组件，能够提升用户体验并改善网站的可访问性。本篇文档详细讲解了两个案例，包括相关前台代码、CSS样式和JavaScript代码的具体应用。 首先，从文档描述中...
本资源"jquery无限级树形菜单源码.zip"提供了一个利用jQuery实现的无限级树形菜单，对于构建具有深度层级结构的导航系统尤其有用，无论是后台管理界面还是前台侧栏菜单都能适用。该菜单方案考虑了良好的浏览器兼容性...
Bootstrap 前台悬浮左侧菜单是...理解这些核心概念有助于创建一个符合现代网页标准的交互式导航菜单。开发者可以根据自己的需求调整样式、添加动画效果，或者整合其他功能，如搜索框、用户登录状态等，以增强用户体验。
在网页开发中，树形菜单是一种常见的用户界面元素，尤其适用于展示层级结构清晰的数据，如网站的导航菜单、后台管理系统等。今天我们将深入探讨一款基于jQuery实现的无限级树形菜单源码，版本为v1.0。这款源码以其...
这个插件是基于jQuery库构建的，能够帮助开发者轻松地在网页上展示层次结构的数据，如目录结构、菜单或者组织架构。在前端开发中，它提供了一种优雅的方式来组织和展示信息，使得用户可以展开、折叠节点，以及通过...
一个优秀的前台模板应该具备清晰的导航结构、美观的设计、便捷的操作流程以及快速的页面响应。这直接影响到用户的购物体验，从而影响到网站的流量和销售业绩。 接下来，我们来谈谈jQuery，这是一个广泛应用于网页...
1. 该框架的开发环境为EclipseJEE集成开发工具。... 前台展示页面使用了JQuery EasyUI的布局、列表和消息组件。 6. 系统实现了较为完善的用户模块，对用户数据实现了增、删、改、查、分页等的功能。
在实际应用中，图标不仅可以用于按钮，还可以用在其他组件上，如表单字段的状态指示、导航菜单、提示信息等。通过合理地使用这些图标，可以使得Web应用界面更加专业和易用，提高用户的交互体验。同时，EasyUI的图标...
模板可能包含头部导航栏，这是一个固定在顶部的导航菜单，通常包括品牌标识、菜单项和搜索框。Bootstrap的导航组件提供了一种简便的方式创建这种功能，支持下拉菜单和响应式折叠效果，以适应小屏幕设备。此外，导航...
下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE...
Accordion 菜单效果是一种常见的导航结构，它将多个菜单项折叠在一起来节省空间。当用户点击一个菜单项时，它会展开显示其内容，而其他菜单项则会自动折叠。这种设计模式在页面内容较多但空间有限的情况下非常实用。...
8. 网站后台左侧和前台应用：文件提到菜单组可以应用于网站的后台管理界面的左侧导航栏，也可以用于网站前台的用户导航。这说明了这类菜单组的适用性和灵活性。 9. 错误提示和刷新操作：当页面或代码存在错误时，...
AdminLTE-2.4.0-rc是一个具体的Bootstrap风格前台框架版本。AdminLTE是一款基于Bootstrap的开源后台管理模板，它不仅适用于后台界面，也可应用于前台。AdminLTE提供了丰富的可定制组件，如导航栏、侧边栏、面包屑...
6. **导航菜单**: 导航菜单是网站的导向系统，帮助用户快速找到所需信息。模板中会包含不同风格的导航设计，如顶部横幅菜单、侧边栏菜单或底部菜单。 7. **图标和图像**: 图标和图像可以提升网站的视觉吸引力，模板...
例如，"仿126选项卡"和"下拉菜单"这两个项目很可能就是利用jQuery实现的动态菜单效果，使得用户能够轻松地导航和互动。 多级菜单在Web设计中是常见的元素，尤其是在大型网站中。"多级menu_js version"可能是一个用...
2. **功能模块设计**：网站的功能模块包括登录注册、导航菜单、搜索框、内容展示区、互动元素（如评论、分享按钮）等。这些模块应简洁易用，满足用户的实际需求。 3. **色彩搭配**：色彩在网站设计中扮演着重要的...