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

最新推荐文章于 2024-05-14 09:55:02 发布

isscollege

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量4.3k

点赞数

分类专栏：网页设计前端 html5响应式编程 bootstrap多级下拉菜单

本文链接：https://blog.csdn.net/isscollege/article/details/79448741

版权

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 ch

最低0.47元/天解锁文章

isscollege

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5响应式编程示例-bootstrap3.7or4.0多级下拉菜单

HTML5响应式编程示例-bootstrap3.7or4.0多级下拉菜单一、目标本文简要说明html5响应式编程，并采用bootstrap3.7或4.0实现响应式多级下拉菜单二、开发工具1、 win10 2、 webstorm2016 3、浏览器 chrome-64.0.3-64bit fireFox-58.02-64bit三、 ...
复制链接

扫一扫