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

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

関連記事

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

動画配信サービス

気になる動画配信サービス

  Amazonプライム物足りない   Amazonプライムの無料体験を利用してみて感じたことは、 動画も音楽も『おまけ』みたいなもの ただ、料金的には『月400円の契約』『年間3 …

一人暮らしwifi

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

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