html前端元素—菜单导航代码实例

今天分享下”html前端元素—菜单导航代码实例“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。菜单栏示例一：

复制代码代码如下:

<!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 一级菜单选择项 http://www.qlyl1688.com *//* 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>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

html前端元素—菜单导航代码实例相关推荐

CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单（一）
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效黑色的左侧导航管理面板ui特效企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...
js左侧三级菜单导航代码
效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
分享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 ...
HTML字母导航栏怎么做,html导航栏下拉菜单怎么制作？这里有详细的代码实例
本篇文章介绍了关于html导航栏下拉菜单的制作,文章一开始就给出了全部的导航栏下拉菜单的代码,没看懂的下面都有详细的解释.下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作,先看 ...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
bilibili在线视频演示地址: [前端代码实例]使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能效果图: 完整代码: <!DOCTYPE ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
Vue开发实例（11）之el-menu实现左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...

html前端元素—菜单导航代码实例

html前端元素—菜单导航代码实例相关推荐

最新文章

热门文章