CSS实现无限级菜单

最新推荐文章于 2022-09-06 09:27:23 发布

adverse

最新推荐文章于 2022-09-06 09:27:23 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： css function null border 产品 float

本文链接：https://blog.csdn.net/adverse/article/details/1610477

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>
<style type="text/css">
<!--
#{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/
body { font-family: arial, 宋体, serif; font-size:13px;}

/*下拉菜单样式*/
#menu { width:480px; height:24px;background:#B9D3EE}
#nav {line-height: 24px;}
#nav a {display: block; text-align:center;}
#nav a:visited {color:#000000;text-decoration:none;}
#nav li {float: left; width: 80px; }/*首层背景色*/
#nav li a:hover{background:#FFD39B;}/*经过背景色*/
/*2级*/
#nav li ul { left: -1000em; position: absolute;}
#nav li ul li{ width: 120px;background:#ECECEC; border:1px solid #B9D3EE; border-top:none;}/*2级下拉列表层背景色,属性*/
#nav li ul a:hover {color:#000000;}/*2级下拉列表层经过属性*/
#nav li.showhide ul {left: auto;}

/*下拉菜单结束*/
-->
</style>
<script type="text/javascript">
<![CDATA[//><!--
//-------------------------------CSS控制部分----------------------
var css_main = '#nav li.showhide ul ';
var css_level = 5;//定义几级菜单，此处根据个人需要修改
var css_array = new Array();
//三级以后可以在此改变属性
function modifycss(level, modifycssarray)
{
var i = 0;
css_array[level - 3] = css_array[level - 3].replace(/{(.*?)}/g, function(){if(modifycssarray[i] == null || modifycssarray[i] == ""){i++;return arguments[0];} else {return "{" + modifycssarray[i++] + "}"}});
}
//三级以后可以在此加css属性
function addcss(level, addcssarray)
{
var i = 0;
css_array[level - 3] = css_array[level - 3].replace(/{(.*?)}/g, function(){if(addcssarray[i] == null || addcssarray[i] == ""){i++;return arguments[0];} else {return "{" + arguments[1] + addcssarray[i++] + "}"}});
}
//生成css样式
function pushcss(cssstr, level)
{
if (level == 0) return;
css_array.push(cssstr + 'li ul a:hover {color:#000000;}/n' +
       cssstr + 'li ul li{ width: 120px;background:#ECECEC; border:1px solid #B9D3EE; border-top:none;}/n' +
       cssstr + 'li ul { left: -1000em; position: absolute;}/n' +
       cssstr + 'li.showhide ul {left: 119px; top: 0px; }');
pushcss(cssstr + "li.showhide ul ", --level);
}
pushcss(css_main, css_level - 2);
//modifycss(3, new Array("color:#00ffff;", null, null, null))
//addcss(4, new Array("background:#00ff00;", "background:#00ff00;", null, null))
//打印css样式
document.writeln('<style type="text/css">');
document.writeln(css_array.join("/n"));
document.writeln('</style>');
//----------------------------------------------------------------------
//显示或隐藏菜单
function showMenu() {
    var sfEls = document.body.getElementsByTagName("li");
    for (var i = 0; i < sfEls.length; i++) {
        sfEls[i].onmouseover = function showMenu() {
        this.className += (this.className.length > 0 ? " " : "") + "showhide";
        }

        sfEls[i].onmouseout = function showMenu() {
        this.className = this.className.replace(new RegExp("( ?|^)showhide//b"), "");
        }
    }
}
window.οnlοad=showMenu;

//--><!]]>
</script>
</head>

<body>

<div id="menu">
<ul id="nav">
  <li><a href="#">关于聚想</a>
  <ul>
   <li><a href="#">产品一</a>
    <ul>
     <li><a href="#">三级列表</a>
      <ul>
       <li><a href="#">四级列表</a>
        <ul>
         <li><a href="#">五级列表1</a></li>
         <li><a href="#">五级列表2</a></li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </li>
   <li><a href="#">产品一</a></li>
   <li><a href="#">产品一</a></li>
   <li><a href="#">产品一</a></li>
   <li><a href="#">产品一</a></li>
   <li><a href="#">产品一</a></li>
  </ul>
  </li>
  <li><a href="#">案例展示</a>
  <ul>
   <li><a href="#">服务二</a></li>
   <li><a href="#">服务二</a></li>
   <li><a href="#">服务二</a></li>
   <li><a href="#">服务二服务二</a></li>
   <li><a href="#">服务二服务二服务二</a></li>
   <li><a href="#">服务二</a></li>
  </ul>
  </li>
  <li><a href="#">网络推广</a>
  <ul>
   <li><a href="#">案例三</a></li>
   <li><a href="#">案例</a></li>
   <li><a href="#">案例三案例三</a></li>
   <li><a href="#">案例三案例三案例三</a></li>
  </ul>
  </li>
  <li><a href="#">联系我们</a>
  <ul>
   <li><a href="#">我们四</a></li>
   <li><a href="#">我们四</a></li>
   <li><a href="#">我们四</a></li>
   <li><a href="#">我们四111</a></li>
  </ul>
  </li>
  <li><a href="#">在线演示</a>
  <ul>
   <li><a href="#">演示</a></li>
   <li><a href="#">演示</a></li>
   <li><a href="#">演示</a></li>
   <li><a href="#">演示演示演示</a></li>
   <li><a href="#">演示演示演示</a></li>
   <li><a href="#">演示演示</a></li>
   <li><a href="#">演示演示演示</a></li>
   <li><a href="#">演示演示演示演示演示</a></li>
  </ul>
  </li>
  <li><a href="#">联系我们</a>
  <ul>
   <li><a href="#">联系联系联系联系联系</a></li>
   <li><a href="#">联系联系联系</a></li>
   <li><a href="#">联系</a></li>
   <li><a href="#">联系联系</a></li>
   <li><a href="#">联系联系</a></li>
   <li><a href="#">联系联系联系</a></li>
   <li><a href="#">联系联系联系</a></li>
  </ul>
  </li>
</ul>
</div>

</html>

adverse

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现无限级菜单

css菜单演示#{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/body { font-family: arial, 宋体, serif; font-size:13px;}/*下拉菜单样式*/#menu { width:480px; height:24px;background:#B9D3EE}#nav {line-heig
复制链接

扫一扫