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

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

関連記事

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

画像を上下中央に配置

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

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

svg div 変形

SVG div で変形を作る

  簡単に変形してダウンロード   おもしろいサイトを見つけましたので、紹介します。   説明をするより、サイトを開いて実用化するのはあなた次第(笑) トップページのヘッ …

wordpress

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …