HTML5响应式编程示例-bootstrap3.7or4.0多级下拉菜单

最新推荐文章于 2026-06-23 14:47:30 发布

原创最新推荐文章于 2026-06-23 14:47:30 发布 · 4.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

网页设计同时被 3 个专栏收录

7 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

html5响应式编程

5 篇文章

订阅专栏

本文通过HTML5响应式编程，利用Bootstrap 3.7或4.0创建多级下拉菜单。介绍了目标、开发工具、H5响应式编程概念，以及编程要点，包括Bootstrap对二级菜单的支持和多级菜单的实现方法。并提供了完整示例代码。

HTML5响应式编程示例-bootstrap3.7or4.0多级下拉菜单

一、目标

本文简要说明html5响应式编程，并采用bootstrap3.7或4.0实现响应式多级下拉菜单

二、开发工具

1、 win10
2、 webstorm2016
3、浏览器
chrome-64.0.3-64bit
fireFox-58.02-64bit

三、什么是H5响应式编程

就是html5网页设计，自动适应多种设备输出，显示效果不变
1、可以自动适应多种浏览器
chrome,firefox,edge
2、可以自动适应多种设备
win10、win7电脑环境(pc,mac)
安卓手机与平板
ios手机与平板

四、多级菜单处理效果

在chrome浏览器输出

这里写图片描述

在fireFox模拟手机及平板输出

这里写图片描述

五、编程要点

1、 bootstrap无直接生成多级菜单代码

  需要加一组css属性,dropdown-submenu

2、二级菜单设计，bootstrap可以直接实现

ul nav nav-pills –>

即 <ul class=”nav nav-pills”> nav-pills/nav-tabs/navbar-nav等多种均可实现

li or li dropdown–>

即 
<li><a href="#">一级菜单<a></li> <!--当没有二级下拉菜单时 -->
<li class=”dropdown”>
    <a href="#" data-toggle="dropdown" class="dropdown">
        <span class="caret"></span> <!-- 生成一级菜单右边下拉图标-->
       <ul class="drowndown_menu">  <!-- 见后面描述-->
</li>

ul dropdown-menu –>

即　

<ul class=”dropdown-menu”>
    <li><a href="#">二级菜单　</a> </li> <!--当没有三级子菜单时 -->
    <li class="divider"></li>  <!-- 产生菜单分割线 -->
    <li class="dropdoen-submenu"> <--当有三级菜单时，后面内容见下面描述3 -->

 <li class=”dropdown-submenu”>
    <a href="#">三级菜单</a> <!--在此没有　data-toggle="drodown" class="data-toggle" ,及　<span class="caret"></span>-->
    <ul class="dropdown-menu">   <!-- 见后面描述 -->

可能是第2级菜单，也可能是第3、4+级菜单，只要是下拉，均是这种方式
<ul class=”dropdown”>
  <li><a href=”#”>二级菜单1</a></li>
  <li><a href=”#”>二级菜单2</a></li>

　　重复上面第3、4步
　　可以是第5、6级，更多级菜单

六、完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--
    下面一行代码自适应各设备输出，即响应式H5编程
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--
      下面
      dist表示bootstrap4.0组件
      dist3表示boostrap3.7组件
      jquery组件要用2.2.4，不要用3.3.1版本，并且要放在bootstrap.js前面
    -->
    <!--<link rel="stylesheet" href="../dist/css/bootstrap.css">-->
    <link rel="stylesheet" href="../dist3/css/bootstrap.css">
    <script src="../jquery2.2.4/jquery-2.2.4.js"></script>
    <!--<script src="../dist/js/bootstrap.js"></script>-->
    <script src="../dist3/js/bootstrap.js"></script>
    <title>测试bootstrp 响应式页面布局,多级下拉菜单</title>
</head>
    <style>
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
    </style>

    <body>
    <div class="container">
     <!--  下面几种表示方法均可以实现-->
    <ul class="nav nav-tabs">
    <!--<ul class="nav navbar-nav navbar-brand">-->
    <!--<ul class="nav navbar-nav">-->
    <!--<ul class="nav navbar-nav">-->
    <!--<ul class="nav nav-pills ">-->
    <!--<ul class="nav nav-pills navbar-fixed-bottom">-->
       <li class="dropdown">
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">菜单1<span class="caret"></span></a>
           <ul class="dropdown-menu">
               <li ><a href="#">菜单11</a></li>
               <li ><a href="#">菜单12</a></li>
               <li ><a href="#">菜单13</a></li>
               <li ><a href="#">菜单14</a></li>
               <li ><a href="#">菜单15</a></li>

           </ul>
       </li>
       <li class="dropdown">
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">菜单2<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li ><a href="#">菜单21</a></li>
                <li ><a href="#">菜单22</a></li>
                <li ><a href="#">菜单23</a></li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="javascript:;">菜单24</a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1"href="javascript:;">菜单241</a></li>
                        <li><a tabindex="-1"href="javascript:;">菜单242</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1"href="javascript:;">菜单243</a></li>
                        <li><a tabindex="-1"href="javascript:;">菜单244</a></li>
                    </ul>
                </li>

                <li class="dropdown-submenu">
                    <a href="#">菜单25</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">菜单251</a></li>
                        <li><a href="#">菜单252</a></li>
                        <li><a href="#">菜单253</a></li>
                        <li><a href="#">菜单254</a></li>
                        <li><a href="#">菜单255</a></li>
                    </ul>
                </li>

            </ul>
        </li>

       <li class="dropdown" >
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单3<span class="caret"></span></a>
           <ul class="dropdown-menu">
               <li><a href="#">菜单31</a></li>
               <li><a href="#">菜单32</a></li>
               <li><a href="#">菜单33</a></li>
               <li class="dropdown-submenu">
                   <a href="#">菜单34</a>
                   <ul class="dropdown-menu">
                       <li><a href="">菜单341</a></li>
                       <li><a href="">菜单342</a></li>
                       <li><a href="">菜单343</a></li>
                       <li><a href="">菜单344</a></li>
                   </ul>
               </li>
               <li><a href="#">菜单35</a></li>
               <li class="dropdown-submenu">
                   <a href="#">菜单36</a>
                   <ul class="dropdown-menu">
                       <li><a href="#">菜单361</a></li>
                       <li><a href="#">菜单362</a></li>
                       <li><a href="#">菜单363</a></li>
                       <li><a href="#">菜单364</a></li>
                       <li><a href="#">菜单365</a></li>
                   </ul>
               </li>
           </ul>
       </li>
       <li ><a href="#">菜单4</a></li>

       <li ><a href="#">菜单5</a></li>
    </ul>
  </div>
</body>
</html>