0

だから私は私の新しいウェブサイトの再設計で楽しくてインタラクティブなナビゲーションを作ろうとしています. 全体的な考え方は前述のとおりです。ナビゲーションのさまざまなボタンにカーソルを合わせると、バーの URL が変更されるように、URL バーを模倣したいと考えています。

ウェブサイトはこちら: http://droddle.com/2013/

ご覧のとおり、誰かがブログであるホームページにアクセスしたときに、URL バーに「Droddle.com/blog」と表示されるようにします。ブログのアイコンにカーソルを合わせると、Droddle.com の部分がグレーになり、/blog の部分が白くなります。すべての画像をスプライト シートに配置しました。

したがって、全体的なテーマはあなたがいるページです。デフォルトでは、対応する URL に、Droddle.com を白で、/whatever を灰色で示す URL の画像を表示する必要があります。ナビゲーション リンクにカーソルを合わせると、対応する URL グラフィックが droddle.com がグレーで /whatever が白で URL バーに表示されるようにします。しかし、ナビゲーションボタンからマウスアウトすると、すべてが元の状態に戻り、現在のページが再び表示されるようになります。

さらに明確にする必要がある場合はお知らせください

これが私のコードです：

jQuery

$(document).ready(function(){

    $('a.navlink.blog').hover(function () {
        $('div.url_text').addClass('blog').addClass('up');
    }, function () {
        $('div.url_text').removeClass('up').addClass('blog');
    });

});

HTML

    <div class="url_bar">
        <div class="url_text blog down"></div>
    </div>

CSS

div.url_bar {
    width: 347px;
    height: 47px;
    margin: 60px 0 0 0;
    padding: 0;
    background: url(images/url_bar.png) no-repeat center center;
    float: left;
}

    div.url_text.blog {
        width: 175px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.blog.down {
        background-position: -16px -14px;
    }

    div.url_text.blog.up {
        background-position: -273px -14px;
    }

    div.url_text.about {
        width: 190px;
        height: 24px;
        margin: 14px 0 0 15px;
        padding: 0;
        background: url(images/url_bar_text.png) no-repeat;
    }

    div.url_text.about.down {
        background-position: -16px -49px;
    }

    div.url_text.about.up {
        background-position: -273px -49px;
    }
4

1 に答える 1

0

このようなものが必要な場合: http://jsfiddle.net/yQ85p/

これがあなたのためのコードです：

var defaultLogoClass = "";

$(document).ready(function(){

        defaultLogoClass = $('div.url_text').attr('class');

        $('a.navlink.blog').hover(function () {
            $('div.url_text').attr("class",'url_text blog up');
        }, function () {
            resetLogo();
        });

  $('a.navlink.about').hover(function () {
            $('div.url_text').attr("class",'url_text about up');
        }, function () {
            resetLogo();
        });

    });

function resetLogo(){
  $('div.url_text').attr("class",defaultLogoClass);
}

ブログとリンクについてはこれを行ったので、他のリンクをコピーして貼り付けることができます。

于 2013-01-13T01:24:49.980 に答える