AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

两个横向菜单栏示例

2017-11-26 1947
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

菜单栏示例一：
菜单源代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ script >
< script type ="text/javascript" >
$( function () {
$( " #container .menu1 ul li " ).click( function () {
 var index = $( " #container .menu1 ul li " ).index( this );
$( this ).addClass( " bg " ).siblings().removeClass();
$( " #container .menu2 ul li ul " ).eq(index).show().parent().siblings( " li " ).children( " ul " ).hide();
})
})
 </ script >

< style type ="text/css" >
body
 {
margin : 0 ;
padding : 0 ;
font-family : "宋体" ;
font-size : 9pt ;
color : #FFFFFF ;
font-weight : bold ;
}
#container
 {
width : 100% ; /* 1200px; */
height : auto ;
margin : 0 auto ;
/* border: 1px #1025c0 solid; */

/* xugang 2011.10.19 */
/* margin: 0; */
padding : 0px ;
font-family : "宋体" ;
font-size : 9pt ;
color : #FFFFFF ;
font-weight : bold ;
}
#container .menu1
 {
width : 684px ;
height : 34px ;
border : none ;
background : url(sadasd_09.png) no-repeat ;
/* background: url(http://www.webdm.cn/images/20101213/2/menu1.gif) no-repeat;
background-color: #1B5582; */
}
#container .menu1 ul
 {
margin : 0 ;
/* padding: 0; */
padding-left : 0px ;
padding-right : 0px ;
padding-bottom : 0px ;
padding-top : 4px ;
position : relative ;

margin-left : 4px ; /* xugang 一级菜 单选择项样式 */
}
#container .menu1 ul li
 { /* border: 1px #1025c0 solid; 测试 */
float : left ;
height : 25px ;
width : 110px ;
line-height : 25px ;
list-style : none ;
text-align : center ;
cursor : pointer ;
/* color: #fffff; */
padding-left : 2px ; /* xugang 一级菜单选择项 */
/* margin-left: 1px; xugang 一级菜单选择项 容易使一级菜单动态向右移动 */
}
#container .menu2
 {
width : 100% ; /* 1000px; */
height : 25px ;
border : none ;
color : #000000 ;
font-weight : normal ;
background-color : #C9DEFA ; /* #DFF0FF 子菜单颜色 */
padding-left : 0px ; /* xugang */
padding-top : 0px ; /* xugang */
margin-left : 0px ; /* xugang */
}
#container .menu2 ul
 {
margin : 0 ; /* xugang 原始 margin: 0; */
padding : 0 ;
}
#container .menu2 ul li
 {
height : 30px ;
line-height : 30px ;
list-style : none ;
float : left ;
cursor : pointer ;
}
#container .menu2 ul li ul li
 { /* border: 1px #1025c0 solid; 测试 */
float : left ;
padding-top : 0px ;
padding-bottom : 0px ;
padding-left : 40px ;
padding-right : 30px ; /* xugang */
height : 25px ;
line-height : 25px ;
list-style : none ;
}
.bg
 {
font-size : 12pt ;
/* font-weight: normal; */
/* text-decoration: underline; blink */
background-color : #1B5582 ; /* #1B5582 一级菜单选择项 背景 */
}
.hide
 {
display : none ;
}
.menu_a1 { display : block ; color : #ffffff ; text-decoration : none !important ; }
.menu_a2 { display : block ; color : #000000 ; text-decoration : none !important ; }
</ style >
</ head >
< body >
< div id ="container" >
< div class ="menu1" >
< ul >
< li class ="bg" >< a href ="#" class ="menu_a1" >第一栏 </ a ></ li >
< li >< a href ="#" class ="menu_a1" >第二栏 </ a ></ li >
< li >< a href ="#" class ="menu_a1" >第三栏 </ a ></ li >
< li >< a href ="#" class ="menu_a1" >第四栏 </ a ></ li >
< li >< a href ="#" class ="menu_a1" >第五栏 </ a ></ li >
< li >< a href ="#" class ="menu_a1" >第六栏 </ a ></ li >
</ ul >
</ div >
< div class ="menu2" >
< ul >
< li >
< ul >
< li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
< li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
< li >< a href ="#" class ="menu_a2" >第一栏 </ a ></ li >
</ ul >
</ li >
< li >
< ul class ="hide" >
< li >第二栏 </ li >< li >第二栏 </ li >< li >第二栏 </ li >
</ ul >
</ li >
< li >
< ul class ="hide" >
< li >第三栏 </ li >< li >第三栏 </ li >< li >第三栏 </ li >
</ ul >
</ li >
< li >
< ul class ="hide" >
< li >第四栏 </ li >< li >第四栏 </ li >< li >第四栏 </ li >
</ ul >
</ li >
< li >
< ul class ="hide" >
< li >第五栏 </ li >< li >第五栏 </ li >< li >第五栏 </ li >
</ ul >
</ li >
< li >
< ul class ="hide" >
< li >第六栏 </ li >< li >第六栏 </ li >< li >第六栏 </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
< div style ="width:400px; height:300px; background-color:red;" ></ div >
< br />

</ body >
</ html >


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

菜单栏示例二：
菜单源代码
< html >
< head profile ="http://gmpg.org/xfn/11" >
< title >黄页地区列表 </ title >
< style type ="text/css" >
body { background : #ccc ; color : #000 ; font : normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋体" ; text-align : center ; }
.nav { position : relative ; background : url(nav_bg.png) no-repeat 0 -36px ; width : 960px ; height : 36px ; }
.navinner { background : url(nav_bg.png) no-repeat 100% -72px ; }
.navlist { height : 36px ; line-height : 36px ; overflow : hidden ; margin : 0 10px ; background : url(nav_bg.png) repeat-x 0 0 ; }
.nav li { float : left ; display : inline ; margin : 0 0 0 -2px ; padding : 0 4px 0 6px ; background : url(nav_bg.png) no-repeat 0 -108px ; }
.nav a { display : block ; width : 102px ; text-align : center ; font-size : 120% ; text-decoration : none ; }
.nav a:link, .nav a:visited { color : #fff ; text-decoration : none ; }
.nav a:hover, .nav a:active { color : #fff ; font-weight : bold ; background : url(nav_bg.png) no-repeat 50% -144px ; text-decoration : none ; }
</ style >
</ head >
< body >
< div class ="nav" >
< div class ="navinner" >
< ul class ="navlist" >
< li >< a href ="http://www.qincai.net/" title ="首页" >首页 </ a ></ li >
< li >< a href ="http://www.qincai.net/cat.html" title ="分类列表" rel ="nofollow" >分类列表 </ a ></ li >
< li >< a href ="http://www.qincai.net/loc.html" title ="地区列表" rel ="nofollow" >地区列表 </ a ></ li >
< li >< a href ="http://www.qincai.net/trade.html" title ="供求商机" rel ="nofollow" >供求商机 </ a ></ li >
< li >< a href ="http://www.qincai.net/news.html" title ="行业新闻" rel ="nofollow" >行业新闻 </ a ></ li >
< li >< a href ="http://www.qincai.net/submit.html" title ="提交企业" rel ="nofollow" >提交企业 </ a ></ li >
< li >< a href ="http://fz.qincai.net/join.html" title ="发布商机" rel ="nofollow" >发布商机 </ a ></ li >
< li >< a href ="http://www.qincai.net/find.html" title ="高级搜索" rel ="nofollow" >高级搜索 </ a ></ li >
</ ul >
</ div >
</ div >
</ body >
</ html >


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

Demo下载




本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2011/11/15/2250355.html，如需转载请自行联系原作者

文章标签：
容器
前端开发
JavaScript
流计算
老朱教授
目录
相关文章
游客mldfis24krfue
|
存储 Linux
在Linux中，LVM是什么？
在Linux中，LVM是什么？
游客mldfis24krfue
317 1
阿里云基础设施
|
存储 运维 监控
光，让云计算跑得更快
深耕技术、不断创新，让云计算继续 “光”速发展！
阿里云基础设施
988 0
光，让云计算跑得更快
疯狂学习GIS
|
搜索推荐 定位技术 数据安全/隐私保护
方便、免费的PDF在线处理网站汇总：PDF合并、文字编辑、页面提取与删除、格式转换…
方便、免费的PDF在线处理网站汇总：PDF合并、文字编辑、页面提取与删除、格式转换…
疯狂学习GIS
560 1
ST小智
|
Linux
Linux多线程中互斥锁、读写锁、自旋锁、条件变量、信号量详解
Linux多线程中互斥锁、读写锁、自旋锁、条件变量、信号量详解
ST小智
378 0
Linux多线程中互斥锁、读写锁、自旋锁、条件变量、信号量详解
云松雪
|
NoSQL 前端开发 网络协议
Redis发布订阅模式
Redis发布订阅模式
云松雪
321 0
新一代人工智能平台
|
供应链 安全 算法
艾瑞咨询最新研报：新迪天工CAD达到国际先进水平
三维CAD软件是最核心、最基础的工业软件之一，其数据模型是产品数字化的源头，已经成为了现代工程设计和制造必不可少的工具。
新一代人工智能平台
270 0
阿甘兄
Axure快速入门（10） -变量和表达式总结
Axure快速入门（10） -变量和表达式总结
阿甘兄
312 0
从未止步..
|
Java
解决在idea中构建项目时，出现的java：错误：不支持发行版本 5
解决在idea中构建项目时，出现的java：错误：不支持发行版本 5
从未止步..
732 0
uiu
|
Oracle Java 关系型数据库
JDK的下载与安装
JDK的下载与安装
uiu
759 0
JDK的下载与安装
LeapMay
|
缓存 网络安全 开发工具
GitLab上传文件 和 GitLab配置ssh key
GitLab上传文件 和 GitLab配置ssh key
LeapMay
528 0