手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 素材 > 特效 > 特效技巧 >CSS实现折叠的菜单_菜单导航特效

CSS实现折叠的菜单_菜单导航特效

时间:2018-01-20    点击: 次    发布者:佚名 - 小 + 大

CSS实现折叠的菜单

代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>CSS实现折叠的菜单</title>
<style type="text/css">
#menu { overflow:hidden; background-color:#fbfef4; width:200px; height:500px; overflow:hidden;}
#menu h1{margin:0px;color:#739c23; font-size:14px;}
#menu li { list-style:none; display:block; width:178px; border:1px solid #739c23; border-bottom-width:0px;}
#menu li .end{border-bottom-width:1px;}
#menu li a{ display:block; text-decoration:none; width:100%; padding:10px;}
#menu li a span{ display:none; color:#333; font-size:12px; padding:10px 0 0 0;}
#menu li a:hover{ background:#fff;}
#menu li a:hover span{ display:block; cursor: hand;} 
</style>
</head>
<body>
<ul id="menu">
   <li><a href="#">
    <h1>模板无忧</h1>
<span>模板无忧为您提供精品源代码、网页特效代码等。</span></a></li>
   </li>
   <li><a href="#">
    <h1>精品特效</h1>
<span>精品特应有尽有</span></a></li>
   </li>
   <li><a href="#">
    <h1>我是传奇</h1>
<span>这里是内容</span></a></li>
   </li>
   <li><a href="#">
    <h1>这是折叠标签</h1>
<span>这里是内容</span></a></li>
   </li>
</body>
</html>


上一篇:横向6级展开菜单_菜单导航特效

下一篇:DIV+CSS仿京东商城导航条特效



Copyright © 2019 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品