网页制作中有下拉菜单的导航怎么做？

发布网友 发布时间：2022-04-21 07:08

我来回答

共5个回答

热心网友 时间：2022-06-18 15:15

这个效果你可以通过2中途径实现，使用框架或者是使用JavaScript代码。

1.使用框架：查找框架中的二级菜单组建，如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子

<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

详细内容参见http://v3.bootcss.com/components/#navbar

2.使用JavaScript代码。使用jQuery的动画实现，如slideToggle()可使元素上下滑动，并且可以使用参数控制快慢。

<script>
//ID menu是点击的以及菜单，触发的是点击事件，当然可以换成hover事件，ID submenu是二级菜单层。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()请参考http://www.w3school.com.cn/jquery/jquery_slide.asp

热心网友 时间：2022-06-18 15:15

这里有一个js的多级联动下拉菜单
可以自定义位置和样式
里面有教程和源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?8=q&id=11931

热心网友 时间：2022-06-18 15:15

网页 是吧 加个行为就可以了 （显示隐藏菜单）用Macromedia Dreamweaver 做

热心网友 时间：2022-06-18 15:16

用DREAMWEAVER就有插入表单项，，貌似是这个吧，，，反正用DREAMWEAVER就可以的。

热心网友 时间：2022-06-18 15:17

很简单的