メニューを横並びで中央に配置して、両端を伸ばす
投稿日:
メニューを横並びで中央に配置して、両端を伸ばす
基本 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テーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …
-
-
WordPressにお問い合わせフォームを入れるならこの2つのどちらか
お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②
4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …
- PREV
- 背景画像の下に隙間ができる【WordPress】
- NEXT
- GMOの低価格レンタルサーバー比較