Navigation Bar with CSS Vertical
By Unknown - Sunday, February 10, 2013
Navigation Bar = List of Links
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 makes perfect sense:
Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Try it yourself »
Example explained:
- list-style-type:none - Removes the bullets. A navigation bar does not need list markers
- Setting margins and padding to 0 to remove browser default settings
Vertical Navigation Bar
To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:Example explained:
- display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
- width:60px - Block elements take up the full width available by default. We want to specify a 60 px width
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Navigation Bar with CSS Vertical"