站内首页 > 网页前端 > HTML > 正文

CSS自适应导航菜单的实例代码

<style>
.nav {position: relative;margin: 20px 0;}
.nav ul {margin: 0;padding: 0;}
.nav ul li {margin: 0 5px 10px 0;padding: 0;list-style: none;float: left;}
.nav a {padding: 3px 12px;text-decoration: none;color: #999;line-height: 100%;}
.nav a:hover {color: #000;}
.nav .current a {background: #999;color: #fff;border-radius: 5px;}
.nav.right ul {text-align: right;}/* right nav */
.nav.center ul {text-align: center;}/* center nav */
@media (max-width: 660px) {
 .nav {position: relative;min-height: 30px;}
 .nav ul {width: 180px;padding: 5px 0;position: absolute;top: 0;left: 0;border: solid 1px #aaa;background: #fff url(images/icon-menu.png) no-repeat 10px 11px;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}
 .nav li {display: none;/* hide all<li>items */margin: 0;}
 .nav .current {display: block;}/* show only current<li>item */
 .nav a {display: block;padding: 5px 5px 5px 32px;text-align: left;}
 .nav .current a {background: none;color: #666;}
 .nav ul:hover {background-image: none;}/* on nav hover */
 .nav ul:hover li {display: block;margin: 0 0 5px;}
 .nav ul:hover .current {background: url(images/icon-check.png) no-repeat 10px 7px;}
 .nav.right ul {left: auto;right: 0;}/* right nav */
 .nav.center ul {left: 50%;margin-left: -90px;}/* center nav */
}
</style>
<nav class="nav">
 <ul><li class="current"><a href="#" data-ke-src="#">Portfolio</a></li><li><a href="#" data-ke-src="#">Illustration</a></li><li><a href="#" data-ke-src="#">Web Design</a></li><li><a href="#" data-ke-src="#">Print Media</a></li><li><a href="#" data-ke-src="#">Graphic Design</a></li></ul></nav>

提示:可以修改后运行.

<style>
.index-nav{width: 100%;border-bottom: 1px solid #eeeeee;height: 50px;box-sizing: border-box;background:white;}
.index-nav-frame{width: 1200px;margin: 0 auto;}
.index-nav-frame-line{color: #333333;background: white;float: left;position: relative;display: block;outline: none;cursor: pointer;width: 100px;line-height: 50px;text-align: center;font-weight: 700;}
.index-nav-frame-line.active{color:#b63b4d;}
.index-nav-frame-line-center{opacity: 0;height: 0;position: absolute;overflow: hidden;width: 100%;transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;/* Firefox 4 */-o-transition: all 0.5s; /* Opera */}
.index-nav-frame-line-li{width: 100%;font-weight: 500;text-align: center;background: white;color: #666666;}
.index-nav-frame-line-li:hover{background: #444359;color: white;}
.index-nav-frame-line-li:hover a{background: #444359;color: white;}
.index-nav-frame-line-focus:focus{display: none;}
.index-nav-frame-line:hover .index-nav-frame-line-center{height:auto;opacity: 1;}
.nav-line{height: 50px;width: 100%;position: relative;display: none;outline: none;}
.nav-small{width: 30px;height: 30px;position: absolute;right: 10px;top:10px;cursor: pointer;display: none;outline: none;}
.nav-small img{width: 100%;height: 100%;object-fit: cover;}
.nav-small-focus{position: absolute;width: 100%;height: 100%;display: none;}
.nav-small-focus:focus{display: none;}
@media only screen and (max-width:800px) {
	.index-nav-frame-line-li a{display: block;color: white;}
	.nav-line{display: block;border-bottom: 1px solid #eeeeee;}
	.nav-small{display: block;}
	.nav-small:focus~.index-nav-frame-line{height: auto;border-bottom: 1px solid #ccc;}
	.nav-small:focus .nav-small-focus{display: block;}
	.index-nav-frame{width: 100%;}
	.index-nav-frame-line{width: 100%;height: 0;overflow: hidden;}
	.index-nav-frame-line-center{position: relative;background: #444359;}
	.index-nav-frame-line:hover .index-nav-frame-line-center{height:0;opacity: 0;}
	.index-nav-frame-line-li{border-bottom: 1px solid #4b4a5e;color: #d9d9d9;background: #444359;}
	.index-nav-frame-line-li:hover{background: #b63b4d;}
	.index-nav-frame-line:focus{height: auto;border-bottom: 1px solid #ccc;}
	.index-nav-frame-line:focus>.index-nav-frame-line-center{height:auto;opacity: 1;}
	.index-nav-frame-line:focus .index-nav-frame-line-header{color: #B63B4D;}
	.index-nav-frame-line-focus{display: none;width: 100%;height: 50px;position: absolute;left: 0;top: 0;}
	.index-nav-frame-line:focus .index-nav-frame-line-focus{display: block;}
}
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	</head>
	<body style="background: #333333;">
		<div class="index-nav">
			<div class="index-nav-frame clearfix">
				<div class="nav-line">					
				</div>
				<div class="nav-small" tabindex="-1">
					<div class="nav-small-focus" tabindex="-1">						
					</div>
					<img src="img/icon.png"/>
				</div>
				<div class="index-nav-frame-line active" tabindex="-1">
					首页
					<div class="index-nav-frame-line-center">
						<div class="index-nav-frame-line-li">
							首页1
						</div>
						<div class="index-nav-frame-line-li">
							首页2
						</div>
						<div class="index-nav-frame-line-li">
							首页3
						</div>
						<div class="index-nav-frame-line-li">
							首页4
						</div>
						<div class="index-nav-frame-line-li">
							首页5
						</div>
					</div>
					<div class="index-nav-frame-line-focus" tabindex="-1"></div>
				</div>
				<div class="index-nav-frame-line" tabindex="-1">
					第二页面
					<div class="index-nav-frame-line-center">
						<div class="index-nav-frame-line-li">
							第二页面1
						</div>
						<div class="index-nav-frame-line-li">
							第二页面2
						</div>
						<div class="index-nav-frame-line-li">
							第二页面3
						</div>
						<div class="index-nav-frame-line-li">
							第二页面4
						</div>
						<div class="index-nav-frame-line-li">
							第二页面5
						</div>
					</div>
					<div class="index-nav-frame-line-focus" tabindex="-1"></div>
				</div>
				<div class="index-nav-frame-line" tabindex="-1">
					第三页面
					<div class="index-nav-frame-line-center">
						<div class="index-nav-frame-line-li">
							第三页面1
						</div>
						<div class="index-nav-frame-line-li">
							第三页面2
						</div>
						<div class="index-nav-frame-line-li">
							第三页面3
						</div>
						<div class="index-nav-frame-line-li">
							第三页面4
						</div>
						<div class="index-nav-frame-line-li">
							第三页面5
						</div>
					</div>
					<div class="index-nav-frame-line-focus" tabindex="-1"></div>
				</div>
				<div class="index-nav-frame-line" tabindex="-1">
					第四页面
					<div class="index-nav-frame-line-center">
						<div class="index-nav-frame-line-li">
							第四页面1
						</div>
						<div class="index-nav-frame-line-li">
							第四页面2
						</div>
						<div class="index-nav-frame-line-li">
							第四页面3
						</div>
						<div class="index-nav-frame-line-li">
							第四页面4
						</div>
						<div class="index-nav-frame-line-li">
							第四页面5
						</div>
					</div>
					<div class="index-nav-frame-line-focus" tabindex="-1"></div>
				</div>
			</div>
		</div>
		<div><h3 style="text-align: center;line-height: 50px;color: aliceblue;font-size: 18px">调整浏览器窗口大小查看效果</h3></div>
	</body>
</html>

提示:可以修改后运行.

<< js+css3电脑手机端自适应响应式导航菜单代码纯PC页面的网站改为自适应手机PC网站有多简单？（附操作实例） >>

查看所有评论

相关文章

在线留言

© 2021

i0561搜索.All rights reserved. v3.24