master

分支 (2)

管理

管理

master

beta

js-common-summary
/
3-手机导航.html

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用组件</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<!-- 方法一，这个是系统的方法 -->
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">导航条</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" style="padding: 10px 15px;" href="">
						<img alt="百度" style="width:80px;height: 26px;"
							src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
					</a>
					<ul class="nav navbar-nav collapse navbar-collapse" id="nav-list">
						<li class="active"><a target="_blank" href="https://www.baidu.com/">百度</a></li>
						<li><a target="_blank" href="">淘拜网</a></li>
						<li><a target="_blank" href="">淘拜商城</a></li>
						<li><a target="_blank" href="">百度</a></li>
						<li><a target="_blank" href="">横市</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<div style="margin-top: 100px;"></div>


		<div style="width: 100%;margin: 0 auto;display: flex;background-color: azure;height: 60px;position: relative;padding: 0 20px;">
			<div id="logo">
				<img alt="百度" style="width:80px;height: 26px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
			</div>
			<div id="nav" class="hidden-xs hidden-sm">
				<li><a href="">首页</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">新闻列表</a>
					<ul class="item">
						<li><a href="">民生新闻</a></li>
						<li><a href="">国内新闻</a></li>
						<li><a href="">国际新闻</a></li>
					</ul>
				</li>
				<li><a href="">产品列表</a>
					<ul class="item">
						<li><a href="">主打系列</a></li>
						<li><a href="">精品系列</a></li>
						<li><a href="">全部商品</a></li>
					</ul>
				</li>
				<li><a href="">解决方案</a></li>
				<li><a href="">团队介绍</a></li>
				<li><a href="">往期精彩</a></li>
				<li><a href="">联系我们</a></li>
			</div>
			<button type="button" id="shouji_button" class="navbar-toggle" style="background-color: #e3e3e3;margin-left:auto;text-align:right;">
				<span class="icon-bar" style="background-color: #ffffff;"></span>
				<span class="icon-bar" style="background-color: #ffffff;"></span>
				<span class="icon-bar" style="background-color: #ffffff;"></span>
				<span class="icon-bar" style="background-color: #ffffff;"></span>
			</button>

			<div id="shouji_nav">
				<li><a href="">首页</a></li>
				<li><a href="">关于我们</a></li>
				<li><a href="">新闻列表</a>
					<ul class="item">
						<li><a href="">民生新闻</a></li>
						<li><a href="">国内新闻</a></li>
						<li><a href="">国际新闻</a></li>
					</ul>
				</li>
				<li><a href="">产品列表</a>
					<ul class="item">
						<li><a href="">主打系列</a></li>
						<li><a href="">精品系列</a></li>
						<li><a href="">全部商品</a></li>
					</ul>
				</li>
				<li><a href="">解决方案</a></li>
				<li><a href="">团队介绍</a></li>
				<li><a href="">往期精彩</a></li>
				<li><a href="">联系我们</a></li>
			</div>

		</div>

		<style>
			a {
				text-decoration: none !important;
			}
			li{
				list-style: none;
			}
			#logo {
				display: flex;
				align-items: center;
			}

			#nav {
				display: flex;
				margin-left: 20px;
			}

			#nav>li {
				font-size: 18px;
				line-height: 60px;
				padding: 0 20px;
				position: relative;
			}

			#nav li .item {
				position: absolute;
				top: 60px;
				left: 0;
				padding: 0;
				display: none;
			}
			#nav li:hover .item {
				display: block;
			}
			#nav li .item>li {
				font-size: 18px;
				line-height: 60px;
				padding: 0 18px;
				background-color: #fffcca;
			}
			#nav .navbar .icon-bar{
				width: 80px;
			}
			#shouji_nav{
				position: absolute;
				top: 60px;
				left: -200px;
				background-color: #fffcca;
				font-size: 16px;
				padding: 10px 20px;
				line-height: 1.8;
			}
			#shouji_nav ul{
				padding-left: 10px;
				margin-bottom: 0px;
			}
		</style>


		<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/lizhili.js"></script>
		<script>
			$('#shouji_button').click(function(){
				if($('#shouji_nav').css('left')=='0px'){
					$('#shouji_nav').animate({'left':-200})
				}else{
					$('#shouji_nav').animate({'left':0})
				}

			})
		</script>


	</body>
</html>