开发者社区> 老朱教授> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

两个横向菜单栏示例

简介:
+关注继续查看

菜单栏示例一:
菜单源代码
<!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>

<!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> <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(/images/cnblogs_com/xugang/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>

<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(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;} .navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;} .navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/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(/images/cnblogs_com/xugang/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(/images/cnblogs_com/xugang/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,如需转载请自行联系原作者

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

相关文章
uniapp制作app顶部原生导航栏输入框的内容自动变化
uniapp制作app顶部原生导航栏输入框的内容自动变化
0 0
小程序如何实现自定义标题栏(头部导航栏)
首先,我们需要了解如何设置标题栏透明:[url]https://openclub.alipay.com/read.php?tid=13793&fid=101[/url]; 以及如何获取状态栏和标题栏高度:[url]https://openclub.alipay.com/read.php?tid=13796&fid=101&page=1[/url]。
2741 0
左侧固定,右侧自适应的布局方式(新增评论区大佬教的方法)
一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流。 2.margin-left的值等于固定div的宽度相等。 .
554 0
Word2007:如何在竖版(纵向)页面中间插入横版(横向)页面
通常情况下,我们在word排版过程中使用一种页面版式(横版/竖版)即可。但在某些特殊情况下,我们可能会需要在竖版页面中间插入一页或多页横版页面,抑或在横版页面中间插入竖版页面。那么,如何针对这特立独行的版面进行横/竖版的页面设置呢?     晕晕今天处理的文档中,刚好用到这个技术,写下来,算作笔记,也分享给之前还没有碰到这种情况的朋友。
787 0
如何设置安装界面左上角的自定义图标
原文:如何设置安装界面左上角的自定义图标 上一篇:sqlserver显示数据库和表及列名 DialogSetInfo(DLG_INFO_ALTIMAGE,SUPPORTDIR^"logo.BMP",TRUE);   logo.
688 0
返回页面顶部
javascript:window.scroll(0,0)
358 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载