講師コラム

初心者の為のCSS:コピペでOK!横並びナビメニュー10選

  • このエントリーをはてなブックマークに追加

今回はホームページ・ブログの重要な要素、横並びメニュー10選をご紹介します。
HTMLとCSSをそのまま張り付けて簡単にメニューを作成できますので是非お試しください。

シンプルメニュー

CSS
nav{
 text-align: center;
}
nav ul{
 margin: 0 ;
 padding: 0 ;
}
nav ul li{
 list-style: none;
 display: inline-block;
 width: 18%;
 min-width: 90px;
}
nav ul li a{
 text-decoration: none;
 color: #333;
}
nav ul li.current a{
 color: #F33135;
}
nav ul li a:hover{
 color: #E7DA66;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

斜線区切りメニュー

CSS
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 min-width: 50px;
 position: relative;
}
nav ul li:not(:first-child):after{
 position: absolute;
 content: ‘/’;
 top: 30%;
 left: 0;
}
nav ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #ccc;
 font-weight: bold;
}
nav ul li.current a{
 color: #A77B1C;
}
nav ul li a:hover{
 color: #C55859;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

CSSアイコン付きメニュー

CSS
nav ul{
 margin: 0 auto;
 padding: 0;
 text-align: center;
}
nav ul li{
 display: inline-block;
 position: relative;
 padding-right: 15px;
 margin-right: 10px;
}
nav ul li a::after,
nav ul li a::before {
 display: block;
 content: ”;
 position: absolute;
}
nav ul li a::after {
 top: 10%;
 right: 0;
 width: 13px;
 height: 13px;
 background-color: #ccc;
 border-radius: 100%;
}
nav ul li a.current::after,
nav ul li a:hover:after{
 background-color: #3498db;
}
nav ul li a::before {
 z-index: 2;
 top: 40%;
 right: 5px;
 width: 5px;
 height: 5px;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
nav ul li a{
 text-decoration: none;
 color:#aaa;
 display: inline-block;
 width: 100%;
}
nav ul li a.current{
 color:#555;
}
nav ul li a:hover{
 color:#555;
}
HTML
<nav>
 <ul>
  <li><a class=”current” href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

罫線区切り+下線メニュー

CSS
nav{
 text-align: center;
}
nav ul{
 margin: 0 ;
 padding: 0 ;
}
nav li{
 list-style: none;
 display: inline-block;
 width: 10%;
 min-width: 90px;
}
nav li:not(:last-child){
 border-right:2px solid #ddd;
}
nav a{
 text-decoration: none;
 color: #333;
}
nav a.current{
 color: #00B0F0;
 border-bottom:2px solid #00B0F0;
}
nav a:hover{
 color:#F7CB4D;
 border-bottom:2px solid #F7CB4D;
}
HTML
<nav>
 <ul>
  <li><a class=”current” href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

均等幅+下線メニュー

CSS
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0 ;
 width: 80%;
 text-align: center;
}
nav li{
 display: table-cell;
 min-width: 50px;
}
nav a{
 display: block;
 width: 100%;
 text-decoration: none;
 color: #555;
 padding-bottom: 5px;
}
nav li.current{
 border-bottom: 3px solid #92D050;
}
nav li:hover{
 color: #E7DA66;
 border-bottom: 3px solid #F0E475;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=“#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

ボーダー囲み+シンプルメニュー

CSS
ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
ul li{
 display: table-cell;
 min-width: 50px;
}
ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #ccc;
 font-weight: bold;
}
ul li.current{
 border: 3px solid #555;
}
ul li.current a{
 color: #555;
}
ul li a:hover{
 color: #E71B1F;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=“#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

背景カラー+シンプルメニュー

CSS
ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
ul li{
 display: table-cell;
 min-width: 50px;
}
ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #555;
 font-weight: bold;
}
ul li.current{
 background-color: #DEEBF7;
}
ul li.current a{
 color: #555;
}
ul li:hover{
 background-color: #FFF2CC;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=“#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

丸アイコン+下線メニュー

CSS
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 position: relative;
}
nav ul li a{
 display: block;
 width: 100%;
}
nav ul li a::after,
nav ul li a::before {
 display: block;
 content: ”;
 position: absolute;
}
nav ul li a::after {
 bottom: -50%;
 left: 50%;
 width: 5px;
 height: 5px;
 background-color: #ccc;
 border-radius: 100%;
}
nav ul li a.current::after {
background-color: #3498db;
}
nav ul li a:hover{
 color: #3498db;
}
nav ul li a:hover:after {
 background-color: yellow;
 width: 100%;
 left: 0;
 border-radius: 5px;
}
nav ul li a{
 text-decoration: none;
 color:#aaa;
}
nav ul li a.current{
 color:#555;
}
HTML
<nav>
 <ul>
  <li><a class=”current” href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=”#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

罫線区切り+背景カラーメニュー

CSS
nav{
 border-bottom: 1px solid #ccc;
}
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 min-width: 50px;
 border-right: 1px solid #ccc;
}
nav ul li:first-child{
 border-left: 1px solid #ccc;
}
nav ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #aaa;
}
nav ul li a:hover{
 background-color:#F8E750;
 border-bottom: 5px solid #F8E750;
}
nav ul li.current{
 font-weight: bold;
}
nav ul li.current a{
 border-bottom: 5px solid #00B0F0;
 color: #00B0F0;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=“#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

上線+背景カラーメニュー

CSS
nav{
 border-bottom: 5px solid #ccc;
 position: relative;
}
nav ul{
 position: absolute;
 left:10%;
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 min-width: 50px;
}
nav ul li a{
 display: block;
 width: 100%;
 height: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #aaa;
}
nav ul li.current{
 font-weight: bold;
 border-top: 5px solid #00B0F0;
}
nav ul li.current a{
 color: #00B0F0;
}
nav ul li a:hover{
 color: #0089BB;
 background-color: #FBFBDD;
}
nav ul li:hover{
 border-top: 5px solid #F8E750;
}
HTML
<nav>
 <ul>
  <li class=”current”><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a></li>
  <li><a href=”#”>About</a></li>
  <li><a href=“#”>Access</a></li>
  <li><a href=”#”>Blog</a></li>
 </ul>
</nav>

まとめ

今回はよく見るメニューの中から10種類を選んでご紹介してみました。
CSSで見た目を変更し、ページのテーマ(雰囲気)に合わせたメニューにすることでよりユーザーが使いやすいページを作ることができます。
ほんの少しの工夫で見やすく、使いやすくすることができるので、様々なアイデアで是非自分だけの素敵なメニューをデザインしてみてくださいね。

次回の「初心者のためのCSS」はアコーディオンメニューをご紹介します。お楽しみに!

  • このエントリーをはてなブックマークに追加

話題をチェック!

2017年12月1日

Office系の資格取得にチャレンジ~独学勉強法~

日ごとに寒さが増していく今日この頃。。。風邪などひいていませんか? 乾燥がはげしいこの時期は特に手洗いうがいをこまめにすることを心掛けてすごしています。 前回記載したブログでは、Office系の資格についてまとめてみまし …続きを読む

2017年6月8日

これだけは覚えておきたいExcel関数「SUM関数」

皆様、こんにちは。 梅雨入り間近の今日この頃、新入社員の皆様もそろそろ会社になれてきたころでしょうか? 本格的な資料作成をまかされはじめている頃でしょう。 多くの会社・業務で利用されているExcelですが、本日はこれだけ …続きを読む