jquery做二级菜单导航栏，jquery一级菜单显示二级菜单

JQuery编写菜单导航问题

下拉菜单导航是一个网站的简易网站地图，起着引导访客的作用，用Jquery实现简单的菜单，实现的原理：鼠标是否通过顶层菜单，如果动作发生，则触发下层菜单的显示，如果鼠标从顶部移出，底部菜单收回。利用Jquery的ready函数实现整个页面的加载完成后执行动作。

每个子菜单都是一个dd节点，在展开收起的时候会对每个dd执行效果。看起来就好像百叶窗的效果了。

给每个菜单给以相同的ID、、然后给ID绑定点击事件，当前菜单点击时注入一个css的class，其他的注入默认的class。差不多就可以了。

可以在url地址上加上一个参数，当新页面加载完成，你把参数值获取下来，是哪个就给哪个菜单加上背景；也可以使用cookie来记录，当点击菜单的时候，记录下来，在新页面加载完成的时候把这个cookie值获取出来，就可以知道用户之前点击的哪个菜单，然后给这个菜单加上背景就可以了。

首先，新建一个html界面，然后引入jquery-ui.js，jquery-ui.css，jquery即可。数字表示的是版本号，只要jquery的版本是2版本的基本都可以，太高版本的和jqueryui不兼容哦。然后我们添加一个div作为折叠菜单的最外层，并且添加id：accordion。然后在里面嵌套h4标签和div标签，分别用作菜单栏和菜单内容区域。

你说的是类似级联菜单那种吗？如果IE火狐等其他浏览器正常，这个的原因可能有几个：如果你用的onmouseout事件，建议你换成onmouseleave试试，因为存在事件冒泡的问题。如果存在子菜单，在子菜单上面也bind一个onmouseenter和onmouseleave事件。

相关问答

Q1: HTML网页怎样制作二级下拉菜单,二级滑动菜单

首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。

打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接：#。然后保存该网页文件。点击 窗口-行为 菜单，打开行为面板。选中第一步输入的文字，点行为面板上的+号，在弹出的菜单中选-显示弹出式菜单。

现在我们为nav添加样式，首先去掉默认的margin和padding，再去掉ul li标签的list-style样式和a标签的默认下划线。

使用HTML和CSS制作下拉菜单的方法如下：编写带有div导航的html代码：使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

shangkeit.com target=_blank二级导航4/a /li /ul /li /ul /div/body/html复制上面代码，保存到后缀为.html或者.htm的文件中，用浏览器打开就可以看到效果。

这个说来话来，但只要你知道原理就很简单了，做得好不好看是样式的问题了。

Q2: 急急急,网页布局二级导航条div+css,这个效果怎么做呢,在线等。。。_百...

设置一级菜单定位方式为相对定位，然后二级菜单定位方式为绝对定位，同时设置二级菜单的left为0，top为一级菜单的高度值。

然后CSS部分加上代码 a {background：blue} 然后 a：hover {background：red} 这样可以实现背景色的转换，如果想要变色的区域不是矩形，那就得准备好原图和激活图了，然后也用 a：hover {background：url()}来实现了，很简单。

主要的问题是不让二级菜单继承一级菜单的父样式 二级菜单设置单独的样式名，并且调用。

这种效果要做很简单，做一个白色半透明的png图片，然后把它作为文字所在的那个div的背景即可，这个比较简单，就不详细说明了。

此时对应效果如图：接下来准备相关的导航按钮图片（可以事先利用PS制作好）。

Q3: 用Jquery代码编写导航栏

1、可以用toggle来做，这种导航栏的代码有的是，自己找一下，然后改就可以了。用addClass和removeClass也是可以做的。

2、首先，是“可动的动画效果”，这个上来说easyUI并没有直接提同导航栏的控件或者样式，但是两种easyui提供的样式可以提供参考和辅助，一个是eaysui-menu类（参考Easyui官方帮助文档9页-创建简单菜单），另一个是panel面板（参考Easyui官方帮助文档15页-创建折叠面板）。

3、JS或Jquery动态改变导航栏样式 js怎么实现点击一个按钮时样式改变，直到点击下一个按钮时原先的样式没有，当前按钮显示那个样式。

4、一个简单的解决方案：顶端固定一个DIV作为导航容器，该DIV左端和右端分别用DIV模拟向左和向右的按钮，中间区域呈现导航按钮，计算当前位置，用模拟的按钮控制左右滚动。

5、data-role=footer代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分， 就是data-role=content 是代表着页面内容部分， 主要的内容在这里面显示。这3个部分构成了一个简单的页面。

6、实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。

Q4: jquery实现二级菜单时,点击一级菜单,二级菜单滑出一下就又消失了_百度...

鼠标移出DIV1，触发事件，事件中可以做一个延时（延时的方法很多，比如计时器，比如倒计时，比如一个指定事件的动画效果等），延时结束时隐藏DIV2即可。

这个是hover的问题你hover一级的时候二级出现，但是离开一级，二级肯定消失了，所以，二级要和一级的关系屡好，如何将鼠标在不出一级菜单的情况就能到二级菜单上，建议你使用js写这个效果。

如果你用的onmouseout事件，建议你换成onmouseleave试试，因为存在事件冒泡的问题。如果存在子菜单，在子菜单上面也bind一个onmouseenter和onmouseleave事件。

jquery做二级菜单导航栏的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery一级菜单显示二级菜单、jquery做二级菜单导航栏的信息别忘了在本站进行查找喔。