Javascript手写下拉菜单-网站建设笔记

2013-01-10 16:48:12 qiukai 20

下拉html代码

html代码:

  <a id="ucenter" href="javascript:void(0);">会员中心</a>
  <div id="slide" style="display:none">
      <ul class="menu">
          <li>我收藏的店铺</li>
          <li>我收藏的美食</li>
          <li>我的积分</li>
          <li>安全退出</li>
      </ul>
  </div>

head代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
    $('#ucenter').click(function(){
        if($('#slide').is(":visible"))
        {
            $('#slide').slideUp('slow');
        }else{
            $('#slide').slideDown('slow');
        }
    })
})
</script>

 

css代码

/*menu js*/
#bbb{ width:100px; height: auto; overflow:hidden; position: absolute; top:30px; float:left}
#menu{width:100px; height:96px; float: right; text-align:right; background:url(../images/basic/botom.png);padding-top:20px}
#menu li a{ width:80px; height:28px; display:block; color:#333; line-height:28px; text-align:center; border-bottom:1px dashed #999; margin-left:10px; margin-right:10px}
#menu li a:hover{ width:80px; height:28px; display:block; color:#000; margin-left:10px; margin-right:10px; background:#CCC}