css3之天猫侧边栏 （飞动效果）
来源：互联网 发布：克莱斯勒网络培训学院 编辑：程序博客网 时间：2024/06/10 04:48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
body{ width: 100%; height: 1000px; background:skyblue;}
.nav{ width:35px; height: 400px;background:#000;margin: 0 auto; margin-top: 100px;}
.nav ul{ width:35px; height: 400px;}
.nav ul li{cursor: pointer; list-style:none;margin-bottom: 1px; float: left;position: relative;}
.nav ul li a{display: block;text-decoration: none;width:35px;height: 35px;
background-image: url(img/pic.png);background-repeat: no-repeat;}
.nav ul li:hover a{background:#FF0036;background-image: url(img/pic.png);}
.nav ul.subnav{position: absolute;height:35px;width: 100px; padding: 0;margin: 0;
background:#494949;opacity: 0;visibility: hidden;transition: all 250ms ease-in-out 100ms;
-o-transition: all 250ms ease-in-out 100ms;-ms-transition: all 250ms ease-in-out 100ms;
-moz-transition: all 250ms ease-in-out 100ms;-webkit-transition: all 250ms ease-in-out 100ms;
z-index: 1000; left:80px; top: 0px;}
.nav ul.subnav p{padding: 8px 20px;color: white;}
.nav ul li:hover .subnav{
display: block;
opacity: 1;
visibility: visible;
left:40px;
}
.ewm_arrow{ position: absolute;
top: 10px;
left: -14px;
border-style: solid;
border-width: 7px;
border-color: transparent #494949 transparent transparent !important;
z-index: 2;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
</ul>
</div>
</body>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<style>
*{margin: 0;padding: 0;font-size: 14px;}
body{ width: 100%; height: 1000px; background:skyblue;}
.nav{ width:35px; height: 400px;background:#000;margin: 0 auto; margin-top: 100px;}
.nav ul{ width:35px; height: 400px;}
.nav ul li{cursor: pointer; list-style:none;margin-bottom: 1px; float: left;position: relative;}
.nav ul li a{display: block;text-decoration: none;width:35px;height: 35px;
background-image: url(img/pic.png);background-repeat: no-repeat;}
.nav ul li:hover a{background:#FF0036;background-image: url(img/pic.png);}
.nav ul.subnav{position: absolute;height:35px;width: 100px; padding: 0;margin: 0;
background:#494949;opacity: 0;visibility: hidden;transition: all 250ms ease-in-out 100ms;
-o-transition: all 250ms ease-in-out 100ms;-ms-transition: all 250ms ease-in-out 100ms;
-moz-transition: all 250ms ease-in-out 100ms;-webkit-transition: all 250ms ease-in-out 100ms;
z-index: 1000; left:80px; top: 0px;}
.nav ul.subnav p{padding: 8px 20px;color: white;}
.nav ul li:hover .subnav{
display: block;
opacity: 1;
visibility: visible;
left:40px;
}
.ewm_arrow{ position: absolute;
top: 10px;
left: -14px;
border-style: solid;
border-width: 7px;
border-color: transparent #494949 transparent transparent !important;
z-index: 2;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
<li>
<a></a>
<ul class="subnav">
<div class="ewm_arrow"></div>
<p>我的资产</p>
</ul>
</li>
</ul>
</div>
</body>
</html>
阅读全文
0 0
- css3之天猫侧边栏 （飞动效果）
- css3仿天猫侧边栏
- html5+css3项目 （企业网站之侧边栏的编写）
- jquery侧边栏效果
- ios侧边栏效果
- 笔记-侧边栏效果
- 抽屉效果侧边栏
- 侧边栏滑动效果
- 利用css3实现侧边栏
- 非常漂亮的纯css3实现多彩侧边导航（非常流畅），附效果演示
- js实现侧边栏效果
- 想做个会飞动的椭圆 但是不见效果
- QQ侧边栏效果（UIViewController添加子视图控制器）
- iOS 之 侧边栏
- 侧边栏的实现----网易新闻的侧边栏效果
- css3之动画效果
- Android 双向左右滑动侧边栏效果
- Android实现仿qq侧边栏效果
- 欢迎使用CSDN-markdown编辑器
- lnmp 之php安装
- 方法执行时内存的变化
- leetcode11. Container With Most Water
- JSONObject与JSONArray的使用
- css3之天猫侧边栏 （飞动效果）
- 迁移学习-PixelDA-Unsupervised Pixel–Level Domain Adaptation with Generative Adversarial Networks
- ViewController自定义转场－基础
- bzoj3011: [Usaco2012 Dec]Running Away From the Barn 可并堆(左偏树)
- 使用rinetd作为阿里云redis访问代理
- 机器学习十大算法之随机森林算法
- Eigen教程1
- http协议学习-请求头Request Headers
- schedule 详解
