横ナビゲーションの作り方
横ナビゲーションを復習してみました。
- 「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="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> <div class="nav2"> <ul> <li class="first"><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> <div class="nav3"> <ul> <li class="first"><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> <div class="nav4"> <ul> <li class="first"><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</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; }