CSS橙色二级水平菜单
2009-08-09 01:25
423 查看
演示效果截图
用到的图片
CSS橙色二级水平菜单 图片打包下载
CSS代码
/*全局样式*/ *{font-size:12px;} body{margin:0;padding:0;background-color:#FFFFFF; font-size:12px;color:#666666; font-family: "宋体",Arial, Helvetica, sans-serif;} /*主导航菜单*/ #menu ul{padding:0;border:0;list-style:none; line-height:150%;margin-top: 0;margin-right: 0; margin-bottom: 0;margin-left: 15px;} #menu_out{width:966px;padding-left:4px; margin-left:auto;margin-right:auto; background:url(menu_left.gif) no-repeat left top;} #menu_in{ background:url(menu_right.gif) no-repeat right top; padding-right:4px;} #menu{background:url(menu_bg.gif) repeat-x; height:73px;} .menu_line{ background:url(menu_line.gif) no-repeat center top; width:8px;} .menu_line2{ background:url(menu_line2.gif) no-repeat center top; width:15px;} #nav{padding-left:20px;} #nav li{float:left;height:35px;} #nav li a{float:left;display:block; padding-left:6px;height:35px; background:url(menu_on_left.gif) no-repeat left top; cursor:pointer;text-decoration:none;} #nav li a span{float:left;padding:11px 14px 10px 10px; background:url(menu_on_right.gif) no-repeat right top; font-size:14px;line-height:14px; font-weight:bold;color:#FFFFFF;text-decoration:none;} #nav li .nav_on{ /*鼠标经过时变换背景,方便JS获取样式*/ background-position:left 100%;} #nav li .nav_on span{ /*鼠标经过时变换背景,方便JS获取样式*/ background-position:right 100%;color:#333333; text-decoration:none;padding:14px 14px 7px 10px;} /*子栏目*/ #menu_con{text-align:left; padding-left:20px;clear:both;} #menu_con li{float:left; height:22px;margin-top:8px;} #menu_con li a{display:block;float:left; background:url(menu_on_left2.gif) no-repeat left top; cursor:pointer;padding-left:3px;} #menu_con li a span{float:left; padding:6px 10px 4px 10px;line-height:12px; background:url(menu_on_right2.gif) no-repeat right top;} #menu_con li a:hover{text-decoration:none; background:url(menu_on_left2.gif) no-repeat left bottom;} #menu_con li a:hover span{ background:url(menu_on_right2.gif) no-repeat right bottom;}
JavaScript代码
<script language="javascript"> function qiehuan(num){ for(var id = 0;id<=9;id++){ if(id==num){ document.getElementById("qh_con"+id).style.display="block"; document.getElementById("mynav"+id).className="nav_on"; }else{ document.getElementById("qh_con"+id).style.display="none"; document.getElementById("mynav"+id).className=""; }}} </script>
HTML代码
<div id=menu_out> <div id=menu_in> <div id=menu> <UL id=nav> <LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="http://www.865171.cn/"><SPAN>首 页</SPAN></A></LI> <LI class="menu_line"></LI><li> <a href="http://www.865171.cn/css-templates/" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>CSS模板</span></a></li> <li class="menu_line"></li><li> <a href="http://www.865171.cn/admin-templates/" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>后台模板</span></a></li> <li class="menu_line"></li><li> <a href="http://www.865171.cn/css-code/" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>CSS代码</span></a></li> <li class="menu_line"></li><li> <a href="http://www.865171.cn/css-menu/" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>CSS菜单</span></a></li> <li class="menu_line"></li><li> <a href="http://www.865171.cn/csss-chart/" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>CSS图表</span></a></li> </UL><div id=menu_con> <div id=qh_con0 style="DISPLAY: block"><UL> <LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI> <LI><A href="http://www.865171.cn/"> <SPAN>首 页</SPAN></A></LI> </UL></div><div id=qh_con1 style="DISPLAY: none"><UL> <LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI> <LI><A href="http://www.865171.cn/"> <SPAN>CSS模板</SPAN></A></LI></UL></div> <div id=qh_con2 style="DISPLAY: none"> <UL><LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/"> <SPAN>后台模板</SPAN></A></LI></UL></div> <div id=qh_con3 style="DISPLAY: none"> <UL><LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/"> <SPAN>CSS代码</SPAN></A></LI></UL></div> <div id=qh_con4 style="DISPLAY: none"> <UL><LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/"> <SPAN>CSS菜单</SPAN></A></LI></UL></div> <div id=qh_con5 style="DISPLAY: none"> <UL><LI><a href="http://www.865171.cn/"> <span>免费模板网 www.865171.cn</span></A></LI> <LI class=menu_line2></LI><LI><A href="http://www.865171.cn/"> <SPAN>CSS图表</SPAN></A></LI></UL></div> </div></div></div></div> <br /><br /> <div id="a"><a href="http://www.865171.cn" target="_blank"> 免费模板网 www.865171.cn</a></div>
相关文章推荐
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- 橙色水平web2.0CSS菜单
- 橙色、黑色、栗色形成的水平CSS菜单
- 橙色玻璃效果水平CSS菜单
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- CSS青灰色二级下拉水平菜单
- [CSS]CSS Cookbook例子:创建水平导航菜单
- Ajax 另类二级联动菜单(DIV+CSS)
- 利用html+css创建一个二级导航菜单
- 水平和垂直方向的三级PopMenu-弹出菜单(DIV+CSS+JS)
- CSS二级菜单+Javascript
- 下拉的DIV+CSS+JS二级树型菜单,刷新无影响
- CSS之实现二级菜单动态出现
- 漂亮的水平导航菜单css+ul li
- HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
- CSS蓝色水平选项卡菜单
- 紫罗兰水平CSS菜单
- css二级侧拉菜单,右侧拉开菜单,右侧展开菜单
- div+css 纵向导航菜单及二级菜单弹出