效果 在线查看

代码少，都在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. Geode member发现机制

    Geode member发现机制 Apache Geode 为集群和客户端服务器间提供了多种member 发现机制,具体如下: Peer Member Discovery Standalone Mem ...

  2. Centos7最小化系统安装_配置

    本文总结了作者使用centos最小化安装时,碰到的问题和解决方案. 网络问题.作者使用虚拟机安装时,网卡并没有激活.操作: 1 cd /etc/sysconfig/network-script 2 v ...

  3. C++11多线程编程

    1. 多线程编程 在进行桌面应用程序开发的时候, 假设应用程序在某些情况下需要处理比较复杂的逻辑, 如果只有一个线程去处理,就会导致窗口卡顿,无法处理用户的相关操作.这种情况下就需要使用多线程,其中一 ...

  4. [考试总结]noip模拟40

    最近真的是爆炸啊... 到现在还是有不少没改出来.... 所以先写一下 \(T1\) 的题解.... 送花 我们移动右端点,之后我们用线段树维护全局最大值. 之后还要记录上次的位置和上上次的位置. 之 ...

  5. Spring Boot入门系列（二十六）超级简单！Spring Data JPA 的使用！

    之前介绍了Mybatis数据库ORM框架,也介绍了使用Spring Boot 的jdbcTemplate 操作数据库.其实Spring Boot 还有一个非常实用的数据操作框架:Spring Data ...

  6. 链表 Linked List

    目录 链表介绍 单链表 单链表的应用实例 添加-直接添加到末尾 添加-顺序添加 更新 删除 单链表的面试题 双链表 链表介绍 链表时有序的列表,但是它在内存中是存储如下 小结 链表是以节点的方式来存储 ...

  7. C语言学习笔记---3.字符串格式化输入输出

    1.C语言字符串 字符串(character string)是一个或多个字符的序列,例如:"Zing went the strings of my heart!" C语言没有专门用 ...

  8. Xamarin UIProgressView自定义

    Progress.ProgressImage = UIImage.FromFile ("progress.png"); Progress.TrackImage = UIImage. ...

  9. Maven专题2——聚合与继承

    聚合 聚合模块的<packaging>元素为pom 聚合模块通过<modules>元素标识自己的子模块,每个子模块对应了一个module元素 module元素中指定的是子模块所 ...

  10. File Inclusion（文件包含）

    File Inclusion,意思是文件包含(漏洞),是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(include(),require()和include_ ...