效果 在线查看

代码少，都在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. docker-harbor私有仓库使用笔记

    1. 登录harbor管理页面,创建项目,比如yuqx_test 2. admin登录,此处免密登录,正常情况下会输入账号密码 [root@k8s-rancher2 ~]# docker login ...

  2. JVM详解（一）——概述

    Test https://www.cnblogs.com/yrxing/p/14651346.html#gc的基础知识 https://www.cnblogs.com/yinzhengjie/p/92 ...

  3. Python - 面向对象编程 - 小实战（1）

    题目 设计一个类Person,生成若干实例,在终端输出如下信息 小明,10岁,男,上山去砍柴 小明,10岁,男,开车去东北 小明,10岁,男,最爱大保健 老李,90岁,男,上山去砍柴 老李,90岁,男 ...

  4. Pytest系列（22）- allure的特性，@allure.link()、@allure.issue()、@allure.testcase()的详细使用

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 上一篇文章介绍了两种allu ...

  5. 基于ECDHE的TLS握手流程

    <!doctype html>3.3 基于ECDHE的TLS握手流程 html { overflow-x: initial !important } :root { --bg-color: ...

  6. LVS＋keepalived集群

    一.Keepalived工具介绍专为LVS和HA设计的一款健康检查工具 支持故障自动切换(Failover) 支持节点健康状态检查(Health Checking) 官方网站:http://www.k ...

  7. 【第八篇】- Git 查看提交历史之Spring Cloud直播商城 b2b2c电子商务技术总结

    ​ Git 查看提交历史 Git 提交历史一般常用两个命令: git log 在使用 Git 提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,我们可以使用 git log 命令查看. 针对 ...

  8. 使用python实现xls批量转为xlsx

    利用win32库来实现 # -*- coding:utf-8 -*- import os import win32com.client as win32 #需要转换的数据目录 inputdir = u ...

  9. 【Sass/SCSS 完整自学中文版教程02】SCSS 官方英文文档翻译整理

    Sass 调试 目录 Sass 调试 @error @warn @debug 如果对本文有任何问题,建议,或者在前端技术体系方面有任何问题,可以添加我的微信: drylint , 我会尽可能为你解答, ...

  10. vue-cli3 项目中通过 CDN方式 使用 echarts

    1.html 中引入 echarts         html中添加script标签如下:         <script src="//cdn.bootcss.com/echarts ...