下拉及多级弹出式菜单

原创 2007年09月23日 08:54:00

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

这里是用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;

       }

 

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

下拉及多级弹出式菜单

下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一种非常优秀的导航形式。 早期的下拉或弹出式菜单通过隐藏的layer...

(总结)Swing组件的使用---下拉式菜单(menu),弹出式菜单(JPopupMenu),选项卡窗体(JTabbedPane)

菜单是GUI中最常用的组件,菜单不是Component类的子类,不能放置在普通容器中,不受布局管理器的约束,只能放置在菜单栏中.     菜单组件由菜单栏 (MenuBar)、菜单(Menu)和菜单...

第八天 下拉及多级弹出菜单

今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单,包含以下内容和知识点:(http://www.aa25.cn/div_css/909.shtml) 带下拉子菜单的导...

css+html+js实现下拉及多级弹出菜单

本文将使用css+html+js实现横向菜单,具有下拉的多级弹出菜单。 首先我们来看看效果图: 首先应该写html部分的代码,代码比较简单,代码如下: ...

《十天学会web标准(div+css)》之第八天:下拉及多级弹出菜单

今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单,包含以下内容和知识点: 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一、...

jQuery多级下拉树状菜单

  • 2014-07-25 19:34
  • 57KB
  • 下载

Android开发之多级下拉列表菜单实现(仿美团,淘宝等)

注:本文转载于:http://blog.csdn.NET/minimicall/article/details/39484493 我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的...

Android多级下拉列表菜单

  • 2017-06-29 13:27
  • 821KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)