Zwei einfache Beispiele für die Menü-Navigationsleiste_HTML/Xhtml

Menüleistenbeispiel 1:

Code kopieren Der Code lautet wie folgt: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> $(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(); }) }) body { margin: 0; padding: 0; font-family: "宋体"; font-size: 9pt; color: #FFFFFF; Schriftstärke: fett; } #container { Breite: 100 %; /* 1200px; */ height: auto; margin: 0 auto; /* border: 1px #1025c0 solid; */ /* vom 19.10.2011 */ /* margin: 0; */ padding: 0px; Schriftfamilie: „宋体“; Schriftgröße: 9pt; Farbe: #FFFFFF; Schriftstärke: fett; } #container .menu1 { Breite: 684px; Höhe: 34px; Rahmen: keiner; Hintergrund: 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- links: 4px; /* xugang 一级菜 单选择项样式 */ } #container .menu1 ul li { /*border: 1px #1025c0 solid; Zeichen */ float: left; height: 25px; width: 110px; line-height: 25px; list-style: none; text-align: center ; Cursor: Zeiger; /* Farbe: #fffff; */ padding-left: 2px; /* xugang 一级菜单选择项 */ /* margin-left: 1px; xugang 一级菜单选择项 容易使一级菜单动态向右移动 */ } #container .menu2 { width: 100%; /* 1000px; */ Höhe: 25px; Rahmen: keiner; Farbe: #000000; Schriftstärke: normal; Hintergrundfarbe: #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; Zeichen */ 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; /* Schriftstärke: normal;*/ /* Textdekoration: Unterstreichung; blink */ Hintergrundfarbe: #1B5582; /* #1B5582 一级菜单选择项 背景 */ } .hide { display: none; } .menu_a1{ display: block; Farbe:#ffffff; Textdekoration: keine !important; } .menu_a2{ display: block; Farbe:#000000; Textdekoration: keine !important; } 第一栏 第二栏 第三栏 第四栏 第五栏 第六栏 第一栏 第一栏 第一栏 第二栏 第二栏 第二栏 第三栏 第三栏 第三栏 第四栏 第四栏 第四栏 第五栏 第五栏 第五栏 第六栏 第六栏 第六栏

菜单栏示例二：

复制代码 代码如下: 黄页地区列表 body {background:#ccc;color:#000;font: normal normal normal 12px/180 % Tahoma, Arial, Helvetica, serifenlos, "宋体";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: versteckt;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;Schriftstärke: fett;Hintergrund: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;} http://www.jb51.net/ " title="首页">首页 http://www.jb51.net/cat.html " title="分类列表" rel="nofollow">分类列表 http://www.jb51.net/loc.html " title="地区列表" rel="nofollow">地区列表 http://www.jb51.net/trade.html " title="供求商机" rel="nofollow">供求商机 http://www.jb51.net/news.html " title="行业新闻" rel="nofollow">行业新闻 http://www.jb51.net/submit.html " title="提交企业" rel="nofollow">提交企业 http://www.jb51.net/join.html " title="发布商机" rel="nofollow">发布商机 http://www.jb51.net/find.html " title="高级搜索" rel="nofollow">高级搜索

Zwei einfache Beispiele für die Menü-Navigationsleiste_HTML/Xhtml_Webseitenproduktion