我有一个菜单代码。当我们将鼠标移开时,矩形背景会动画到鼠标光标并在鼠标移出时移回活动链接。当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;
}
答案 0 :(得分:0)
var li = $('li');
li.click(function(){
$this = $(this);
li.removeClass('active').find('a').removeClass('active');
$this.addClass('active').find('a').addClass('active');
})