つれづれなる備忘録

日々の発見をあるがままに綴る

トップ > HTML/CSS > ブログデザイン備忘録 ~グローバルメニュー更新

ブログデザイン備忘録 ~グローバルメニュー更新

HTML/CSS

　今回はカテゴリが増えたのに伴って本ブログのグローバルメニューを更新したので、コードと要点を紹介していきたい。更新したところは1段だったグローバルメニューを2段にしたことと、2段目にマウスホバー時にサブカテゴリを表示するようにした点である。今後もメニューに表示するカテゴリは、記事の更新状況に応じて不定期に変更する。

1. デザインのポイント

　マウスホバー時にサブカテゴリ―が表示されるメニューを導入する際に以下の点を注意して、現在のデザインとなった。

  • サブカテゴリ表示する際に、サイドバーのメニュー等に被らないようにする
  • サブメニューが多すぎないようにバランスに配慮する
  • スマホサイズ画面の場合のサイズ調整を忘れずに行う

1点目はサイドバーのメニュー等（プロフィール）に被るとデザインがおかしくなるので、一番右のサイドバーに被るところはサブメニューを設けずAboutページへのリンクとした。2点目は、最初のグローバルメニューであるHOME/Arduino/ブログデザイン/その他についてそのままサブメニューを設定すると圧倒的にその他が多くなってしまうのと、サブメニューが多すぎてページタイトルなどに被ってしまうため、最初のメニューにこだわらず2段組にして一部をサブメニューにするという構成にした。3点目は、サブメニューの表示幅をスマホの場合は狭く設定しないと、スマホで見た場合レイアウトが著しく崩れてしまう。

2. HTMLコード

　以下にHTMLコードを示すが、メインメニューはリスト、サブメニューはメインメニューのリスト項目内に入れ子のようにリストを作成する。また2段組みする場合はリストを並列するが、CSSでデザインを適用するためclass名をmenubar,menubar2として<div>でそれぞれ囲う。大まかには以下のような構造にする。

<!-- メニュー1段目 -->
<div class="menubar"> 
   <ul>
         <li><a href="#" >メインメニュー1</a></li>
         <li><a href="#" >メインメニュー2</a></li>
   </ul>
</div>
<!-- メニュー2段目 -->
<div class="menubar2"> 
   <ul>
         <li><a href="#" >メインメニュー3</a>
              <div><ul>
                 <li><a href="#" >サブメニュー1</a></li>
                 <li><a href="#" >サブメニュー2</a></li>
              </ul></div>  
          </li>
          <li><a href="#" >メインメニュー4</a></li>
    </ul>
</div>

実際には以下のHTMLコードにしている。

<div class="menubar">
     <ul>
         <li><a href="https://atatat.hatenablog.com/" title="HOME" >HOME</a></li>
         <li><a href="https://atatat.hatenablog.com/archive/category/Arduino" title="Arduino">Arduino</a></li>
         <li><a href="https://atatat.hatenablog.com/archive/category/HTML%2FCSS" title="ブログデザイン">ブログデザイン</a></li>
         <li><a href="https://atatat.hatenablog.com/archive/category/javascript" title="Javascript">Javascript</a></li>          
     </ul>
</div>

<div class="menubar2">
    <ul>
        <li><a href="https://atatat.hatenablog.com/archive/category/TeX" title="HOME" >TeX</a>
            <div>
                <ul>
                    <li><a href="https://atatat.hatenablog.com/archive/category/MathJax">MathJax</a></li>
                </ul>
            </div>
        </li>

        <li><a href="https://atatat.hatenablog.com/archive/category/%E3%83%84%E3%83%BC%E3%83%AB" title="ツール">ツール</a></li>
        <li><a href="https://atatat.hatenablog.com/archive/category/%E3%81%9D%E3%81%AE%E4%BB%96" title="その他">その他</a>
            <div>
                <ul>
                    <li><a href="https://atatat.hatenablog.com/archive/category/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9">インターフェース</a></li>
                    <li><a href="https://atatat.hatenablog.com/archive/category/%E5%8D%98%E4%BD%8D">単位</a></li>
                    <li><a href="https://atatat.hatenablog.com/archive/category/%E9%9B%91%E8%A8%98">雑記</a></li>
                </ul>
            </div>
        </li>
        <li><a href="https://atatat.hatenablog.com/about" title="About" >About</a></li>
    </ul>

</div>

3. CSSコード

　1段目(.menubar)のグローバルメニューに関しては更新前と同じで、2段目(.menubar2が今回更新したところになる。ホバー時にサブメニューを表示するには、最初は非表示にしてホバー時に表示するようにCSSを記述する。以下表示に関する箇所のみCSSで示すと以下のようにしている。

.menubar2 > ul > li > div {
    display: none;
}
.menubar2 > ul > li:hover > div {
    display: table-row;
}
.menubar2> ul > li > div ul > li {
    display: table-row;
}
.menubar2 > ul > li > div ul > li > a {
    display: block;
}
.menubar2 > ul > li > div ul > li:hover > a {
    background-color: mediumseagreen;
}

実際のCSSは以下の通り。（余計なコードが含まれているので、もう少し動作確認しながら省略していく必要がある）

.menubar{
 width:100%; 
}
.menubar ul{
 display:table;
 width:100%;
 max-width:1160px;
 margin:0 auto; 
 padding: 0;
 background-color: #FFFFFF;
 } 
.menubar li{
 display: table-cell;
 width:25%;
 padding:0;
 background-color:#002200; 
} 
.menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
 color: #FFFFFF;
 text-align: center;
 font-size: 100%;
 }
.menubar li a:hover{
 background-color: #008800; 
}
.menubar > ul > li > a {
    color: #fff;
    line-height: 2em;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
}
.menubar2 > ul > li > div {
    border-top: 0;
    line-height: 15px;
    display: none;
    margin: 0 0 0 -1em;
    position: absolute;
    width: 18em;
}
.menubar2 > ul > li:hover > div {
    display: table-row;
}
.menubar2> ul > li > div ul > li {
    display: table-row;
}
.menubar2 > ul > li > div ul > li > a {
    color: #ffffff;
    display: block;
    text-decoration: none;
    text-align:center;
}
.menubar2 > ul > li > div ul > li:hover > a {
    background-color: mediumseagreen;
}
.menubar2{
 width:100%; 
}

.menubar2 ul{
 display:table;
 width:100%;
 max-width:1160px;
 margin:0 auto; 
 padding: 0;
 background-color: #FFFFFF; 
} 
.menubar2 li{
 display: table-cell;
 width:25%;
 padding:0;
 background-color:#002200;
 } 
.menubar2 li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
 color: #FFFFFF;
 text-align: center;
 font-size: 100%; 
}

 .menubar2 > ul > li > a {
    color: #fff;
    line-height: 2em;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
}
.menubar2 li a:hover{
 background-color: #008800; }

4. スマホ対応

　画面サイズによって、メニュー、サブメニューのフォントサイズとサブメニューの表示幅を変えるようにCSSで設定する。スマホサイズは @media(max-width:480px)を想定している。はてなのスマホサイズのプレビューと照合しながら、幅やサイズを決定した。

@media(max-width:896px){
 .menubar li a{
 font-size:85%;
 }
  .menubar2 li a{
 font-size:85%;
 }
 .menubar2 > ul > li > a {
 font-size:85%;
 }
  .menubar2 > ul > li > div {
    width: 14em;
}
 }
 @media(max-width:480px){
 .menubar li a{
 font-size:50%;
}
 .menubar > ul > li > a {
    line-height: 2em;
    padding:0;
    text-decoration: none;
}
  .menubar2 li a{
 font-size:50%;
 padding:0;
 margin:0;
 }
 .menubar2 > ul > li > a {
 font-size:50%;
 padding:0;
 margin:0;
 }
 
 .menubar2 > ul > li > div {
    width: 6em;
}
 #footer{
 font-size:70%;
 }
 }