0

現在ナビを作成中です。これまでのところ、ホバー時/サイトがアクティブなときに表示されるホバー/現在のページ項目の bg-image があります。

しかし今、私はそれを進めて、素敵なトランジション効果を追加したいと思っています. アイデアは、現在のページ アイテムのアイコンをホバリング要素に移動することでした。

ここに画像の説明を入力

そのため、開始時に「Vertrieb」にカーソルを合わせると、テキストの上のポインターが Vertrieb に移動するはずです。

「referenzen」を使用していて、「blog」または「über mich」に向かって移動する場合は、その方向に移動する必要があります。

ここに画像の説明を入力

何か案は？テキストトランジションを使ったナビゲーションはすでにたくさん作っていますが、これは私のスキルレベルをはるかに超えています。

PS: マークアップは次のとおりです。

<ul class="nav">
    <li><a href="index.html" title="Start" class="current_page_item">Start</a></li>
    <li><a href="about.html" title="Über mich">Über mich</a></li>
    <li><a href="philosophie.html" title="Philosophie">Philosophie</a></li>
    <li><a href="referenzen.html" title="Referenzen">Referenzen</a></li>
    <li><a href="vertrieb.html" title="Vertrieb">Vertrieb</a></li>
    <li><a href="coaching.html" title="Coaching">Coaching</a></li>
    <li><a href="kontakt.html" title="Kontakt">Kontakt</a></li>
    <li><a href="blog.html" title="Blog">Blog</a></li>
</ul>




ul.nav { 
    position: relative; 
    float: right;
    margin: 28px 10px 0 0;
    }   

ul.nav li { 
    padding: 0 20px 0 0; 
    float: left; 
    list-style: none;
    }

ul.nav li a { 
    display: block; 
    padding: 30px 0 0 0;
    font-size: 0.9375em;
    -webkit-transition-property:color, text, background; 
    -webkit-transition-duration: 0.25s, 0.25s, 0.25s; 
    -webkit-transition-timing-function: linear, ease-in; 
    -moz-transition-property:color, text; 
    -moz-transition-duration:0.25s; 
    -moz-transition-timing-function: linear, ease-in;  
    -o-transition-property:color, text; 
    -o-transition-duration:0.25s; 
    -o-transition-timing-function: linear, ease-in;
    }

ul.nav li a:hover,
ul.nav li a:focus,
ul.nav li a.current_page_item { 
    color: #e86228; 
    background: url(images/nav_pointer.png) no-repeat top;
    }
4

1 に答える 1

3

コメントから転記;

JSfiddle (jQuery の例)

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#menu_wrap {
    border: 1px dotted blue;
    padding: 5px;
}
#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: relative;
}
#nav li {
    display: inline-block;
    margin-right: 15px;
}
#nav li:last-child {
    margin-right: 0px;
}
#nav li a {
    color: #444;
    text-decoration: none;
}
#arrow {
    background-image: url('http://www.jukti.com/wp-content/uploads/2011/07/google_pointer_map.png');
    background-size: 25px 35px;
    height: 35px;
    width: 25px;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function() {
    $('#nav li').mouseover(function() {
        var pos = $(this)[0].offsetLeft;
        pos = pos + Math.floor((($(this).css('width').replace('px', '') * 1) / 2));
        pos = pos - Math.floor(($('#arrow').css('width').replace('px', '') * 1) / 2)

        // Reset all colors
        $('#nav li a').css('color', '#444');

        // Animte the arrow
        $('#arrow').animate({
            'margin-left': pos + 'px'
        }, 250);

        // Change the color
        $('a', this).css('color', 'orange');
    });
});
于 2013-04-11T07:15:14.267 に答える