效果 在线查看

代码少，都在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. CSS3 animaion 和 transition 比较

    animation是CSS3的动画属性,可以设置以下六种属性. transition是CSS3的过度属性,可以设置以下四种属性. 从属性上分析,animation可以设定循环次数. 其次,两者的触发条 ...

  2. JavaScript高级程序设计（读书笔记）之函数表达式

    定义函数的方式有两种:一种是函数声明,另一种就是函数表达式. 函数声明的一个重要特征就是函数声明提升(function declaration hoisting),意思是在执行代码前会先读取函数声明. ...

  3. JVM双亲委派模型及其优点

    JVM双亲委派模型及其优点 什么是双亲委派模型? 双亲委派模型: ​ 如果一个类加载器收到了类加载请求,它并不会自己先去加载,而是把这个请求委托给父类的加载器去执行,如果父类加载器还存在其父类加载器, ...

  4. AWS扩容EC2实例根空间

    文章原文 aws 端操作 先在EC2 实例中选中磁盘 然后打开跟设备 修改大小后保存 ec2 端操作 lsblk 查看当前设备的磁盘编号 df -T -H 查看扩容前的空间大小并确定磁盘格式 grow ...

  5. 洛谷P1925 最大划分乘积的数学解法

    题目 最大划分乘积 题解 这道题用到一点导数和数论的知识,很容易看出这道题是求函数 \[f(x)=(\frac{n}{x})^{x} \] ( \(x\) 为正整数)的最大值.我们可以对 \(ln(f ...

  6. Nacos注册中心之概要设计

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 前言 在之前的文章中分析了Nacos配置中心,配置中心的核心是配置的创建.读取.推送. 注册中 ...

  7. 使用dubbo-go搭建dubbo接口测试平台

    背景 http接口测试只需要一个curl命令,但dubbo协议没有这样的现成接口测试工具.通常公司内的dubbo控制台或其他平台会集成一个dubbo接口测试工具. 调用一个dubbo接口,需要知道服务 ...

  8. 【Azure API 管理】APIM 配置Validate-JWT策略，验证RS256非对称(公钥/私钥)加密的Token

    问题描述 在APIM中配置对传入的Token进行预验证,确保传入后端被保护的API的Authorization信息正确有效,可以使用validate-jwt策略.validate-jwt 策略强制要求 ...

  9. scrum项目冲刺_day03总结

    摘要:今日完成任务. 1.图像识别已完成,但是较为卡顿,仍需优化 2.语音输入正在进行 3.搜索功能正在进行 总任务: 一.appUI页面(已完成) 二.首页功能: 1.图像识别功能(基本完成) 2. ...

  10. chrome浏览器中安装以及使用Elasticsearch head 插件

    一.安装Elasticsearch head 插件 下载安装包:https://github.com/liufengji/es-head/commit/121cdcb6d1b18656461e4889 ...