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

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

関連記事

一人暮らしwifi

子供の一人暮らしにインターネット

  昔はむかし、今はいま。 当たり前になっているインターネット環境ですが、 自宅でのネット環境は整っている家庭も多いと思います。 では、一人暮らしを始めた子供の部屋のネット環境はどうすればよ …

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

海外Wi-Fi

海外に行くならWiFi(ワイファイ)どうする?

海外に行く人はどんなにしているんだろう? 現地でWiFi(ワイファイ)をレンタルする人もいれば、国内から海外用のWiFi(ワイファイ)を持参する人もいるし、全く持っていかない人もいるでしょう。 ふとそ …

きれいに拡大したい

小さい画像をきれいに拡大する

  小さい画像(写真)をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』   普通に拡大してしまうと、どうしても画像が …