网页设计师联盟

--- 学习、交流、展示、资源

招聘精英个人求职网站发布网友作品网页特效动画欣赏网页素材免费资源源码下载设计软件
作品欣赏       域名申请       虚拟主机
网页设计师

  • 新闻资讯
  • 网页教程
  • 平面教程
  • 程序设计
  • 视频教程
  • Flash教程

网页设计师站提供网页设计程序设计服务 E-mail:liangfeng0526@qq.com

 您当前的位置:首页 > 阅读文章
网页设计师联盟(www.wysjs.cn)欢迎您!
 标题:

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

<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.wysjs.cn/</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.wysjs.cn/</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.wysjs.cn/</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.wysjs.cn/</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.wysjs.cn/</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>
  • (刊登方式:转载   来源:网络   作者:   添加:admin   关键词:)
  • 您已阅读:符合标准的可折叠的超酷网页导航菜单特效 您还可以继续阅读↓  或 回到首页看看>>>
  • 上一篇按钮控制窗口移动 (功能比较丰富)

    <!--把下列代码加到<body>区域中--> <INPUTTYPE="TEXT"size="18"value="这是默认的内容"onfocus="if(value=='这是默认的内容'){value=''}"onblur="if(value==''){value='这是默认的内容'}">

  • 下一篇非常简单的一个测试HTML代码的一个特效

    <html><head><title>www.wysjs.cn</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><style>input{border:1pxsolid#999999;background-color:white;height:18px}</style><script>functionrunEx(){varwinEx2=window..