CSS Introduction | Advanced CSS | Navigation Bar

Tags:

One of the areas users click most often on a website is the navigation bar.
A navigation bar means the menu commonly used on websites.
When CSS is applied to a simple menu made only with HTML elements, it can be easily changed into a menu that is attractive and convenient to use.

The most basic type of navigation bar is a list menu that uses links.
In HTML, links are represented with the <a> tag.

The following example shows a simple menu implemented with links.

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a href="/css/intro">CSS</a></li>
    <li><a href="/javascript/intro">JavaScript</a></li>
</ul>

Vertical navigation bar

You can create a vertical navigation bar simply by setting the display property of a link-based list menu to block.

<style>
    ul { background-color: #FFDAB9; width: 150px; list-style-type: none; margin: 0; padding: 0; }
    li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

In the example above, changing the display property of the inline <a> element to block makes the entire menu area clickable, so clicking anywhere in the menu item moves to the linked page.

You can also use a class to show the current menu position in the navigation bar.

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

In the example above, the :not selector is used to distinguish the background color of the current class, which indicates the current menu, from the other menu items.

You can use the border property to display boundaries in a navigation bar.

<style>
    li { border-bottom: solid 1px black; }
    li:last-child { border-bottom: none; }
</style>

Horizontal navigation bar

A horizontal navigation bar can be created with the following properties.

  1. A method using the inline value of the display property
  2. A method using the floating property

Method using the inline value of the display property

Set the display property of the <li> element in a link-based list menu to inline. Then the <li> element, which was a block element, is changed so that it behaves like an inline element.

The changed inline <li> element occupies only as much width as its content. As a result, all <li> elements line up horizontally, and this can be used to create a horizontal navigation bar.

<style>
    li { display: inline; }
</style>

Method using the floating property

Set the float property on the <li> elements of a link-based list menu.

If the float value is set to left, all menu items are aligned to the left.
If the float value is set to right, all menu items are aligned to the right.

<style>
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; padding: 8px; }
</style>

With CSS, you can set several styles on a horizontal navigation bar.

<style>
    ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
    li { float: left; }
    li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;
        text-align: center; font-weight: bold; }
    li a:hover { background-color: #CD853F; color: white; }
</style>

You can also use a class to show the current menu position in the navigation bar.

<style>
    li a.current { background-color: #FF6347; color: white; }
    li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>

In the example above, the :not selector is used to distinguish the background color of the current class, which indicates the current menu, from the other menu items.

By adjusting the float value of the ul or ol element, you can configure a right-side menu as well as a left-side menu.

<ul>
    <li><a href="/index.php">Home</a></li>
    <li><a href="/html/intro">HTML</a></li>
    <li><a class="current" href="/css/intro">CSS</a></li>
    <ul style="float:right; list-style-type:none;">
        <li><a href="/bbs/login.php">Login</a></li>
        <li><a href="/bbs/register_form.php">Sign up</a></li>
    </ul>
</ul>

In the example above, the Home, HTML, and CSS menus are aligned to the left, while the Login and Sign up menus are aligned to the right.

You can use the border property to display boundaries in a navigation bar.

<style>
    li { float: left; border-right: solid 1px white; }
    li:last-child { border-right: none; }
<style>