CSSナビゲーションバー


CSS ナビゲーション バー

垂直

2.gif

水平

1.gif

ナビゲーションの上手な使い方あらゆる Web サイトのバー 非常に重要です。

CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。

ナビゲーション バー = リンク リスト

標準の HTML ベースとして、ナビゲーション バーは必須です。

この例では、標準の HTML リスト ナビゲーション バーを構築します。

ナビゲーション バーは基本的にリンクのリストであるため、<ul> 要素と <li> 要素を使用するのは非常に理にかなっています:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>

</body>
</html>

インスタンスを実行しますか?
「インスタンスを実行」をクリックしますボタンをクリックしてオンラインで表示します。 例

さて、リストからマージンとパディングを削除しましょう:

インスタンス 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

インスタンスを実行しますか?
オンラインの例を表示するには、[インスタンスを実行] ボタンをクリックしてください

分析例:

    list-style-type:none - リストの前にある小さなロゴを削除します。ナビゲーション バーにはリスト マークアップは必要ありません

    • ブラウザのマージンとパディングのデフォルト設定を 0 に削除します

    • 上の例のコードは、垂直および水平ナビゲーション バーに使用される標準コードです。

垂直ナビゲーション バー

上記のコードでは、単純な垂直ナビゲーション バーを作成するために <a> 要素のスタイルのみが必要です:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a
{
	display:block;
	width:60px;
	background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

サンプルを実行しますか?
Click 「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

サンプルの説明:

    display:block - ブロック要素へのリンクを表示し、リンク領域全体(テキストだけでなく)をクリック可能にし、幅を指定できます

    • width:60px - デフォルトのブロック要素の最大幅。幅を 60 ピクセルに指定する必要があります

    • これに基づいて、シンプルで美しい垂直ナビゲーション バーを作成するためのスタイルを追加できます:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

サンプルを実行しますか?
Click" 「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

注: 垂直ナビゲーション バーの <a> 要素の幅を必ず指定してください。 width を省略すると、IE6 で予期しない影響が生じる可能性があります。

水平ナビゲーション バー

水平ナビゲーション バーを作成するには 2 つの方法があります。リスト項目には inline または float を使用します。

どちらの方法でも問題ありませんが、リンクを同じサイズにしたい場合は、float メソッドを使用する必要があります。

インライン リスト項目

水平ナビゲーション バーを作成する方法の 1 つは、要素を指定することです。上記のコードは標準のインラインです:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	padding-top:6px;
	padding-bottom:6px;
}
li
{
	display:inline;
}
a:link,a:visited
{
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>
</html>

インスタンスを実行しますか?

「実行」をクリックします。 「インスタンス」ボタン オンラインの例を見る

分析例:

  • display:inline; - デフォルトでは、<li> 要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して 1 行を表示します。

フローティング リスト項目

上の例では、リンクの幅が異なります。

すべてのリンクを同じ幅にするには、<li> 要素をフローティングにして、<a> 要素の幅を指定します。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a:link,a:visited
{
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>

</body>
</html>

インスタンスを実行しますか?

例

分析例:

    • float:left - フローティングブロック要素を使用したスライドは互いに隣接しています

    • display:block - ブロック要素のリンクを表示し、全体を作成これにより、幅

    • width:120px - ブロック要素のデフォルトの最大幅を指定できるようになります。 120 ピクセルの幅を指定したいです

その他の例

例: CSS3 メディア クエリを使用して応答性の高いナビゲーションを作成する方法。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 900px) {
    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}
</style>
</head>
<body>

<ul class="sidenav">
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div class="content">
  <h2>响应式边栏导航实例</h2>
  <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
  <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
  <h3>重置浏览器窗口大小，查看效果。</h3>
</div>

</body>
</html>

サンプルを実行しますか?

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

例: CSS3 メディアクエリを使用してサイドバーナビゲーションを作成する方法。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li class="right"><a href="#about">关于</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>响应式导航栏实例</h2>
  <p>在屏幕宽度小于 600px 会重置导航栏。</p>
  <h4>重置浏览器窗口大小，查看效果。</h4>
</div>

</body>
</html>

インスタンスを実行しますか?

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしてください

インスタンス: ナビゲーション ドロップダウン メニュー -- ナビゲーション バー内にドロップダウン メニューを設定します

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style>
  ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#333;
  }
  
  li{
    float:left;
  }
  
  li a, .dropbtn
  {
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
  }
  
  li a:hover, .dropdown:hover, .dropbtn
  {
    background-color:#111;
  }
  
  .dropdown
  {
    display:inline-block;
  }
  
  .dropdown-content
  {
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    min-width:160px;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  
  .dropdown-content a
  {
    color:black;
    padding:12px 16px;
    text-decoration:none;
    display:block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content
  {
    display:block;
  }
  
  </style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜单</a>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
</ul>

<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

インスタンスを実行しますか?

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→