Web全般 wordpress

メニューを横並びで中央に配置して、両端を伸ばす

投稿日:

メニューを横並びで中央に配置して、両端を伸ばす

基本 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%);
}
今回は、【display:table-cell;】を使って横並びにしました。

-Web全般, wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

div横並び

DIV横並びで回り込みも

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい! そんなことを思ったことがあると思います。(きっと 😛 ) いろんな方法がありますが、簡単にできる方法をご紹 …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …