效果 在线查看

代码少，都在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. （一）羽夏看C语言——简述

    "羽夏看C语言"介绍什么   本系列从汇编的角度,比较翔实的介绍C语言.C++和C其实是一样的东西,C++的编译器只是更强大,更能帮助我们写代码,例如模板.没有特殊说明,本系列不会 ...

  2. noip模拟测试50

    考试过程:开题顺序1,2,3,做T1的时候我想到了要求的东西,就是分成尽量少的段使得每段之和>=k,但是我不会求,就打了个暴力走了,然后看T2,这题我觉得和之前做过的一道题比较像,因为我觉得\( ...

  3. Python - typing 模块 —— Union

    前言 typing 是在 python 3.5 才有的模块 前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p/15145380.html 常用类型提示 ...

  4. Python习题集（十）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 使用列表生成式语法 ...

  5. Linux - centos7.X 安裝 Python 3.7

    说明 全部操作都在 root 用户下执行 安装编译相关工具 yum -y groupinstall "Development tools" yum -y install zlib- ...

  6. LeetCode刷题模板(1):《我要打10个》之二分法

    Author       :  叨陪鲤 Email         : vip_13031075266@163.com Date          : 2021.01.23 Copyright : 未 ...

  7. 多Host情况下IDEA无法启动Tomcat的问题

    学习Java Web,学到将WAR包部署到Tomcat中时,遇到一个问题. 部署WAR包的过程本身没什么问题,把.war文件放在<Tomcat安装目录>/webapps/中,然后修改< ...

  8. POJ1861 Network (Kruskal算法 +并查集)

    Network Description Andrew is working as system administrator and is planning to establish a new net ...

  9. HCNP Routing&Switching之路由策略工具Route-Policy

    前文我们了解了路由过滤和路由过滤工具Filter-Policy使用相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15316188.html:今天我们来 ...

  10. 学习了解PHP中的SeasLog日志扩展

    今天来学习的扩展是和日志相关的一个扩展,对于 PHP 的日志应用来说,除了本身自带的 error_log() . syslog() 之外,在大多数的框架中还会经常见到 monolog 的踪影.当然,我 ...