二个简单的菜单导航条示例

  发布时间:2014-05-08 14:14:33   作者:佚名   我要评论
这篇文章主要介绍了二个简单的菜单导航条示例,需要的朋友可以参考下

菜单栏示例一:


复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script</a> 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(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat;
/*background: url(<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn/images/20101213/2/menu1.gif</a>) 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>

</body>
</html>


菜单栏示例二:




复制代码
代码如下:

<html>
<head>
<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="<a href="https://www.jb51.net/">https://www.jb51.net/</a>" title="首页">首页</a></li>
<li><a href="<a href="https://www.jb51.net/cat.html">https://www.jb51.net/cat.html</a>" title="分类列表" rel="nofollow">分类列表</a></li>
<li><a href="<a href="https://www.jb51.net/loc.html">https://www.jb51.net/loc.html</a>" title="地区列表" rel="nofollow">地区列表</a></li>
<li><a href="<a href="https://www.jb51.net/trade.html">https://www.jb51.net/trade.html</a>" title="供求商机" rel="nofollow">供求商机</a></li>
<li><a href="<a href="https://www.jb51.net/news.html">https://www.jb51.net/news.html</a>" title="行业新闻" rel="nofollow">行业新闻</a></li>
<li><a href="<a href="https://www.jb51.net/submit.html">https://www.jb51.net/submit.html</a>" title="提交企业" rel="nofollow">提交企业</a></li>
<li><a href="<a href="https://www.jb51.net/join.html">https://www.jb51.net/join.html</a>" title="发布商机" rel="nofollow">发布商机</a></li>
<li><a href="<a href="https://www.jb51.net/find.html">https://www.jb51.net/find.html</a>" title="高级搜索" rel="nofollow">高级搜索</a></li>
</ul>
</div>
</div>
</body>
</html>

相关文章

  • Unicode中的CJK(中日韩统一表意文字)字符小结

    CJK,是CJK Unified Ideographs的缩写,意思是“中日韩统一表意文字”,把分别来自中文、日文、韩文、越文中,本质、意义相同、形状一样或稍异的表意文字赋予相同编码,其
    2021-11-27
  • Unicode中的常用字母小结

    最早的计算机大多只能使用ASCII字符,后来逐渐扩展到主要的西文字母,有了Unicode后,各种文字的字母都已被纳入其中,包括很多古代使用的字母,可以用于考古学领域了。但最
    2021-11-27
  • Unicode中的数学符号小结

    数学、物理及一些科技领域使用了很多特殊符号,Unicode码中都有对应的码位,列出其码表,以方便使用
    2021-11-27
  • Unicode中的常用符号

    Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案,所以包容万象,使用Unicode符号可以在网页上直接显示一些常用的符号,比如箭头、表情等
    2021-11-27
  • html网页中使用希腊字母的方法

    希腊字母是很常用的一系列符号,特别是在数学、物理等科技领域,经常要使用来表示特定含义的常量或变量
    2021-11-27
  • HTML汉字编码标准介绍

    这篇文章主要介绍了HTML汉字编码标准介绍,需要的朋友可以参考下
    2021-11-27
  • HTML基础详解(下)

    本文主要介绍了HTML基础知识,HTML指的是超文本标记语言,它不是一种编程语言,而是一种标记语言。需要具体了解HTML的小伙伴可以参考一下这篇文章哦
    2021-10-13
  • HTML基础详解(上)

    本文主要介绍了HTML基础知识,HTML指的是超文本标记语言,它不是一种编程语言,而是一种标记语言。需要具体了解HTML的小伙伴可以参考一下这篇文章哦
    2021-10-13
  • 关于HTML编码导致的乱码问题

    今天遇到个问题就是写的HTML代码打开显示的是乱码问题,怎么处理这一问题呢,下面小编通过图文实例相结合给大家分享处理方法,一起看看吧
    2021-09-02
  • 纯html+css实现Element loading效果

    本文主要介绍了纯html+css实现Element loading效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-29

最新评论