Attitude ナビゲーションメニューをカスタマイズしたい

  • pokiseijin

    (@pokiseijin)


    7年、 10ヶ月前

    attitudeは大変素晴らしくこればかり使っています。
    ただ若干のカラースタイル違いを出したくて、ナビゲーションメニューの変更を試みたいのです。

    ・レスポンシブ(スマホ時には横3本線タイプがいいです)
    ・均等幅で6つのメニュー(160px×6で合計960pxに）
    ・onmouse-hover時に背景画像を使って見た目を変えたい。
    と、ここまではああだこうだと考えていましたが、
    実際の変更を試すもことごとく失敗でした。

    こういった問題を解決したいのですが、どなたかアドバイスを頂戴できればと思います。
    よろしくお願い致します。

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

    (@ishitaka)

    7年、 10ヶ月前

    レスポンシブ(スマホ時には横3本線タイプがいいです)

    スマホ時というわけではありませんが、デバイスの幅が 767px 以下の場合に横3本線（画像）を表示しようとしているようです。
    ただしブラウザによって（私が試したのは Chrome）は表示が隠れているようです。これは下記のスタイルで改善するとおもいます。

    #access select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

    均等幅で6つのメニュー(160px×6で合計960pxに）

    メニュー数が 6 つということですが、ここはちょっと汎用的に 0 から 10 個までの可変に対応させてみました。

    #access ul.root > li {  padding: 0; }
#access ul.root > li a { width: 100%; text-align: center; }

#access ul.root > li:first-child:nth-last-child(2) { width: 100.00%; }
#access ul.root > li:first-child:nth-last-child(3), #access ul.root > li:first-child:nth-last-child(3) ~ li { width: 50.00%; }
#access ul.root > li:first-child:nth-last-child(4), #access ul.root > li:first-child:nth-last-child(4) ~ li { width: 33.33%; }
#access ul.root > li:first-child:nth-last-child(5), #access ul.root > li:first-child:nth-last-child(5) ~ li { width: 25.00%; }
#access ul.root > li:first-child:nth-last-child(6), #access ul.root > li:first-child:nth-last-child(6) ~ li { width: 20.00%; }
#access ul.root > li:first-child:nth-last-child(7), #access ul.root > li:first-child:nth-last-child(7) ~ li { width: 16.66%; }
#access ul.root > li:first-child:nth-last-child(8), #access ul.root > li:first-child:nth-last-child(8) ~ li { width: 14.28%; }
#access ul.root > li:first-child:nth-last-child(9), #access ul.root > li:first-child:nth-last-child(9) ~ li { width: 12.50%; }
#access ul.root > li:first-child:nth-last-child(10), #access ul.root > li:first-child:nth-last-child(10) ~ li { width: 11.11%; }
#access ul.root > li:first-child:nth-last-child(11), #access ul.root > li:first-child:nth-last-child(11) ~ li { width: 10.00%; }

    onmouse-hover時に背景画像を使って見た目を変えたい。

    :hover 疑似クラスというのがあります。これで、マウスオーバー時のスタイルを定義できます。

    #access ul.root > li a:hover { background-image: url('images/nav-hover-bg.jpg'); }

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「Attitude ナビゲーションメニューをカスタマイズしたい」には新たに返信することはできません。

タグ