纯css流畅侧滑

最新推荐文章于 2023-01-29 15:38:16 发布

说学逗唱攻城狮

最新推荐文章于 2023-01-29 15:38:16 发布

阅读量176

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34720531/article/details/112904667

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

鼠标 hover 到侧边区域时，滑出广告
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="author" content="TKB-nice" />
        <style>
        .side-menu {
		    width:14em;
		    height: auto;
		    margin:4em auto 0;
		    font-size: 1em;
		    line-height: 2em;
		    color: #fff;
		    font-weight:700;
		    text-transform:uppercase;
		    position:absolute;
		    top:0; 
		    bottom:0;
		    left: -10em;
		}
		.side-menu ul {
		    list-style: none;
		    margin: 0;
		    padding: 0;
		}
		.side-menu ul li {
		  	display:block;
		    background-color: pink;
		    height: 2em;
		    padding: 1em 1.5em;
		    position: relative;
		    -webkit-transition: -webkit-transform 0.5s,     
		    background-color .5s, color .5s;
		    transition: transform .5s, background-color .5s, color .5s;
		}
		/*the colors of the different columns*/
		.side-menu ul li:nth-child(1) { background-color: red;}
		.side-menu ul li:hover {
		    background-color: pink; /*you can make different colors depending on the nth-child like above*/
		    -webkit-transform: translateX(10em);
		    transform: translateX(10em);/*equal to left in the .side-menu*/
		}
		.side-menu ul li a {
		  display:block;
		    color: #FFF;
		    text-decoration: none;
		}
		.side-menu ul li span {
		    display:block;
		    position: absolute;
		    font-size:1em;
		    line-height: 2em;
		    height:2em;
		    top:0; 
		    bottom:0;
		    margin:0 auto;
		    padding:1em 1.5em;
		    right: 0.16666666666667em;
		    color: #F8F6FF;
		}
    </style>
    </head>
	<body>
	       <nav class="side-menu">
			    <ul>
			      <li><a href="#">测试 1<span><i class="fa fa-map-marker"></i></span></a></li>
			      <li><a href="#">测试 2<span><i class="fa fa-compass"></i></span></a></li>
			      <li><a href="#">测试 3<span><i class="fa fa-bicycle"></i></span></a></li>
			      <li><a href="#">测试 4<span><i class="fa fa-bed"></i></span></a></li>
			    </ul>
		  	</nav>
	</body>
</html>

说学逗唱攻城狮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css流畅侧滑

鼠标 hover 到侧边区域时，滑出广告<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
复制链接

扫一扫