CMSブログソフトWordPressの基本操作と使い方
WordPress3.0.4 ADPHIC Co,.Ltd. SINCE.2008.10.15

HOMEIllustratorのツボadphicContact-Mail

CONTENTS
CSS・HTML
  • CSSでつくる画像のロールオーバーメニュー
  • デザインで困らないために spacer.gifの代用品をCSSでつくる
  • AD LINK
    Fotolia
    500万点以上のロイヤリティフリー画像が、なんと100円から使えるイメージバンク。印刷レベルの写真でも500円。ちょっと素材が必要なときに便利です。
    TIPS
    CATEGORY : CSS・HTMLのメモ | UPDATE : 2008.10.14

    CSSでつくる
    画像のロールオーバーメニュー

    画像を使ったロールオーバーメニューをCSSで管理します。Java scriptを使わないのでPHPは至ってシンプルです。

    STYLE-CSS<CSS設定>
    .menu-a, .menu-a a {
        width: 150px; height: 30px; text-indent: -4000px;
        background: url(画像のアドレス/menu-a-2.gif) no-repeat;
        background-color: #00a0e9;
        float: left;
        }
    .menu-a, .menu-a a:hover {
        background: url(画像のアドレス/menu-a-2.gif) no-repeat;
        }
    .menu-b, .menu-b a {
        width: 150px; height: 30px; text-indent: -4000px;
        background: url(画像のアドレス/menu-b-1.gif) no-repeat;
        background-color: #00a0e9;
        float: left;
        }
    .menu-b, .menu-b a:hover {
        background: url(画像のアドレス/menu-b-2.gif) no-repeat;
        }
    

    menu-a。menu-bとメニューの数だけ増やします。

    TEMPLATE-TAG EXAMPLE<テンプレート記述例>
    <div class="menu-a"><a href="#">メニューテストA</a></div>
    <div class="menu-b"><a href="#">メニューテストA</a></div>

    text-indent:-4000pxの設定で「メニューテストA、B」の文字は、画面上に表示されません。

    EXAMPLE RESULT<記述例の結果>
    INDEX