Subscribe Here RSS or Email


Navigation Bar's Clickable Area, Bigger and Wider

6 comments Buzz Here
If you have noticed that my navigation bar is changed and a little bit wider and bigger, i made the clickable area a little bit bigger because i like the entire navigation space clickable and not just the text of the link.

I learned that this is actually simple to achieve. With the use of simple unstyled navigation and CSS you will have a that good looking navigation bar. Here's how to do it:

Where to Start?
Let's start with simple navigation menu

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

Next...lets add the CSS (This is Horizontal) to add style and make it look good.

If you add this CSS the text remains the only clickable area therefore we will just add the display property to the <li> to command the html of how they should behave or displayed in your site.

This are the code we need to add to complete the process.
display: block; --- this is to fill the entire area
padding: 10px 20px; --- This is to determine the size of the clickable area.

We also need to add html <div> tag in our navigation menu to format
just one section and not cover all links.

Add this to your navigation menu
<div id="navlink"> and close </div> below the menu: Here's what it look like now!

<div id="navlink">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

Now here's the final CSS Code:

#navlink ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
#navlink ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
#navlink ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
* html ul li a { /* this is to fix IE bug */
width: 1%;

#navlink ul li a:hover {
text-decoration: underline;
background: #000;

Then save.

I hope you find this easy to follow and learn something new.

Please let me know if you done it!

Related Posts by Categories


Leet said... at 13/9/08 02:12

thanks to drop EC and advertise in my blog
Cheers - Leet

marlyms said... at 13/9/08 08:45

helo...i would like to ask where in the layout html will i paste these codes?tnx


Iris said... at 13/9/08 10:49

Hi! Marlyms,

You can go to your dashboard, Layout then Page Element click "add a gadget" then choose HTML/Javascript then you can place them below your header, if your crosscol element is showing you can add it in their if not let me know and i will help you do it.

The CSS(Styling should be place before </b:skin>

I hope this help if not let me know.

twinks said... at 14/9/08 00:31

This is a very helpful tip.
Thanks for the share.
Have a great weekend.
Dropped ec here.

erwinator said... at 25/1/10 02:24

I didn't really get that. lol anyway I dropped on ur entrecard. ;-)

Post a Comment

I really love to read your thoughts, Reminder though that I Moderate my blog, If your intention is only to spam think twice.

For those that will comment because you want to share your thoughts i really appreciate your time. "Dofollow" Rules.


  © Blogger template 'tbn' by thebuzznutter 2008

Bring me to TOP