2

我想做这样的事情：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;
}
4

1 回答 1

2

认为您可以将其用于固定导航项宽度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;
}
于 2013-01-14T22:27:59.693 回答