横ナビゲーションの作り方 - ウェブ学のすすめ

横ナビゲーションを復習してみました。

「nav1」display:inlineを利用した横ナビ。hover時の文字色を指定。
「nav2」float:leftを利用した横ナビ。hover時の背景色を指定。
「nav3」float:leftを利用した横ナビ。hover時の背景色を指定。
「nav4」float:leftを利用した横ナビ。hover時の背景画像を指定。

横ナビゲーション - jsdo.it - share JavaScript, HTML5 and CSS

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print" />
<title>横ナビゲーション</title>
</head>
<body>
<div id="container">
<div class="nav1">
<ul>
<li class="first"><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="first"><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
<div class="nav3">
<ul>
<li class="first"><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
<div class="nav4">
<ul>
<li class="first"><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div>
</div>
</body>
</html>

CSS

/* reset */
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 0.875em;
}

/* container */
#container {
    width: 760px;
}

/* nav1 */
.nav1 {
    margin: 50px 25px 0;
}
.nav1 ul {
    list-style-type: none;
}
.nav1 li {
    display: inline;
    border-left: 1px solid #aaa;
    margin: 0 4px 0 0;
    padding: 5px 0 5px 8px;
}
.nav1 li.first {
    border-left: none;
}
.nav1 li a:link, .nav1 li a:visited {
    color: #000;
    text-decoration: none;
}
.nav1 li a:hover {
    color: #f60;
}

/* nav2 */
.nav2 {
    margin: 50px 25px 0;
}
.nav2 ul {
    list-style-type: none;
}
.nav2 li {
    float: left;
    border-right: 1px solid #aaa;
    text-align: center;
}
.nav2 li a { 
    display: block;
    width: 120px;
    line-height: 25px;
}
.nav2 li.first {
    border-left: 1px solid #aaa;
}
.nav2 li a:link, .nav2 li a:visited {
    color: #000;
    text-decoration: none;
}
.nav2 li a:hover {
    background-color: #eaebb2;
}

/* nav3 */
.nav3 {
    clear: both;
    margin: 0 26px 0;
    padding: 50px 0 0; 
}
.nav3 ul {
    list-style-type: none;
}
.nav3 li {
    float: left;
    border-right: 1px solid #aaa;
    text-align: center;
    background-color: #21962D;
}
.nav3 li a { 
    color: #fff;
    display: block;
    width: 120px;
    line-height: 25px;
}
.nav3 li a:link, .nav3 li a:visited {
    text-decoration: none;
}
.nav3 li a:hover {
    background-color: #00C667;
}

/* nav4 */
.nav4 {
    clear: both;
    margin: 0 25px 0;
    padding: 50px 0 0;
}
.nav4 ul {
    list-style-type: none;
}
.nav4 li {
    float: left;
    border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    text-align: center;
    background-color: #21962D;
}
.nav4 li.first {
    border-left: 1px solid #aaa;
}
.nav4 li a { 
    color: #000;
    display: block;
    width: 120px;
    line-height: 25px;
}
.nav4 li a:link, .nav4 li a:visited {
    text-decoration: none;
    background-image: url(http://jsrun.it/assets/3/9/p/b/39pbA.gif);
    background-repeat: repeat-x;
}
.nav4 li a:hover {
    background-image: url(http://jsrun.it/assets/5/L/x/E/5LxEP.gif);
    background-repeat: repeat-x;
}