Question

我想做这样的事情：http://dreamapp.de/sites/portfolio/

目前，这是使用position: absolute的附加列表项完成的。所以我只是将列表项移动到与活动列表项相同的位置。但是，只有在内容不是动态居中的情况下，此解决方案才有效。因此，除了它是一个丑陋但有效的解决方案之外，必须有一个更好的解决方案，对吗？

我以为我在其他网站上看过类似的东西，但我找不到这样的东西。那我怎么能做得更好呢？

HTML：

    <nav id="menu2" class="menu">
        <ul>
            <li class="marker"></li>
            <li class="nav1"><a href="javascript:;">Home</a></li>
            <li class="nav2"><a href="javascript:;">HTML/CSS</a></li>
            <li class="nav3"><a href="javascript:;">JavaScript</a></li>
            <li class="nav4"><a href="javascript:;">Resources</a></li>
            <li class="nav5"><a href="javascript:;">Tutorials</a></li>
            <li class="nav6"><a href="javascript:;">About</a></li>
        </ul>
    </nav>

jQuery的：

$(".nav1 a").click(function() {
    $(".marker").stop().animate({left:'8px'},200, function() {
        $(".marker").stop().animate({display:'show'}, 200);
    });
});
$(".nav2 a").click(function() {
    $(".marker").stop().animate({'left':'118px'},200, function() {
        $(".marker").stop().animate({display:'show'}, 200);
    });
});
.
.
.

CSS：

.menu ul li.marker {
   width: 110px;
   height: 45px;
   background-color: #42ff2e;
   display:none;
   position: absolute;
}

.menu { 
    width: 660px;
    height: 45px;
    display: block;
}
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu ul li {
    float: left; 
    overflow: hidden;       
    position: relative;
    text-align: center;
    line-height: 45px;
}
.menu ul li a { 
    position: relative;
    display: block;
    width: 110px;
    height: 45px;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

Answer 1

认为您可以将此用于固定导航项目宽度http://jsfiddle.net/UqUBr/ （对于可变导航项宽度 - http://jsfiddle.net/bdmjC/）

JS：

var navigation = $('nav'),
    items = navigation.find('.item'),
    itemWidth = 110

$(".item a").click(function() {
    var item = $(this).parent()

    $(".marker").stop().animate({left:items.index(item)*itemWidth},200, function() {
        $(".marker").stop().animate({display:'show'}, 200);
    });
});

HTML：

<nav id="menu2" class="menu">
    <ul>
        <li class="marker"></li>
        <li class="item"><a href="javascript:;">Home</a></li>
        <li class="item"><a href="javascript:;">HTML/CSS</a></li>
        <li class="item"><a href="javascript:;">JavaScript</a></li>
        <li class="item"><a href="javascript:;">Resources</a></li>
        <li class="item"><a href="javascript:;">Tutorials</a></li>
        <li class="item"><a href="javascript:;">About</a></li>
    </ul>
</nav>

CSS：

nav#menu2 {
  display: block;
  margin: auto;
  width: 660px;
  position: relative;
}

带滑动荧光笔的jQuery菜单

1 个答案: