java怎么实现垂直导航栏_jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下

1.HTML代码

竖直导航菜单

$(function(){

//垂直导航栏，点击下拉子菜单

$(".main>a").click(function(){

$(this).next().slideToggle(500)

.parent().siblings().find(".child").slideUp(500);

})

//水平导航栏，鼠标经过下拉导航栏

$(".hmain").hover(function(){

$(this).find(".child").slideToggle(500)

.parent().siblings().find(".child").slideUp();

})

菜单 1
- 菜单1.1
- 菜单1.2
- 菜单1.3
菜单 2
- 菜单2.1
- 菜单2.2
- 菜单2.3
- 菜单2.4
菜单 3
- 菜单3.1
- 菜单3.2
- 菜单3.3
菜单 4
- 菜单4.1
- 菜单4.3
菜单 5
- 菜单5.1
- 菜单5.2

菜单 1
- 菜单1.1
- 菜单1.2
- 菜单1.3
菜单 2
- 菜单2.1
- 菜单2.2
- 菜单2.3
- 菜单2.4
菜单 3
- 菜单3.1
- 菜单3.2
- 菜单3.3
菜单 4
- 菜单4.1
- 菜单4.3
菜单 5
- 菜单5.1
- 菜单5.2

2.CSS代码

margin: 0px;

padding: 0px;

}

.content{

margin: 40px 100px;

float: left;

}

ul ,li{

list-style: none;

}

.main,.hmain{

width: 150px;

background: #222;

font-size: 16px;

text-align: center;

cursor: pointer;

line-height: 40px;

color: white;

}

.main>a,.hmain>a{

text-decoration: none;

color: white;

display: inline-block;

width: 150px;

min-height: 40px;

}

.main:hover,.hmain:hover{

background: black;

}

.child{

background: #444;

display:none;

}

.child li:hover{

background: #333333;

}

/*垂直导航栏左浮动*/

.hmain{

float: left;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

java怎么实现垂直导航栏_jquery实现垂直和水平菜单导航栏相关推荐

分享113个JS菜单导航，总有一款适合您
分享113个JS菜单导航,总有一款适合您 113个JS菜单导航下载链接:https://pan.baidu.com/s/1d4nnh-UAxNnSp9kfMBmPAw?pwd=cw23 提取码:cw ...
分享111个JS菜单导航，总有一款适合您
分享111个JS菜单导航,总有一款适合您 111个JS菜单导航下载链接:https://pan.baidu.com/s/1WkrSIyHC5JySwrCTL0sgLA?pwd=13yx 提取码:13 ...
分享112个JS菜单导航，总有一款适合您
分享112个JS菜单导航,总有一款适合您 112个JS菜单导航下载链接:https://pan.baidu.com/s/1Dm73d2snbu15hZErJjTXxg?pwd=fz1c 提取码:fz ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
分享77个JS菜单导航，总有一款适合您
分享77个JS菜单导航,总有一款适合您 77个JS菜单导航下载链接:https://pan.baidu.com/s/1e_384_1KC2oSTDy7AaD3og?pwd=zkw6 提取码:zkw6 ...
【tkinter制作文本编辑器（3）】编辑菜单选项栏事件和右键菜单功能实现（撤销、还原、复制、粘贴、剪切、查找及全选）
编辑菜单选项栏事件功能实现 1. 编辑菜单选项栏事件功能实现步骤 1.1 撤销 1.2 恢复 1.3 剪切 1.4 复制 1.5 粘贴 1.6 全选 1.7 查找 2. 快捷键绑定 3. 右键弹出菜单 ...
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[轮播图特效] 文章目录 [考拉海购网站]之[商品栏及右侧垂直导航] 第一步,页面布局分布情况分析第二步,根据页面 ...
html导航栏文字怎么平均,对齐HTML/CSS导航栏中的文本？
好吧,很明显我做错了什么.基本上我试图在我的页面顶部创建一个垂直导航栏,在图片的右侧.对齐HTML/CSS导航栏中的文本? 它应该是这样的: 首页简历联系我不知怎的,它不断结束了这样的: 主页简历 ...
html5导航栏向应折叠,超实用！网站导航栏设计形式总结
导航对于一个网站来说,起到重要的引导作用.一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用.下面跟大家分享下常用的几种网页导航形式: 1.顶部导航 ...
html5 css3左侧多级菜单,modernizr.custom.js制作html5 CSS3多级层叠侧边菜单导航栏
特效描述:modernizr.custom.js html5CSS3 多级层叠侧边菜单导航栏.CSS3多级层叠菜单代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 All Categ ...

java怎么实现垂直导航栏_jquery实现垂直和水平菜单导航栏

java怎么实现垂直导航栏_jquery实现垂直和水平菜单导航栏相关推荐

最新文章

热门文章