具有伸缩效果的菜单栏

weixin_43761290

于 2019-01-15 18:00:35 发布

阅读量560

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43761290/article/details/86496895

版权

本文介绍如何创建一个具有视觉反馈的导航菜单栏，菜单项在被选中或鼠标悬停时会提升10px，提供更丰富的交互体验。

摘要由CSDN通过智能技术生成

制作一个超级简单的伸缩导航栏

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{
	list-style:none;
	height:30px;
	padding-left:30px;
	border-bottom:10px solid #f60;
	margin:50px auto;
}
.nav li{
	float:left;
}
.nav li a{
	display:block;
	text-align:center;
	line-height:30px;
	width:120px;
	margin-left:1px;
	background-color:#ccc;
}
.nav li a.on,.nav li a:hover{
	color:#fff;
	background-color:#f60;
	height:40px;
	line-height:40px;
	margin-top:-10px;
	/*margin-top设置为负值主要是为了不让他的高度向下延申，而是向上边延申。*/
}
</style>

</head>
<body>

<ul class="nav">
    <li><a class="on" href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>

最低0.47元/天解锁文章

weixin_43761290

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
具有伸缩效果的菜单栏

制作一个超级简单的伸缩导航栏&lt;!DOCTYPE html &gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;导航菜单&lt;/title&gt;&lt;style type="text/css&quo
复制链接

扫一扫