メニューを横並びで中央に配置して、両端を伸ばす
投稿日:
メニューを横並びで中央に配置して、両端を伸ばす
基本 HTML
<div class="menu"> <div class="menu-inner"> <ul> <li class="page-a"><a href="#">page-A</a></li> <li class="page-b"><a href="#">page-B</a></li> <li class="page-c"><a href="#">page-C</a></li> <li class="page-d"><a href="#">page-D</a></li> <li class="page-e"><a href="#">page-E</a></li> </ul> </div> </div>
中央に配置
よくある横並びのメニューです
両端は空けています
マウスオーバーでリストの背景色をグレーに変えています
CSSの記述
.menu{ width:100%; } .menu .menu-inner{ width:70%; margin:0 auto; } .menu .menu-inner ul{ list-style:none; display:table; table-layout:fixed; margin:0; padding:0; width:100%; } .menu .menu-inner ul li{ display:table-cell; width:20%; padding:0; text-align:center; } .menu .menu-inner ul li a{ display:block; line-height:5; text-decoration:none; color:#fff; } .page-a{ background:#212121; } .page-b{ background:#DCEDC8; } .page-c{ background:#8BC34A; } .page-d{ background:#CDDC39; } .page-e{ background:#689F38; } .menu .menu-inner ul li:hover{ background:#ccc; } .menu .menu-inner ul li a:hover{ color:#1a1a1a; }
中央に配置して両端を伸ばす
両端の色に合わせて横幅いっぱいに伸ばす
背景を2色に分けています
マウスオーバーでリストの背景色をグレーに変えています
CSSの記述(上記の変更箇所のみ)
.menu{ width:100%; background:linear-gradient(90deg,#212121 0%,#212121 50%,#689F38 50%,#689F38 100%); }
関連記事
-
-
WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②
1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …
- PREV
- 背景画像の下に隙間ができる【WordPress】
- NEXT
- GMOの低価格レンタルサーバー比較