`
seyaa
  • 浏览: 55789 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

二级菜单jquery导航插件nav

阅读更多
二级菜单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]





1
0
分享到:
评论

相关推荐

    jquery二级下拉菜单导航代码

    3. **jQuery 代码**:添加事件监听器,当鼠标悬停在一级菜单上时,显示二级菜单;离开一级菜单时,隐藏二级菜单。 ```javascript $(document).ready(function() { $('#nav li').hover( function() { $(this)....

    jquery左侧固定悬浮二级导航菜单

    2. **CSS样式**:为了实现固定在左侧的效果,可以使用CSS的`position: fixed`属性,设置适当的宽度和高度,确保二级菜单在鼠标悬停一级菜单时显示。 ```css #sidebar { position: fixed; top: 0; left: 0; ...

    jquery单页网站导航插件One Page Nav

    4. **初始化插件**:在页面加载完成后,使用jQuery选择器找到导航菜单,并调用`onePageNav`方法进行初始化。例如: ```javascript $('#myNav').onePageNav({ currentClass: 'active', changeHash: false, ...

    jQuery Metro二级导航菜单切换

    一级菜单项下可以嵌套另一个`&lt;ul&gt;`作为二级菜单,包含相应的二级菜单项: ```html &lt;ul class="metro-nav"&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1 &lt;ul class="metro-nav"&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单1-1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href...

    jquery导航插件

    《jQuery导航插件:构建绿色动感立体二级菜单》 在网页设计中,导航菜单是至关重要的组成部分,它引领用户在网站各个页面间穿梭,提供良好的用户体验。jQuery作为一个强大的JavaScript库,为开发者提供了丰富的功能...

    jquery滑动下拉导航菜单 导航菜单

    在网页设计中,导航菜单是用户与网站交互的关键元素,它帮助用户轻松浏览网站的不同部分。...在实践中,可以结合Bootstrap、Foundation等前端框架,或者自定义jQuery插件,进一步完善和定制导航菜单的功能和样式。

    jquery树形导航菜单插件制作滑动多级二级下拉菜单展示

    本教程将深入讲解如何使用jQuery制作一个具有滑动效果的多级二级下拉树形导航菜单。 首先,我们需要理解jQuery的基本用法。jQuery的核心概念是选择器、事件处理和DOM操作。在创建树形导航菜单时,我们通常会使用CSS...

    Jquery网站导航级联菜单(Jquery1.7.2)

    通常,一级菜单项包含在 `&lt;ul&gt;` 标签中,二级菜单项则嵌套在一级菜单项的 `&lt;li&gt;` 下,使用 `&lt;ul&gt;` 标签包裹。例如: ```html &lt;nav&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1 &lt;li&gt;&lt;a href="#"&gt;子菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=...

    jquery 导航菜单 menu

    Superfish 要求一级菜单项包含二级菜单项作为子元素。通常,我们可以使用 `&lt;ul&gt;` 和 `&lt;li&gt;` 标签来构建菜单。 ```html &lt;nav id="mainMenu"&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1 &lt;li&gt;&lt;a href="#"&gt;子菜单1.1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;...

    jQuery插件 TaoBaoUED左侧导航

    《jQuery插件与TaoBaoUED左侧导航详解》 在网页设计中,导航栏扮演着至关重要的角色,它引导用户高效地浏览网站内容。在众多电商网站中,TaoBaoUED(淘宝用户体验设计部)的左侧导航设计以其简洁明了、易用性强的...

    jQuery中英文字切换导航条鼠标悬停滑动下拉二级导航菜单代码

    然后在jQuery中,当鼠标悬停在一级菜单上时,显示二级菜单,离开时隐藏: ```javascript $('nav ul li.has-submenu').hover( function() { $(this).children('.nav-submenu').slideDown(); // 悬停时滑动显示 },...

    jQuery巧克力色二级导航.zip

    在这个二级导航中,HTML结构应清晰地组织成一级和二级菜单项,以便于CSS和jQuery进行操作。 JavaScript部分,尤其是jQuery的使用,使得二级菜单在用户交互时能够智能响应。例如,当用户鼠标悬停在一级菜单上时,...

    jquery带二级下拉子栏目导航代码.zip

    如果要加入预览图功能,可以在二级菜单项中添加图片元素,并通过CSS控制其位置和样式。例如: ```html &lt;li&gt;&lt;a href="#"&gt;预览图"&gt;子菜单1-1&lt;/a&gt;&lt;/li&gt; ``` 然后在CSS中调整图片的相对位置,使其在鼠标悬停时显示在...

    jQuery滑动导航菜单

    这可以通过媒体查询(media queries)和 jQuery 插件如 `Responsive Nav` 来实现,确保在小屏幕上也能方便地使用导航。 总结,创建 jQuery 弹性滑动导航菜单涉及以下几个关键步骤:HTML 结构设计、CSS 样式定义、...

    CSS JS简单二级菜单代码特效.rar

    这是一个关于使用CSS和JavaScript实现简单二级菜单的代码特效资源。这个压缩包中包含了一个名为"codesc.net"的文件,很可能是HTML、CSS和JavaScript代码的集合,用于演示和实现所述效果。以下是对这个主题的详细说明...

    jQuery网站导航下拉菜单代码.zip

    除此之外,为了增强用户体验,还可以添加一些额外的功能,如点击一级菜单项保持下拉菜单显示状态,或者添加自定义的jQuery插件以实现更多特效。这都需要根据实际需求进行扩展和优化。 总结,使用jQuery实现网站导航...

    jQuery手机移动端垂直分类菜单导航切换代码.zip

    4. 二级或多级菜单的处理:如果菜单包含多级分类,JavaScript代码还需要处理嵌套的子菜单,确保它们在正确的时机出现。 总的来说,这个项目提供了一套完整的解决方案,用于在移动设备上构建响应式的、可交互的垂直...

    jQuery网页页面滚动自动隐藏导航菜单代码

    "jQuery网页页面滚动自动隐藏导航菜单代码"是一个实用的功能,它通过JavaScript库jQuery实现了当用户滚动页面时,导航菜单的动态显示与隐藏效果,提升了用户体验。本知识点将详细介绍这一功能的实现原理和步骤。 ...

    jQuery鼠标悬停下拉导航菜单.zip

    《jQuery鼠标悬停下拉导航菜单详解》 在网页设计中,导航菜单是用户与网站交互的重要组成部分,它能帮助用户快速找到目标信息。本篇文章将深入解析“jQuery鼠标悬停下拉导航菜单”的实现原理和应用技巧,以jQuery...

    jquery多级导航

    &lt;li&gt;&lt;a href="#"&gt;二级菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;二级菜单2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;一级菜单2&lt;/a&gt;&lt;/li&gt; &lt;/nav&gt; ``` 2. **CSS样式**:为菜单添加样式,包括颜色、字体、边距和过渡效果,使其在...

Global site tag (gtag.js) - Google Analytics