首页 > 网站 > WEB开发 > 正文

符合标准的可折叠的超酷网页导航菜单特效

2024-04-27 13:57:45
字体：大 中 小
来源：转载
供稿：网友
<style type="text/CSS">
<!--
#menu {
   font-size:12px;
   height:380px;
   margin:0;
   padding:0;
   width:180px;
   overflow:hidden;
   background:#f0f0f0;
   list-style:none;
   border-left:1px solid #cccccc;
   border-right:1px solid #cccccc;
}
#menu li a {
   display:block;
   text-decoration:none;
   color:#00b;
   margin:0;
   width:100%;
   }
#menu li a span {
   display:none;
   color:#000;
   height:120px
   }
#menu li a.one span {
   display:block;
   margin:0 10px;
}
#menu li a:hover {
   background:#f1f1f1;
   }
#menu li a:hover span {
   display:block;
   margin:0 10px;
   cursor:pointer;
}
#menu .h2 {
   margin:0 5px;
   padding:0;
   color:#808;
   font-variant:small-caps;
   border:0;
   }
#menu .h3 {
   margin:0 5px;
   padding:0;
   color:#00b;
   }
.curved {
   width:180px;
   margin:0 auto;
   }
.curved .b1, .curved .b2, .curved .b3, .curved .b4   {
   font-size:1px;
   display:block;
   background:#88c;
   overflow: hidden;
   }
.curved .b1, .curved .b2, .curved .b3 {
   height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
   background:#f0f0f0;
   border-left:1px solid #cccccc;
   border-right:1px solid #cccccc;
   }
.curved .b1 {
   margin:0 4px;
   background:#cccccc;
   }
.curved .b2 {
   margin:0 2px;
   border-width:0 2px;
   }
.curved .b3 {
   margin:0 1px;
   }
.curved .b4 {
   height:2px;
   margin:0px;
   }
-->
</style>
<div class="curved">
<b class="b1 c1">
</b>
<b class="b2 c2">
</b>
<b class="b3 c3">
</b>
<b class="b4 c4" ></b>
   <ul id="menu">
     <li>
      <a   href="#nogo">
       <b class="h2">网页教学网 ONE</b><br />
       <b class="h3">http://www.vevb.com/</b>
      <span>
       WEB标准 是 结构（Structure） 、表现（PResentation） 和 行为（Behavior） 叁方面构成的标准集合
       </span>
      </a>
     </li>
     <li>
      <a href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>
       <b class="b3"></b>
       <b class="b4"></b>
       <b class="h2">网页教学网 TWO</b><br />
       <b class="h3">http://www.vevb.com/</b>
       <span>
       WEB标准 是 结构（Structure） 、表现（Presentation） 和 行为（Behavior） 叁方面构成的标准集合
       </span>
      </a>
     </li>
     <li>
      <a href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>       <b class="b3"></b>       <b class="b4"></b>       <b class="h2">网页教学网 THREE</b><br />       <b class="h3">http://www.vevb.com/</b>       <span>     WEB标准 是 结构（Structure） 、表现（Presentation） 和 行为（Behavior） 叁方面构成的标准集合       </span>
     </a>
     </li>
     <li>
      <a href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
       <b class="h2">网页教学网 FOUR</b><br />
       <b class="h3">http://www.vevb.com/</b>
      <span>       WEB标准 是 结构（Structure） 、表现（Presentation） 和 行为（Behavior） 叁方面构成的标准集合
       </span>
      </a>
     </li>
    <li>
      <a class="one" href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>
      <b class="b3"></b>
       <b class="b4"></b>
       <b class="h2">网页教学网 FIVE</b><br />
       <b class="h3">http://www.vevb.com/</b>
       <span>
       WEB标准 是 结构（Structure） 、表现（Presentation） 和 行为（Behavior） 叁方面构成的标准集合
      </span>
      </a>
    </li>
 </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>

上一篇：一段天气预报的代码

下一篇：功能全面的在线查询系统代码特效

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有