关闭

下拉及多级弹出式菜单

882人阅读 评论(0) 收藏 举报

下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现有空间隐藏与显示更多内容,并能够对内容进行合理的分类显示。

这里是用JS+DIV+CSS实现。

比如页面中存在如下代码

<ul id="nav">

<li><a href="">文章</a>

<ul>

       <li><a href="">CSS教程</a></li>

       <li><a href="">DOM教程</a></li>

       <li><a href="">XML教程</a></li>

       <li><a href="">FLASH教程</a></li>

</ul>

</li>

<li><a href="">参考</a>

<ul>

       <li><a href="">XHTML</a></li>

       <li><a href="">XML</a></li>

       <li><a href="">CSS</a></li>

</ul>

</li>

<li><a href="">BLOG</a>

       <ul>

              <li><a href="">全部</a></li>

              <li><a href="">网页技术</a></li>

              <li><a href="">UI技术</a></li>

              <li><a href="">FLASH技术</a></li>

       </ul>

<ul>

       <li><a href="">摇滚</a></li>

       <li><a href="">纯音乐</a></li>

       <li><a href="">古典金曲</a></li>

       <li><a href="">电影原声</a></li>

</ul>

</li>

</ul>

CSS代码中首先

     ul {

     padding:0;

     margin:0;

     list-style:none;             

     }

     li {

            float:left;

            width:160px;

     }

     li ul {

            display:none;

            top::20px;                    

     }

     li:hover ul, li.over ul{

            display:block;

     }

先用list-style:none;去掉所有圆点标示。

display:none;隐藏了ul;

       li:hover ul定义了li元素hover状态下的ul元素,

li.over ul定义了classoverli元素下的ul元素.

这两种状态下都使用display:block; 当设置的时候不仅其指派的元素将显示,而且将显示为一个块状,如没用的话,元素只会按自己的内容在屏幕上占有的区域进行显示,而使用的时,元素将会自动形成一个方块作为自己的占为符,这种设计对于做大按钮来说是非常方法的.

上面的方法,在IE7FireFox中都可以正常运行. 但在IE6中就没办法。

要使IE6支持的话,添加下面的代码

<script type="text/javascript">

       startList = function() {

              if(document.all&&document.getElementById) {

                     navRoot = document.getElementById("nav");

                     for(i=0;i<navRoot.childNodes.length;i++) {

                            node = navRoot.childNodes[i];

                            if(node.nodeName == "li"){

                                   node.onmouseover = function() {

                                          this.className+=" over";

                                   }

                                   node.onmouseout=function() {

                                          this.className=this.className.replace(" over","");

                                   }

                            }

                     }

              }

       }

       window.onload = startList;

</script>

这样就可以实现效果,不过界面不美观,在CSS中加入

       ul li a{

              display:block;

              font-size:12px;

              border:1px solid #ccc;

              padding:3px;

              text-decoration:none;

              color:#777;

       }

       ul li a:hover{

              background-color:#f4f4f4;

       }

这是横向的下拉表现

纵向的如下

       ul {

              margin:0;

              padding:0;

              list-style:node;

              width:130px;

              border-bottom:1px solid #ccc;

              font-size:12px;             

       }

       ul li{

              position:relative;

       }

       li ul{

              position:absolute;

              left:129px;

              top:0;

              display:none;

       }

       ul li a{

              display:block;

              text-decoration:none;

              color:#777;

              background:#fff;

              padding:5px;

              border:5px;

              border-bottom:0;

       }

       li:hover ul, li.over ul {

              display:block;

       }

 

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:129051次
    • 积分:2144
    • 等级:
    • 排名:第17683名
    • 原创:84篇
    • 转载:5篇
    • 译文:0篇
    • 评论:26条
    文章分类