How to create basic navigation menus using html and css?
Navigation Bar is very
important for any website especially for the web designer how it looks the
website is. However, simple html code cannot provide beautiful navigation bars without the help of Cascading Style
Sheet (CSS). With that, a tedious
html code can transform into attractive or good looking and easy-to-use
navigation menus. Exploring CSS can help a lot in designing a website, the
position of text, alignment, border, color, images, etc. Unfortunately, avoid
using excessive CSS because there are other browsers does not support the compatibility
features of CSS.
Now, navigation bar needs
standard HTML syntax.
<html>
<head>
<title></title>
<link
rel=StyleSheet href=”navStyleSheet.css” type=”text/css” media=screen>
</head>
</head>
<body>
<div
id=”navStyleSheet-menu”>
<ul>
<li><a
href=”#”>Home</a></li>
<li><a
href=”#”>Product</a></li>
<li><a
href=”#”>Service</a></li>
<li><a
href=”#”>About</a></li>
</ul>
</div>
</body>
</html>
When you noticed between the opening and closing tag of
head, there’s include <link rel=StyleSheet href=”navStyleSheet.css” type=”text/css”
media=screen> because we import CSS from external source into our HTML tag
in order to use CSS script to control our navigation menus.
 |
| Fig. 1 |
 |
| Fig. 2 |
#navigation-menu{
float:left;
background-color:#333;
}
That’s how it looks when it put css script. Don’t worry,
that’s not the end with our tutorials, lets work further.
 |
| Fig. 3 |
#navigation-menu ul{
padding: 0;
margin: 0;
}
when you saved and
press F5, it looks like sample shown in figure 3.
 |
| Fig. 4 |
#navigation-menu ul li{
list-style-type:none;
display:inline;
}
We now created simple navigation bar, when you notice the id navigational-menu ul li, because
of the css script list-style:none we omit
bullets in every list item and it diplay inline. If you change it inline into
block, it returns to the normal view like in figure 3.
 |
| Fig. 5 |
#navigation-menu ul li a{
display:block;
padding: 5px
10px;
float:left;
color:#fff;
text-decoration:none;
border-right:
1px #fff dotted;
}
At the beginning, we created a non – sense navigation bar. Now, noticed how powerful CSS? It is more appreciatable and it looks
beautiful when they applied. That’s the essence of CSS!
Visit w3schools.com for more information about HTML and
CSS.
0 comments:
Post a Comment