CSS Navigation Bar

Skilled use of the navigation bar is very important for any website.

Using CSS you can transform into a nice navigation bar instead of a boring HTML menu.

Navigation bar = list of links

As a standard HTML basis, a navigation bar is a must. In our example we will create 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 = " #home " > Home </ A > </ li > 
  < li > < A href = " #news " > news </ A > </ li > 
  < li > < A href = " #contact " > Contact </ a > </ li > 
  < li > < A the href = " #about " > about </ A > </ Li > 
</ UL > 

Now, let’s remove the margin and padding from the list:

Example

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

Example analysis:

  • list-style-type:none-Remove the small flag in front of the list. A navigation bar does not need list markers
  • Remove the default settings of the browser and set the margin and padding to 0

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

Vertical navigation bar

In the above code, we only need the style of the <a> element to create a vertical navigation bar:

Example

a { 
	display: block;
	width: 60 px;
}

Example description:

  • display:block-displays the link of the block element, so that the whole becomes a clickable link area (not just text), it allows us to specify the width
  • width:60px-The block element is the maximum width by default. We want to specify a width of 60 pixels

Tip: Check example of a vertical navigation bar complete style .

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 effects.

Vertical navigation bar example

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

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 ;
} /* Move the mouse to the option to modify the background color */ 
li a :hover { 
	background-color: #555 ;
	color: white ;
}

Active/current navigation bar instance

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

Example

.active { 
	background-color: #4CAF50 ;
	color: white ;
}

Create link and add border

You can add text-align:center style to <li> or <a> to center the link.

You can add a border attribute to the border <ul> to make the navigation bar have a border. If you want to add a border to each option, you can add border-bottom to each <li> element :

Example

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

Fixed navigation bar at full screen height

Next we create a fixed navigation bar with full screen height on the left and scrollable content on the right.

Example

ul { 
	list-style-type: none ;
	margin: 0 ;
	padding: 0 ;
	width: 25 % ;
	background-color: #f1f1f1 ;
	height: 100 % ; /* Full screen height */ 
	position: fixed ; 
	overflow: auto ; /* If there are many options in the navigation bar, scrolling is allowed */ 
}

Note: This example can be used on mobile devices.

Horizontal navigation bar

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

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

Inline list item

One way to create a horizontal navigation bar is to specify elements. The above code is standard inline:

Example

li { 
	display: inline;
}

Example analysis:

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

Floating list item

In the example above, the links have different widths.

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

Example

li { 
	float: left;
} 
a { 
	display: block;
	width: 60 px;
}

Example analysis:

  • float:left-slides using floating block elements are next to each other
  • display:block-displays the link of the block element, so that the whole becomes a clickable link area (not just text), it allows us to specify the width
  • width:60px-The block element is the maximum width by default. We want to specify a width of 60 pixels

Horizontal navigation bar example

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 ;
} /* Move the mouse over the option to modify the background color */ 
li a :hover { 
	background-color: #111 ;
}

Active/current navigation bar instance

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

Example

.active { 
	background-color: #4CAF50 ;
}

Link right aligned

Set the rightmost option of the navigation bar to right alignment (float:right;):

Example

< Ul > 
  < li > < A href = " #home " > Home </ A > </ li > 
  < li > < A href = " #news " > news </ A > </ li > 
  < li > < A href = " #contact " > Contact </ a > </ li > 
  < li style = " a float: right " > < A class = " Active " the href = " #about " > about </ A > </ li > 
</ Ul >

Add dividing line

<li> Use border-right style to add dividing line:

Example

/* Except for the last option (last-child), add a dividing line */ 
li { 
	border-right: 1 px solid #bbb ;
} 
li :last-child { 
	border-right: none ;
}