CSS Menu Design

 

CSS Menu Design

In this Section we will learn about CSS Menus Design, Menus are the main

 tools for visitors to navigate throughout a website.CSS comes up with very

 simple vertical and horizontal menus that can be easily customized by the

 developer.

Types of CSS Menu

1) Vertical Menu

2) Horizontal Menu

3) Dropdown Menu

4) Horizontal Menu with Nested Submenu

CSS Navigation bar

A Navigation bar or navigation system comes under GUI that helps the

 visitors in accessing information. It is the UI element on a webpage that

 includes links for the other sections of the website.

Ex.1 Create Navigation Bar Items.

CSS Code

 

 

Output

 

Ex.2 Now Let’s remove the bullets and the margins and padding from the list.

 Add some heading in top of the web Page.

CSS Code

Output

 

Vertical Navigation Bar

This lesson, you will learn how to create a vertical navigation menu with

 buttons using HTML and CSS code. The menu buttons will change color

 when the mouse hovers over them or when a page has been visited.

 

Ex.1

CSS Code

Output

Ex.2

Create a Basic Vertical Navigation bar with a background color and change

 the background color of the links when user moves the mouse over them.

CSS Code

Output

 

Border Property in Navigation bar

Add the border property to <ul> add a border around the navigation bar. If

 you also want borders inside the navigation bar, add a border-bottom to all

 <li> elements, except for the last one

Ex.1

CSS Code

Output

Ex.2

Create a basic Horizontal navigation bar with a background color and change

 the background of the links when the user moves the mouse over them. Add

 an “active” class to the current link to let the user know Page he is on.

CSS Code

Output

 

Ex.3

Create Fixed Full-Height Side Navigation Bar.

 

CSS Code

Output

 

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar.

 Using inline or floating list items.

Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements

 as inline, in addition to the "standard" code from the previous page.

CSS Code

Output

Floating List Items

Another way of creating a horizontal navigation bar is to float the <li>

 elements, and specify a layout for the navigation links.

CSS Code

 

Output

 

Ex.1

Create a basic horizontal navigation bar with a dark background color and

 change the background color of the links when the user moves the mouse

 over them.

CSS Code

Output

Drop Down Menu in Side Navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.

CSS Code

Output

 

Dropdown Image

How to add an image and other content inside the dropdown box.

CSS Code

Output