Bootstrap移动端导航（简易）

效果在线查看

代码少，都在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移动端导航（简易）相关推荐

移动端导航页面html,swiper4实现移动端导航切换
本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下首先导入 (这里用的是Swiper 4.0.7版本) 在写入html内容商品分类手机厨具数码家纺生 ...
Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
bootstrap下拉框分页_学习使用Bootstrap输入框、导航、分页等常用组件
Bootstrap输入框和导航组件一.下拉菜单下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来. 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置datat ...
使用ros2d.js实现web端导航
使用ros2d.js实现web端导航前端资源下载: ros2d地图显示导航校准-机器学习文档类资源-CSDN下载
Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
Bootstrap 面包屑导航（Breadcrumb）
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...
bootstrap悬浮多级导航菜单
bootstrap悬浮多级导航菜单效果图: 源码: <!DOCTYPE html> <html lang="zh-cn"><head>< ...
swiper4移动端导航栏tab滑动切换
swiper4移动端导航栏tab滑动切换效果效果如图: 首先引入swiper的css和js文件官网下载地址 <link href="swiper.min.css" rel ...
html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换
swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下效果如图: 首先引入swiper的css和js文件官网下载地址 html结构部分 slider1 slider2 slider ...

Bootstrap移动端导航（简易）

效果在线查看

代码少，都在HTML里

Bootstrap移动端导航（简易）相关推荐

最新文章

热门文章

Bootstrap移动端导航（简易）

效果 在线查看

代码少，都在HTML里

Bootstrap移动端导航（简易）相关推荐

最新文章

热门文章

效果在线查看