首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

二级菜单成效(3)

2012-10-31 
二级菜单效果(3)最近写了个二级菜单,代码非常简单干净,不过也是建立在jquery基础上?效果图:??script type

二级菜单效果(3)

最近写了个二级菜单,代码非常简单干净,不过也是建立在jquery基础上

?

效果图:

二级菜单成效(3)

?

?

<script type="text/javascript">      $(function(){        $(".col").hover(function(){          $(".col").removeClass("hover");          $(this).addClass("hover");          $(".col ul").hide();          $(this).children("ul").show();        },function(){ $(".col ul").hide(); })      })</script>

?

<style type="text/css">      *{margin:0;padding:0;}      body{padding:100px;}      .colbox{width:554px;height:40px;}      .colbox .col{width:136px;line-height:38px;background-color:#c3c3c3;border:2px solid #000;float:left;text-align:center;margin-right:-2px;}      .colbox .col p{cursor:pointer;font-size:16px;font-weight:bold;}      .colbox .col ul{display:none;}      .colbox .col li{list-style:none;border-top:1px solid #000;cursor:pointer;}      .colbox .col li a{font-size:14px;text-decoration:none;display:block;height:38px;}      .colbox .col li a:hover{background-color:#c3c3c3;}      .colbox .hover{background:#eee;} </style>
?
<div class="colbox">        <div class="col">          <p>ice-cream1</p>          <ul>            <li><a href="">blog1</a></li>            <li><a href="">blog2</a></li>            <li><a href="">blog3</a></li>          </ul>        </div><div class="col">          <p>ice-cream2</p>          <ul>            <li><a href="">blog112</a></li>            <li><a href="">blog2</a></li>            <li><a href="">blog3</a></li>          </ul>        </div><div class="col">          <p>ice-cream3</p>          <ul>            <li><a href="">blog1564</a></li>            <li><a href="">blog2</a></li>            <li><a href="">blog3</a></li>          </ul>        </div><div class="col">          <p>ice-cream4</p>          <ul>            <li><a href="">blog17875</a></li>            <li><a href="">blog2</a></li>            <li><a href="">blog3</a></li>          </ul>        </div></div>
?

demo code download

?

类似效果:


二级菜单效果(1)


二级菜单效果(2)

热点排行