专栏首页Golang语言社区纯CSS实现的圆角折叠菜单特效代码

纯CSS实现的圆角折叠菜单特效代码

<title>CSS圆角折叠菜单</title>
<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 #DDD; 
   border-right:1px solid #DDD;
}
#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 #DDD; 
   border-right:1px solid #DDD;
   }
.curved .b1 {
   margin:0 4px; 
   background:#DDD;
   }
.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="/">
       <b class="h2">ASP CODE</b>
      <span>阿里西西</span>
      </a>
     </li>
     <li>
      <a href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>
       <b class="h2">PHP CODE</b>
       <span>网页特效</span>
      </a>
     </li>
     <li>
      <a href="#nogo">
       <b class="b1"></b>
       <b class="b2"></b>
<b class="h2">JSP CODE</b>
<span>js.alixixi.com</span> 
     </a>
     </li>
 </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>

本文分享自微信公众号 - Golang语言社区(Golangweb)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 横向双倍外边距BUG — IE6盒模型

    HTML5学堂:2015年,IE6已经黯然退市。不过,IE6的兼容问题,个人认为还是应当有所了解的。一方面,前端这个工作,并不能够仅仅了解现在,应当有一个较好的...

    HTML5学堂
  • CSS 1.0~3.0选择器(下)

    HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

    HTML5学堂
  • 移动端H5知识[系列] - fixed定位模式与其他

    TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

    HTML5学堂
  • CSS 1.0~3.0选择器(上)

    HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将C...

    HTML5学堂
  • CSS 1.0~3.0选择器(中)

    HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介...

    HTML5学堂
  • CSS3-3D相关知识详解—视角以及变形方向

    CSS3-3D相关知识详解—视角以及变形方向 HTML5学堂:视角以及变形方向。HTML5中非常不错的一个变革,便是将特效从二维平面上的变化,推进到了三维立体当...

    HTML5学堂
  • CSS选择器优先级

    HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看...

    HTML5学堂
  • 【专业领域】你所不知道的html5与html中的那些事(五)——web图像

    文章简介: 现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢? 下面看看...

    程序员互动联盟
  • 【专业技术】CSS知识点总结

    1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

    程序员互动联盟
  • cssText的基本使用

    HTML5学堂:利用JavaScript给标签设置动态的样式,用到了大家比较熟悉的style来给标签设置样式,今天要给大家介绍另外一个cssText,它不仅用起...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券