css+javascript 动态生成菜单

这两天一直在尝试用Css+javascript生成动态菜单，由于原来css和javascript知识太薄弱，经过了两天的上网查资料，终于完成了任务。主要步骤如下：

1、定义style.css文件（要绑定相应的图片，否则样式还是显示不出来）：

.nav_top .nav {     width: 775px;     list-style: none;     margin: 0;     padding: 0;     position: relative;     overflow: hidden;     height: 43px;     margin-bottom: -5px; } .nav_top .nav li {     float: left;     width: 111px;     height: 38px;     background-image: url('../images/nav_link.gif');     line-height: 38px;     text-align: center;     font-weight: bold;     position: relative;     display: inline;     z-index: 3; } .nav_top .nav li.hover {     z-index: 2;     width: 119px;     height: 43px;     margin: 0 -4px 0 -6px;     background: url('../images/nav_hover.gif');     margin-bottom: -5px; } .nav li a:link, .nav li a:visited {     color: white; } .tit {     clear: both;     height: 35px;     line-height: 35px;     background-image: url('../images/tit-bg.jpg'); } .tit2 {     float: left;     width: 680px;     height: 28px;     list-style: none;     margin: 4px 0 0 0;     padding: 0; } .tit2 li {     float: left;     display: inline;     line-height: 28px;     padding: 0 20px;     color: white;     border-left-style: solid;     border-left-width: 1px;     border-left-color: #AECA6B;     border-right-color: #789B24;     border-right-style: solid;     border-right-width: 1px;     font-weight: bold; } .tit2 a:link, .tit2 a:visited {     color: white; } .tit2 a:hover, .tit2 a:active {     color: red;     text-decoration: underline;    /* background-position: center bottom ;*/    /*padding-right: 5px;*/  background: url('../images/menu3.gif') no-repeat center 15px;  height: 100%; }

2、定义菜单的样式：

<div class="nav_top">
 
 <ul id="t" class="nav">
  <li id="t1" class="hover" οnclick="test(this); return false;"><a href="#menuList-1"></a>首页</li>     
  <li οnclick="test(this); return false;"><a href="#menuList-2"></a>公司动态</li>     
  <li οnclick="test(this); return false;"><a href="#menuList-3"></a>行业资讯</li>     
  <li οnclick="test(this); return false;"><a href="#menuList-4"></a>产品展示</li>     
  <li οnclick="test(this); return false;"><a href="#menuList-5"></a>工程案例</li>     
  <li οnclick="test(this); return false;"><a href="#menuList-6"></a>关于我们</li>   
        
  </ul>
</div>
<div id="#menuList-1" class="tit"> 
 <ul  class="tit2">
 <li><a href="#">首页1</a></li>
 <li><a href="#">首页2</a></li>
 <li><a href="#">首页3</a></li>
 <li><a href="#">首页4</a></li>
 <li><a href="#">首页5</a></li>
    <li><a href="#">首页6</a></li>
    </ul>  
</div>
<div id="#menuList-2"  style="display:none" class="tit"> 
 <ul  class="tit2" >
 <li><a href="#">公司动态1</a></li>
 <li><a href="#">公司动态2</a></li>
 <li><a href="#">公司动态3</a></li>
 
    </ul>  
</div>
<div id="#menuList-3" style="display:none" class="tit"> 
 <ul  class="tit2">
 <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>  
</div>
<div id="#menuList-4"style="display:none" class="tit"> 
 <ul  class="tit2">
 <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>  
</div>
<div id="#menuList-5" style="display:none" class="tit"> 
 <ul  class="tit2">
 <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>  
</div>
<div id="#menuList-6" style="display:none" class="tit"> 
 <ul  class="tit2">
 <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>  
</div>

3、定义javascript

<script language="javascript" type="text/javascript">     function test(obj) {         for (var i = 0; i < t.children.length; i++) {             t.children[i].className = ""; //清楚所有的样式             document.getElementById("#menuList-"+(i+1)).style.display = 'none';         }

        document.getElementById(obj.firstElementChild.hash).style.display = ''; ;             obj.className = "hover";        // t.children[3].className = "hover";           } </script>

这样就可以实现了！

学到的东西：

（一）css方面：1、CSS就是由3个基本部分——“对象”、“属性”和“值”组成的

（二）javascript:1、用children方法可以遍历li的内容。

                        2、注意children和childnode的区别。

                        3、obj.firstElementChild.hash表示一个div的id。

下一个目标：用jquery实现动态菜单！

转载于:https://www.cnblogs.com/flowmyheart/archive/2012/09/12/2682140.html