ナビゲーションバーの作り方

ナビゲーションバー

ナビゲーションバーは、どのWebサイトにとっても非常に重要な要素です。これらは、ユーザーにリンクのメインリストを提供することにより、ナビゲーションのメインメソッドを提供します。ナビゲーションバーを作成する方法はたくさんあります。ナビゲーションバーを作成する最も簡単な方法は、順序付けされていないリストを使用し、CSSでスタイルを設定することです。

ナビゲーションバーは主にで構成されています

Original text


    水平方向に配置およびスタイル設定されたリスト。

    ナビゲーションバーのスタイリング中に、によって作成された余分なスペースを削除するのが一般的です

      そして
    • タグと自動的に挿入される箇条書き:

       list-style-type: none; margin: 0px; padding: 0px;

      例:

      ナビゲーションには、HTMLとCSSの2つの部分があります。これは簡単な例です。

      • Home
      • About
      • Contact
      /* Define the main Navigation block */ .myNav { display: block; height: 50px; line-height: 50px; background-color: #333; } /* Remove bullets, margin and padding */ .myNav ul { list-style: none; padding: 0; margin: 0; } .myNav li { float: left; /* Or you can use display: inline; */ } /* Define the block styling for the links */ .myNav li a { display: inline-block; text-align: center; padding: 14px 16px; } /* This is optional, however if you want to display the active link differently apply a background to it */ .myNav li a.active { background-color: #3786E1; }