WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Navigation Bar


Demo: Navigation Bars


Navigation bar

Familiar with the navigation bar is very important for any website.

Using CSS you can turn into a beautiful navigation bar instead of a boring HTML menu.


Navigation bar = List of links

A navigation bar is required as a standard HTML foundation

. In our example we will build a standard HTML list navigation bar.

The navigation bar is basically a list of links, so it makes sense to use the <ul> and <li> elements:

Example

<ul>
  <li><a href="default.php">Fashion</a></li>
  <li><a href="entertainment.php">entertainment</a></li>
  <li><a href="Contact Us.php">Contact Us</a></li>
  <li><a href="Advertise.php">Advertise</a></li>
</ul>
Try it yourself »

Now let's remove margins and padding from the list:

Example

ul { list-style-type: none; margin: 0; padding: 0; }
Try it yourself »

Example analysis:

  • list-style-type: none-remove the small flag in front of the list. A navigation bar doesn't need list tags
  • Remove the browser's default settings and set margins and padding to 0

The code in the example above is the standard code used for vertical and horizontal navigation bars.

Vertical navigation bar

Example

a { display:block; width:60px; }
Try it yourself »

Example description:

  • display: block-display the link of a block element, making the whole a clickable link area (not just text), which allows us to specify the width
  • width: 60px-The block element has a maximum width by default. We want to specify a width of 60 pixels
Note: Be sure to specify the width of the<a> element in the vertical navigation bar. If you omit the width, IE6 may produce unexpected results.

Example

ul { list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
    } li a { display: block;
    background-color: #dddddd;
    }
Try it yourself »

Vertical Navigation Bar Examples

Create a simple instance of a vertical navigation bar, and change the background color when the mouse moves to the option:

Example

ul { list-style-type: none ; margin: 0 ; padding: 0 ; width: 200 px ; background-color: # f1f1f1 ; } li a { display: block ; color: # 000 ; padding: 8 px 16 px ; text-decoration: none ; } /* Mouse over the option to modify the background color * / li a : hover { background-color: # 555 ; color: white ; }
Try it yourself »

Active/Current Navigation Link

After clicking on the option, we can add the "active" class to standardize which option is selected:

Example

.active { background-color: #4CAF50; color: white; }
Try it yourself »

Center Links & Add Borders

You can center the link by adding a text-align: center style on <li> or <a>. You can add a border property to border <ul> to make the navigation bar bordered. If you want to add a border on each option, you can add a border-bottom on each <li> element:

Example

ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
Try it yourself »

Fixed navigation bar at full screen height Fixed navigation bar at full screen height

Create a full-stature, "sticky" side navigation:

Example

ul { list-style-type: none ; margin: 0 ; padding: 0 ; width: 25 % ; background-color: # f1f1f1 ; height: 100 % ; /* Full screen height * / position: fixed ; overflow: auto ; /* Allow scrolling if the navigation bar has many options * / }
Try it yourself »

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Use inline or float list items.

Both methods are fine, but if you want to link to have the same size, you must use the floating method.

Inline list items

One of the ways to create a horizontal navigation bar is to specify the element. The above code is standard inline:

Example

li { display:inline; }
Try it yourself »

Instance analysis:

  • display: inline;-By default, <li> the element is a block element. Here we remove each list item before and after the newline character to display a line.

Floating List Items

The links in the above example have different widths.

For all link widths equal, float the <li> element and specify the width of the <a> element:

Example explained:

  • float: left-slides using float elements next to each other
  • display: block-display the link of a block element, making the whole a clickable link area (not just text), which allows us to specify the width
  • width: 60px-The block element has a maximum width by default. We want to specify a width of 60 pixels

Example

ul { list-style-type: none ; margin: 0 ; padding: 0 ; overflow: hidden ; background-color: # 333 ; } li { float: left ; } li a { display: block ; color: white ; text-align: center ; padding: 14 px 16 px ; text-decoration: none ; } /* Mouse over the option to modify the background color * / li a : hover { background-color: # 111 ; }
Try it yourself »

Horizontal Navigation Bar Examples

Create a horizontal navigation bar and modify the background color after moving the mouse to the option.

Example

ul { list-style-type: none ; margin: 0 ; padding: 0 ; overflow: hidden ; background-color: # 333 ; } li { float: left ; } li a { display: block ; color: white ; text-align: center ; padding: 14 px 16 px ; text-decoration: none ; } /* Mouse over the option to modify the background color * / li a : hover { background-color: # 111 ; }
Try it yourself »

Active/Current Navigation Link

After clicking on the option, we can add the "active" class to standardize which option is selected:

Example

.active { background-color: #4CAF50; }
Try it yourself »

Right-Align Links

Right-align the rightmost option in the navigation bar (float: right;):

Example

<ul>
  <li><a href="#Fashion">Fashion</a></li>
  <li><a href="#entertainment">entertainment</a></li>
  <li><a href="#Contact Us">Contact Us</a></li>
  <li style="float:right"><a class="active" href="#Advertise">Advertise</a></li>
</ul>
Try it yourself »

Border Dividers

Add the border-right property to <li> to make connect dividers:

Example

/* Add the dividing line except the last option (last-child) * / li { border-right: 1 px solid # bbb ; } li : last-child { border-right: none ; }
Try it yourself »

Fixed Navigation Bar

Make the route bar remain at the best or the base of the page, notwithstanding when the client look over the page:

Fixed Top

You can set the page's navigation bar to be fixed at the head or bottom:
ul { position: fixed; top: 0; width: 100%; }
Try it yourself »

Fixed Bottom

ul { position: fixed; bottom: 0; width: 100%; }
Try it yourself »

Gray Horizontal Navbar

Example

ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }
Try it yourself »