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 に答える