二级菜单jquery导航插件nav
1、 效果：
2、 Nav 插件使用方法：
第一步：导入css和js
<link href="css/menu.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="nav-1.0.js"></script>
第一步：调用插件
1）、静态数据使用：
<script type="text/javascript">
$(function(){
// 文档就绪
$("#nav").nav({
target:'mainFrame',//链接目标
data:{"totalCount":2,"result":[{"name":"XX管理","childs":[{"name":"子菜单1",href:"common/singleItem.jsp?title=子菜单1"},{"name":"子菜单2",href:"common/singleItem.jsp?title=子菜单1"}]},{"name":"XX管理","childs":[{"name":"子菜单1",href:"common/singleItem.jsp?title=子菜单1"},{"name":"子菜单2",href:"common/singleItem.jsp?title=子菜单1"}]}]}
});
});
</script>
2）、动态url请求数据使用：
<script type="text/javascript">
$(function(){
// 文档就绪
$("#nav").nav({
target:'mainFrame',//链接目标
timeout:60,//url请求方式下的超时时间
url:'data.json'
});
});
</script>
以上两种方式都必须有一个前提，那就是在页面中有：
<body>
<div id="nav"></div>//看到这个id是不是和上面jquery取的id相同
</body>
3、参数说明
target:'mainFrame', //链接目标,值可以是:
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
timeout:60,//url请求方式下的超时时间
url:'data.json'
//json 数据请求路径url
data: 'json格式的数据'
//json格式的数据
注意：这里注意在1.4中，jQuery使用了更严格的方法来解析json。
所有的内容都必须使用双引号。
可以参考：[url]http://hi.baidu.com/proglife/blog/item/c5384e03c8991384d53f7cca.html[/url]
分享到：
相关推荐
3. **jQuery 代码**：添加事件监听器，当鼠标悬停在一级菜单上时，显示二级菜单；离开一级菜单时，隐藏二级菜单。 ```javascript $(document).ready(function() { $('#nav li').hover( function() { $(this)....
2. **CSS样式**：为了实现固定在左侧的效果，可以使用CSS的`position: fixed`属性，设置适当的宽度和高度，确保二级菜单在鼠标悬停一级菜单时显示。 ```css #sidebar { position: fixed; top: 0; left: 0; ...
4. **初始化插件**：在页面加载完成后，使用jQuery选择器找到导航菜单，并调用`onePageNav`方法进行初始化。例如： ```javascript $('#myNav').onePageNav({ currentClass: 'active', changeHash: false, ...
一级菜单项下可以嵌套另一个`<ul>`作为二级菜单，包含相应的二级菜单项： ```html <ul class="metro-nav"> <li><a href="#">菜单1 <ul class="metro-nav"> <li><a href="#">子菜单1-1</a></li> <li><a href...
《jQuery导航插件：构建绿色动感立体二级菜单》 在网页设计中，导航菜单是至关重要的组成部分，它引领用户在网站各个页面间穿梭，提供良好的用户体验。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能...
在网页设计中，导航菜单是用户与网站交互的关键元素，它帮助用户轻松浏览网站的不同部分。...在实践中，可以结合Bootstrap、Foundation等前端框架，或者自定义jQuery插件，进一步完善和定制导航菜单的功能和样式。
本教程将深入讲解如何使用jQuery制作一个具有滑动效果的多级二级下拉树形导航菜单。 首先，我们需要理解jQuery的基本用法。jQuery的核心概念是选择器、事件处理和DOM操作。在创建树形导航菜单时，我们通常会使用CSS...
通常，一级菜单项包含在 `<ul>` 标签中，二级菜单项则嵌套在一级菜单项的 `<li>` 下，使用 `<ul>` 标签包裹。例如： ```html <nav> <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href=...
Superfish 要求一级菜单项包含二级菜单项作为子元素。通常，我们可以使用 `<ul>` 和 `<li>` 标签来构建菜单。 ```html <nav id="mainMenu"> <li><a href="#">菜单1 <li><a href="#">子菜单1.1</a></li> <li>...
《jQuery插件与TaoBaoUED左侧导航详解》 在网页设计中，导航栏扮演着至关重要的角色，它引导用户高效地浏览网站内容。在众多电商网站中，TaoBaoUED（淘宝用户体验设计部）的左侧导航设计以其简洁明了、易用性强的...
然后在jQuery中，当鼠标悬停在一级菜单上时，显示二级菜单，离开时隐藏： ```javascript $('nav ul li.has-submenu').hover( function() { $(this).children('.nav-submenu').slideDown(); // 悬停时滑动显示 },...
在这个二级导航中，HTML结构应清晰地组织成一级和二级菜单项，以便于CSS和jQuery进行操作。 JavaScript部分，尤其是jQuery的使用，使得二级菜单在用户交互时能够智能响应。例如，当用户鼠标悬停在一级菜单上时，...
如果要加入预览图功能，可以在二级菜单项中添加图片元素，并通过CSS控制其位置和样式。例如： ```html <li><a href="#">预览图">子菜单1-1</a></li> ``` 然后在CSS中调整图片的相对位置，使其在鼠标悬停时显示在...
这可以通过媒体查询（media queries）和 jQuery 插件如 `Responsive Nav` 来实现，确保在小屏幕上也能方便地使用导航。 总结，创建 jQuery 弹性滑动导航菜单涉及以下几个关键步骤：HTML 结构设计、CSS 样式定义、...
这是一个关于使用CSS和JavaScript实现简单二级菜单的代码特效资源。这个压缩包中包含了一个名为"codesc.net"的文件，很可能是HTML、CSS和JavaScript代码的集合，用于演示和实现所述效果。以下是对这个主题的详细说明...
除此之外，为了增强用户体验，还可以添加一些额外的功能，如点击一级菜单项保持下拉菜单显示状态，或者添加自定义的jQuery插件以实现更多特效。这都需要根据实际需求进行扩展和优化。 总结，使用jQuery实现网站导航...
4. 二级或多级菜单的处理：如果菜单包含多级分类，JavaScript代码还需要处理嵌套的子菜单，确保它们在正确的时机出现。 总的来说，这个项目提供了一套完整的解决方案，用于在移动设备上构建响应式的、可交互的垂直...
"jQuery网页页面滚动自动隐藏导航菜单代码"是一个实用的功能，它通过JavaScript库jQuery实现了当用户滚动页面时，导航菜单的动态显示与隐藏效果，提升了用户体验。本知识点将详细介绍这一功能的实现原理和步骤。 ...
《jQuery鼠标悬停下拉导航菜单详解》 在网页设计中，导航菜单是用户与网站交互的重要组成部分，它能帮助用户快速找到目标信息。本篇文章将深入解析“jQuery鼠标悬停下拉导航菜单”的实现原理和应用技巧，以jQuery...
<li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">一级菜单2</a></li> </nav> ``` 2. **CSS样式**：为菜单添加样式，包括颜色、字体、边距和过渡效果，使其在...