CSS Menu Design
Css menu design
Webpage menus play necessary part on the web. When designing menus, usability is the key. In this section we are going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS step by step. We assume that you have a basic knowledge of HTML and CSS.
A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements make perfect sense.
Create Navigation menu items. Example
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home"> Home </li>
<li><a href="#About">About us</li>
<li><a href="#courses">Courses</li>
<li><a href ="#contacts">Contacts</li>
<li><a href="#downloads">Downloads</li>
</ul>
</body>
</html>
Create Navigation menu output
Create Navigation menu (margins, padding)
2. Example
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
</style>
</head>
<body>
<h1>college of Computer science</h1>
<ul>
<li><a href="#home">Home </li>
<li><a href="#About">About us</li>
<li><a href="#courses">Courses</li>
<li><a href="#contact">Contact</li>
<li><a href="#downloads">Downloads</li>
</ul>
</body>
</html>
Create Navigation menu output
Vertical Navigation Bar
A vertical navigation bar is a collection of links on each page's left or right side. Merits of Vertical Navigation. A more considerable number of top-level linkages is possible.
All the content is visible Vertical menus allow you to list all of your website's pages along the side of the page, while in a horizontal menu many of the website's pages are hidden from view in drop down menus. This makes vertical menus easier for website navigation and a great option for long, single-page websites.
Vertical Nevigation Bar Example
<!DOCTYPE html>
<html>
<head>
<style>
ul{
lilist-style-type: none;
margin: 0px;
padding:0px;
}
li a{
display:block;
background-color: #f09d28;
text-align: left;
text-decoration:none;
width:100px;
padding: 8px 10px;
color:yellow; }
</style>
</head>
<body>
<h1>College of Computer science</h1>
<ul>
<li><a href="#home">Home</li>
<li><a href="#About">About us</li>
<li><a href="#courses">Courses</li>
<li><a href="#downloads">Downloads</li>
<li><a href="#Contact">Content</li>
</ul></body> </html>
Vertical Nevigation Bar output
Create a basic vertical Nevigation Bar with a background color and Change the background color of the when links when the user moves the mouse over them.
For Example
<!DOCTYPE html>
<html>
<head>
<style>
ul(list-style-type: none;
margin: 0px;
padding: 0px;
}
li a{
display:block;
background-color:#f09d28;
text-align:left;
text-decoration:none;
width:100px;
padding: 8px 10px;
color: yellow;
}
li a:hover
{
background-color:red;
opacity:0.8;
color:white; }
</style>
</head>
<body
<h1>College of Computer science</h1>
<h3> change the link color on hover </h3>
<ul>
<li><a href="#home">Home</li>
<li><a href="#About">About us</li>
<li><a href="#courses">Courses</li>
<li><a href="#downloads">Downloads</li>
</ul> </body>
</html>
