マウスが当たると色が変わるメニューのCSSについて

Posted by boukyaku on 25.2010 ホームページ制作の謎   0 comments
  • このエントリーをはてなブックマークに追加
    マウスが当たると画像が変わるメニューのCSSについて

    マウスポインターがメニューに当たると
    画像の色が変わるまたは、画像が変わるデザインは、凄く一般的。

    よく、ジャバスクリプトを使っているケースがあるけれど
    CSSで出来ないものか、調べてみた。

    ちょうど良いサンプルコードが見つかったので
    参考までに下記に掲載しています。
    [スポンサードリンク]


    以下は、某サイトのソースを参考に引用しているだけなので
    自分のしたいデザイン用に多少CSS側を書き換える必要があります!


    以下はHTMLの記述

    <div id="header">
    <ul id="top_menu">

    <ul id="header_menu">
    <li id="hdr_introduction"><a href="/portal/introduction/"></a></li>
    <li id="hdr_features"><a href=""></a></li>
    <li id="hdr_download"><a href=""></a></li>
    <li id="hdr_casestudy"><a href=""></a></li>
    <li id="hdr_questions"><a href=""></a></li>
    </ul>

    </div>
    </div>



    以下は、CSS側の記述

    #header{
    background: url(../images/portal/nav_header.jpg) 9px 63px no-repeat;
    height: 125px;
    position:relative;
    }

    #header h1{
    margin-left: 14px;
    }
    #header ul#header_menu{
    position: absolute;
    top: 63px;
    left: 296px;
    width: 664px;
    }
    #header ul#header_menu li{
    display:block;
    float:left;
    }
    #header ul#header_menu li a{
    background: #F7FAFF url(../images/portal/nav_header.jpg) 0 0 no-repeat;
    display:block;
    width: 132px;
    height: 65px;
    border-left: 1px solid #fff;
    }
    #header ul#header_menu li#hdr_introduction a{
    background-position: -295px 0;
    }
    #header ul#header_menu li#hdr_introduction a:hover{
    background-position: -295px -65px;
    }
    #header ul#header_menu li#hdr_features a{
    background-position: -425px 0;
    }
    #header ul#header_menu li#hdr_features a:hover{
    background-position: -425px -65px;
    }
    #header ul#header_menu li#hdr_questions a{
    width: 131px;
    background-position: -816px 0;
    }
    #header ul#header_menu li#hdr_questions a:hover{
    width: 131px;
    background-position: -816px -65px;
    }
    #header ul#header_menu li#hdr_casestudy a{
    background-position: -557px 0;
    }
    #header ul#header_menu li#hdr_casestudy a:hover{
    background-position: -557px -65px;
    }
    #header ul#header_menu li#hdr_download a{
    background-position: -687px 0;
    }
    #header ul#header_menu li#hdr_download a:hover{
    background-position: -687px -65px;
    }


    関連記事


    • password
    • 管理者にだけ表示を許可する

    スポンサードリンク

    リンク