Navigation Bar ng CSS

Demo: navigation bar

Vertical navigation bar

Horizontal navigation bar


Navigation bar

Ang user-friendly na navigation ay napakahalaga para sa anumang websayt.

Sa pamamagitan ng paggamit ng CSS, puwedeng i-convert ang napuputok na HTML menu sa magandang navigation bar.

Navigation bar = listahan ng link

Ang navigation bar ay nangangailangan ng standard na HTML bilang batayan.

Sa aming ekemplo, gagamitin namin ang standard na HTML listahan upang bumuo ng navigation bar.

Ang navigation bar ay pangunahing listahan ng link, kaya mabuti na gamitin ang mga elemento na <ul> at <li>:

Example

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Try It Yourself

Now, remove the list item, as well as the margin and padding (fill) from the list:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Try It Yourself

Example Explanation:

  • list-style-type: none; - Remove the list item. The navigation bar does not need list item markers.
  • Set margin: 0; and padding: 0; Remove the default settings of the browser.

The code in the previous example is the standard code used in vertical and horizontal navigation bars, and you will learn more about it in the next chapter.