サポート » テーマ » yokoテーマのsubmenuを画像にしたいのですが・・・

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • yuuki1226

    (@yuuki1226)

    sub navに以下のコードを追加しましたところ画像になりました。
    しかしブラウザの幅を狭めると画像が崩れてしまいます。
    画像は840×150の画像を作ってずらして表示させています。

    .menu { overflow: hidden; }
    .menu-item {
    width: 840px;
    height: 50px;
    float: left;
    text-align: center;
    }
    .menu-item a {
    background-image: url(./images/menu.jpg);
    display: block;
    position: relative;
    line-height: 50px;
    color: white;
    text-decoration: none;
    text-indent: -9999px;
    }

    .menu_1 a { background-position: 0 0; }
    .menu_2 a { background-position: -140px 0; }
    .menu_3 a { background-position: -280px 0; }

    .menu_1.current-menu-item a { background-position: 0 -36px; }
    .menu_2.current-menu-item a { background-position: -140px -50px; }
    .menu_3.current-menu-item a { background-position: -280px -50px; }

    .menu_1 a:hover { background-position: 0 -72px; }
    .menu_2 a:hover { background-position: -140px -100px; }
    .menu_3 a:hover { background-position: -280px -100px; }

    nobita

    (@nobita)

    こんにちは、

    試してはいませんが、CSS3の、background-size:cover 等で対応できませんか?

    nobitaさん
    ご返答ありがとうございます。
    background-size:cover
    やってみたのですがやはり横長の画像がメニュー一つ一つに割り振られてしまいます。
    ちなみに
    .menu-item a {
    の中に追記してみました。
    ほかにも試したのですがやはりわかりません。
    よろしくお願いいたします。

    メニューに対して一つの画像にして三パターン画像を作ったほうがいいのでしょうか?

    こんにちは、

    通常は、スプライトを使ったほうがいいと思いますが、yokoのような、レスポンシブルテーマの場合は ブロックサイズに、背景画像をどう追従させるかというのがポイントになると思っています。

    最も簡単なのは、imgで処理してしまう事だと思いますが、背景として設定すると、CSS3を使って、少し複雑な処理も出来るので、難しいところですが、私だったら、スプライトを捨てて、background sizeで処理するのが、シンプルかなと思っています

    ベストプラクティスというより、それ以外で処理の方法を、私の技能では、みつかんない。
    というのが正直なところです。

    丁寧なご説明ありがとうございました。
    背景画像にて試行錯誤してみようかと思います。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「yokoテーマのsubmenuを画像にしたいのですが・・・」には新たに返信することはできません。