效果 在线查看

代码少，都在HTML里

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<style>

.open-navbar {

transition: all .5s ease!important;

transform: translateX(0)!important

}

.open-btn {

right: -20%!important;

}

.open-icon {

background: url('open.svg') no-repeat center!important;

background-size: 100%;

}

.shadow::before {

position: absolute;

display: block;

content: '';

left: 0;

right: 0;

height: 100%;

background: rgba(6, 12, 34, 0.7)!important;

transition: all .3s ease-in;

}

@media screen and (max-width: 768px){

body {

background: url('http://222.186.12.239:10010/hgqztp_170428/009.jpg') no-repeat left center;

background-size: 110%;

}

.navbar {

background: rgba(6, 12, 34, 0.9)!important;

transition: all .5s ease;

transform: translateX(-100%);

width: 80%;

}

.navbar-light .navbar-toggler {

border: none;

position: fixed;

top: 1.5%;

right: -16%;

}

.navbar-light .navbar-toggler:focus {

outline: none;

}

.collapse:not(.show) {

display: block;

height: 100vh;

}

.navbar-light .navbar-toggler-icon {

transition: all .5s ease;

background: url('close.svg') no-repeat center;

background-size: 100%;

}

.navbar-light .navbar-nav .nav-link {

color: #fff!important

}

}

</style>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#"><img src="logo.svg" alt=""></a>

<button class="navbar-toggler" type="button" data-toggle="collapse">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNavDropdown">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Features</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Pricing</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">

Dropdown link

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

</ul>

</div>

</nav>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>

$(".navbar-light .navbar-toggler").click(function(){

$("body").toggleClass("shadow")

$(".navbar-light .navbar-toggler").toggleClass("open-btn")

$(".navbar-light .navbar-toggler-icon").toggleClass("open-icon")

$(".navbar").toggleClass("open-navbar")

})

</script>

</body>

</html>

Bootstrap移动端导航（简易）的更多相关文章

  1. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  2. Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

  3. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  4. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  5. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  6. django报错处理：对应ip无法登陆与使用bootstrap移动端响应工具，head响应实例

    1.报错 Invalid HTTP_HOST header: '192.168.1.100:8000'. You may need to add '192.168.1.100' to ALLOWED_ ...

  7. 使用bootstrap制作网站导航

    除了制作选项卡和下拉菜单,bootstrap还能编写出美观的网站导航栏 一.仿知乎导航栏 <body> <nav class="navbar navbar-default ...

  8. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  9. Bootstrap Affix(附加导航（Affix）插件的用法)

    原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件 附加导航(Affix) ...

随机推荐

  1. JAVA 之 每日一记 之 算法（ 给定一个正整数，返回它在 Excel 表中相对应的列名称。 ）

    题目: 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如: 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -& ...

  2. Leetcode 146. LRU 缓存机制

    前言 缓存是一种提高数据读取性能的技术,在计算机中cpu和主内存之间读取数据存在差异,CPU和主内存之间有CPU缓存,而且在内存和硬盘有内存缓存.当主存容量远大于CPU缓存,或磁盘容量远大于主存时,哪 ...

  3. [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型

    [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 目录 [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 0x00 摘要 0x01 前言 1.1 改 ...

  4. java代码覆盖实战

    Jacoco原理 代码插桩 On-the-fly插桩: JVM中通过-javaagent参数指定特定的jar文件启动Instrumentation的代理程序,代理程序在通过Class Loader装载 ...

  5. npm配置镜像及nrm使用

    ​ 淘宝npm镜像 搜索地址:http://npm.taobao.org/ registry地址:http://registry.npm.taobao.org/ cnpmjs镜像 搜索地址:http: ...

  6. stream流思想应用

    1.计算集合中某字段数值和 subTotal = subTotal+ complainCountResult.stream().filter(childSource->childSource.g ...

  7. Emit优化反射（属性的设置与获取）

    在频繁的通过反射来设置和获取属性的值时是比较耗时的,本章通过Emit技术优化反射来提高获取和设置属性值的效率 一.实现代码: /// <summary> /// 设置器委托 /// < ...

  8. type switch使用

    type    switchs用法 这里存在一个未知类型变量的内省操作(introspection operation),就是x.(type),其中x是interface{}类型

  9. HCNP Routing&Switching之IS-IS路由渗透和开销

    前文我们了解了IS-IS邻居建立过程.LSDB同步.拓扑计算和路由的形成:回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15265698.html:今天我们来聊 ...

  10. Django学习day05随堂笔记

    每日测验 """ 今日考题 1.反向解析的本质是什么,无名和有名反向解析如何操作? 2..路由分发能够实现的前提是什么,需要注意什么,名称空间什么时候使用 3..什么是虚 ...