当锚类标记激活时,花哨的菜单代码不起作用

时间:2014-12-05 08:51:23

标签: javascript jquery css menu

我有一个菜单代码。当我们将鼠标移开时,矩形背景会动画到鼠标光标并在鼠标移出时移回活动链接。当li标签类处于活动状态时,它工作正常。但我需要锚标记让课程活跃。

现场演示:http://insicdesigns.com/demo/css3/exp1/index.html

请参阅以下代码:

<div id="cmwmenu1" class="ddsmoothmenu ddcmwmenu" >
  <ul>
    <li class="active"><a href="">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Back to Article</a></li>
    <li><a href="#">How it Works?</a></li>
  </ul>
  <div class="floatr"></div>
</div>

现场演示工作正常,但请查看他们的代码。他们有类活动列表标签。我的要求是在锚点中使用有效标记,而不是li。如果我确实改变了,那么这个脚本就不起作用了。 我希望它像下面的格式和javasript工作下面的代码。

<li><a class="active" href="">Home</a></li>

使用Javascript:

$(document).ready(function () {

  var dleft = $('#cmwmenu1 li.active').offset().left - $('#cmwmenu1').offset().left; 
  var dwidth = $('#cmwmenu1 li.active').width() + "px";

  $('.floatr').css({
      "left": dleft+"px",
      "width": dwidth
  });


  $('li').hover(function(){

      var left = $(this).offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).width() + "px";
      var sictranslate = "translate("+left+"px, 0px)";


      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate
      });

  },

  function(){

      var left = $(this).siblings('li.active').offset().left - ($(this).parents('#cmwmenu1').offset().left + 15);
      var width = $(this).siblings('li.active').width() + "px";

      var sictranslate = "translate("+left+"px, 0px)";

      $(this).parent('ul').next('div.floatr').css({
          "width": width,
          "-webkit-transform": sictranslate,
          "-moz-transform": sictranslate

      });

  })

});

的CSS:

#cmwmenu1 {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
}
a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
ul li {
    list-style: none;
    float:left;

    text-align: center;
    }
ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

1 个答案:

答案 0 :(得分:0)

this

怎么样?
var li = $('li');
li.click(function(){
    $this = $(this);
    li.removeClass('active').find('a').removeClass('active');
    $this.addClass('active').find('a').addClass('active');
})