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

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

関連記事

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

カスタムスクロールバー

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

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

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

cmsとは

CMSとは

  CMSとは、コンテンツマネジメントシステム(content management system)の略で、簡単にいうと、ソフトの管理画面からテキストや画像などをHTMLが詳しくない方でも、 …