Simple CSS menu navigation with example
This tutorial is useful to
beginners
We saw menu navigation in
many websites, in many cases, as well as menu navigation is very important for
develop the website.
So we can learn clearly about
menu navigation below and I explained each and every line clearly with an
example
HTML Code:
<ul class=”menu_nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
In above HTML example we used
<ul>,<li>,<a> tags
<ul> “ unorder list “ : it is display the list in unorder.
<li> “ list “ :it is display the text in list.
<a> “ anchor ”, href is attribute. Here it is used as link.
CSS Styles:
ul.menu_nav
{
width: 660px; /*menu navigation width*/
background: #bbb; /*background color for menu navigation */
border: 2px solid #999; /*menu navigation border line size and color*/
border-radius:5px; /*menu navigation 4 border turning point
radius, it is display like curve type*/
}
In above css styles “
menu_nav “ is a class
ul.menu_nav li
{
display: inline;
}
inline :
This value causes an element to generate one or more inline
boxes.
ul.menu_nav li
a
{
text-decoration:
none;
color: #FFF;
font-family: 'Segoe
UI',Arial,sans-serif;
font-size:
16px;
font-weight: bold;
padding: 10px 15px; /*it is shows
the width and height */
display: inline-block;
}
This value causes an element to generate a block box, which
itself is flowed as a single inline box, similar to a replaced element. The
inside of an inline-block is formatted as a block box, and the element itself
is formatted as an inline replaced element.
ul.menu_nav
a:hover
{
background: #999;
color: #8fde62;
}
When mouse is moved over an element,
that will change the background color and text color.
