CSS Menu Design
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 .
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.
Everything is apparent. While many of the pages on your website are hidden from view in drop-down menus in a horizontal menu, vertical menus let you list every page down the side of the page. Because of this, vertical menus are a fantastic alternative for lengthy, single-page websites and make navigating them easier.
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>
Post a Comment