Search within TutorialsPark

CSS3 Navigation


Use CSS to create a Navigation bar to navigate to easily and quickly.


CSS3 Navigation Bar

1.A Navigation Bar is a list of links arranged horizontally or vertically inorder to navigate easily and quickly to different webpages.

2.The skeleton of the navigation is created using list elements like <ul> , <ol> and <definition>

3.Then CSS is used to style the links and create a horizontal or Vertical Navigation Bar


Creating a Vertical Navigation Bar

1.A normal list can be converted to a vertical navigation bar using CSS very easily as given below:

a.) Create an unordered list without bullet list (using list-style-type:none)

b.) Remove the default margins and padding.

c.) Set the display property to block.

d.) Style the links using margins, padding , fonts, hover etc

CSS Example : Vertical Menu

Give it a TRY! » Note: Developers can also use new features like border-radius, tranforms, hover effects etc.


Creating a Simple Horizontal Navigation Bar

To create a Horizontal Navigation Bar the process is same as that for a Vertical Navigation

The only difference is that the display property is set as inline, so that the all links are displayed in a single line.

CSS Example: Horizontal Navigation

Give it a TRY! » Note: The filter property is supported only on webkit (chrome and safari) browsers


Creating a Simple Horizontal Navigation Bar

A Horizontal drop-down menu can be created to have .

CSS Example: Drop-Down Menu

Give it a TRY! » Note: The filter property is supported only on webkit (chrome and safari) browsers