Best Practices To Design a Perfect HTML Navigation Bar ~ vZhai: Info Sharing Blog

Best Practices To Design a Perfect HTML Navigation Bar

Best Practices To Design a Perfect HTML Navigation Bar: "
The navigation bar is an inevitable element in every website. In this post I want to share with you some simple practices and suggestions aimed at designing a perfect HTML navigation bar.

Let’s start illustrating the typical HTML structure. Here is a schematization of a typical navigation bar that contains some links:

The HTML code is really simple, nothing more than <div> layer with an unordered list inside. As you probably know, the HTML5 specification introduced a new element that identifies the navigation bar which is the <nav> tag. The <nav> tag substitutes the more general <div> tag but, as you can see in the following code, it doesn’t change the conceptual structure of the navigation bar.

HTML 4 Code

<div id="nav">



<ul>



<li><a href="/index">Home</a></li>



<li><a href="/link1">Link 1</a></li>



<li><a href="/link2">Link 2</a></li>



<ul>



</div>

HTML 5 Code

<nav>



<ul>



<li><a href="/index">Home</a></li>



<li><a href="/link1">Link 1</a></li>



<li><a href="/link2">Link 2</a></li>



<ul>



</nav>

Using an unordered list for organizing the navigation bar is always a good practice to follow especially when you have to implement a little bit more complex interaction between main links and any submenus. Furthermore, this approach allows you to have more control on the CSS code of the various elements that compose the navigation, thus simplifying the customization.

Here is an example of HTML structure for a basic navigation bar with submenus:

<div id="nav"> <!-- nav container -->



<ul>



<li><a href="/link1">Link 1</a> <!-- main item -->



<ul> <!-- item submenu -->



<li><a href="/s-link1">Sub Link 1</a></li>



<li><a href="/s-link2">Sub Link 2</a></li>



</ul> <!-- close submenu -->



</li>



<ul>



</div>

CSS code suggestions

Now take note of the following three simple suggestions for great CSS code. Set the “height” attribute for the tag <li> equal to the height attribute of the <ul> tag:

For a perfect vertical alignment of the text, set the “line-height” attribute for the tag <li> equal to the height attribute of the <ul> tag:

To make the area of your link fully clickable set the attribute “display” of the tag <a> to block:

Interaction with pages

You can create various kind of interactions between the items of the navigation bar and a certain page visited by the user. A simple interaction consists in changing the status of a specific tag to “active”, for example, if the current page is the home page or if the current post is in a specific category which is present in the navigation bar. In the picture, the current post is in the category “Apple” and the tab “Apple” in the navigation bar is “active”.

If you use WordPress you can use the following code for identify the home page and make the “home” tab of your navigation bar “active”:

<?php if(is_home()){ ?>



<li class="active">Home</li>



<?php } else { ?>



<li><a href="<?php echo get_option('home'); ?>">Home</a></li>



<?php } ?>

If you use a category-based navigation bar you can use the following code to highlight a tab of a specific category when the post is in that category. For example, if your navigation bar has a tab “Apple” and the current post is in the category “Apple” you can make the tab “active” using this code:

<?php



global $post;



$categories = get_the_category();



foreach($categories as $category) {



$cat_name = $category->cat_name;



} ?>



<ul>



<?php if(!is_home() && $cat_name=='Apple'){?>



<li class="active-sn">Apple</li>



<?php } else { ?>



<li><a href="<?php echo get_option('home'); ?>/category/apple">Apple</a>



</li><?php } ?>



<ul>