用JQuery写菜单导航

4 篇文章 0 订阅
2 篇文章 0 订阅

效果
在这里插入图片描述

用scc写出页面的样式
<style>
.nav{
    width:900px;
    height:36px;
    position:relative;
  background-color: blue;
    text-align:center;
    line-height:36px;
    font-size:12px;
  color: black;
  margin: auto;
  margin-top: 100px;
}
.nav li:hover{
    background: #EEEEEE;
    color: #000000;
  }
li{
    list-style: none;
    float:left;
}
.main>li{
    width:150px;
    color:#eee;
    font-size:14px;
}
.main span{
    display:inline-block;
    width:7px;
    height:7px;
    background:url(../images/down-icon.png) no-repeat;
    margin-left:18px;
}
.box_info{
    width: 110px;
    border: 1px solid #643519;
    display:none;
    position:absolute;
    color:#643519;
    padding:0;
    margin-left:20px;
}
.box_info li{
    color: #643519;
    cursor: pointer;
    font-size:13px;
    width:100%;
}
.service{
 color: #0000FF;
}
</style>

使用ul,li写出表格

<div class="nav">
  <ul class="main">
      <li class="service">HOME</li>
      <li id="li-1" class="service">CSS
          <span></span>
          <ul id="box_1" class="box_info">
              <li>CSS入门</li>
              <li>CSS工具</li>
              <li>CSS技巧</li>
          </ul>
      </li>
      <li id="li-2">网页特效
          <span></span>
          <ul id="box_2" class="box_info">
              <li>导航菜单</li>
              <li>表单按钮</li>
              <li>表格图层</li>
          </ul>
      </li>
   <li id="li-3">Javascript
     <span></span>
     <ul id="box_3" class="box_info">
       <li>Jquery</li>
       <li>js学习</li>
       <li>js教程</li>
     </ul>
   </li>
      <li>关于我们
      </li>
  </ul>
</div>

使用JQuery写出特效

<script>
$(function(){
    var num;
    $('.main>li[id]').hover(function(){
        /*图标向上旋转*/
        $(this).find("span").removeClass().addClass('hover-up');
        /*下拉框出现*/
        var Obj = $(this).attr('id');
        num = parseInt(Obj.substring(3, Obj.length));
        $('#box_'+num).slideDown(300);
    },function(){
        /*图标向下旋转*/
        $(this).find("span").removeClass().addClass('hover-down');
        /*下拉框消失*/
        $('#box_'+num).hide();
    });
});
</script>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值