鼠标滚动放大缩小导航栏代码

最新推荐文章于 2023-03-08 11:52:46 发布

邓波home

最新推荐文章于 2023-03-08 11:52:46 发布

阅读量1k

点赞数

分类专栏： web前端

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/52636475

版权

web前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>鼠标滚动放大缩小导航栏代码</title>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0;}
.menu .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436;}
.menu .inner { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}
.menu h1 { float: left;}
.menu h1 img { display: block; border: 0;}
.menu .nav { float: right; list-style-type: none; font-family: "Microsoft Yahei";}
.menu .nav li { float: left; margin-left: 5px;}
.menu .nav a { float: left; color: #cecece; text-decoration: none;}
.menu .nav a:hover { background-color: #555;}

.menu .large .inner { padding: 20px 0;}
.menu .large h1 img { height: 64px;}
.menu .large .nav { padding-top: 10px;}
.menu .large .nav a { height: 44px; padding: 0 20px; line-height: 44px; font-size: 18px;}

.menu .small .inner { padding: 10px 0;}
.menu .small h1 img { height: 34px;}
.menu .small .nav { padding-top: 3px;}
.menu .small .nav a { height: 28px; padding: 0 10px; line-height: 28px; font-size: 14px;}

.menu .header, .menu .inner, .menu a, .menu img, .menu li { transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;}

.section { height: 1000px;}
</style>
</head>

<body class="menu">
<div class="header large">
	<div class="inner">
		<!-- <h1><a href="#"><img src="images/logo.png" alt="logo"></a></h1> -->
		<ul class="nav">
			<li><a class="cur" href="#" title="首页">首页</a></li>
			<li><a href="#" title="详情">详情</a></li>
			<li><a href="#" title="可以得">可以得</a></li>
			<li><a href="#" title="阿西吧">阿西吧</a></li>
		</ul>
	</div>
</div>
<div class="section">
	<p style="margin-top: 300px; text-align: center; color: #f50;">鼠标向下滚动查看菜单变化</p>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
	$(window).on('scroll', function(){
		if($(window).scrollTop() > 100){
			$('.header').removeClass('large').addClass('small');
		} else {
			$('.header').removeClass('small').addClass('large');
		}
	});
});
</script>
</body>
</html>

效果地址：http://codepen.io/dddddd1/pen/BLprbq

邓波home

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚动放大缩小导航栏代码

鼠标滚动放大缩小导航栏代码* { margin: 0; padding: 0;}.menu .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436;}.menu .inner { width: 1000px; margin: 0 auto; overflow: hidden; z
复制链接

扫一扫