Have you noticed the change in the header of my blog? Look at this screen shot at the end of this article.

Yesterday, I added a global navigational menu to my blog. I love this change very much, and it gives people a way to dive deep into a specific category more quickly – just from any page. If you like the design, and you may wonder how you can create the same thing in your MovableType backed site? Here is a quick guideline.

HTML

This is the code I used in my template (I put it into a seperate Header module).

<div id=”nav”><MTTopLevelCategories>

<ul id=”nav_menu”><li class=”top”><a class=”top” href=”<$MTCategoryArchiveLink$>”><$MTCategoryLabel$>  </a>

<ul><MTSubCategories>

<li><a class=”nav” href=”<$MTCategoryArchiveLink$>”>  <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories>

</div>

The key here is to have a div with id nav, and then several ul with id nav_menu, then put the top level menu items inside this tag. Then have another fewl ul and put sub menu items in it. That is so simple.

CSS

In your CSS (jianshuowangstyle.css in my case), add the following code. Credit goes to Livid and his V2EX for inspiration and sample code.

div#nav {border:1px solid #CC9900;border-top:0px;clear: both;height: 21px;background-color:#F0F8FF;margin-bottom:10px;background-color:#EAEFF4;clear;both;padding:0px}

div#nav a:link, div#nav a:visited {color: #000;text-decoration: none;}

div#nav a.top:hover {background-color:#F0F8FF}

#nav_menu a.top {display: block;padding-top:5px;padding-left:15px;padding-bottom:0px;}

#nav_menu a, #nav_menu a:visited {text-decoration:none;color:333}

#nav_menu, #nav_menu ul {padding: 0;margin: 0;list-style: none;}

#nav_menu a.nav {display: block;padding-top: 2px;height: 17px;width: 14em;}

#nav_menu li {float: left;}

#nav_menu li ul {display: block;position: absolute;width: 14em;left: -999em;

opacity: .99;filter: alpha(opacity=99);background-color: #FFF;

padding-top: 3px;padding-bottom: 3px;

border-bottom: 1px solid #CCC;border-right: 1px solid #CCC;border-left: 1px solid #CCC;z-index: 99;}

div#nav a.nav:hover {color: #FFF;text-decoration: none;background-color: #667;}

div#nav a.nav:active {color: #FFF;text-decoration: none;background-color: #333;}

#nav_menu li:hover ul, #nav_menu li.sfhover ul {left: auto;}

Script?

There is no JavaScript involved in this. Weird? The trick is, set the left property to -999 em, which is far on the left side of the screen edge, and on hover, set it to auto.

If you like the functions, just feel free to use the code (CSS, and HTML), and you get it.

For my readers, do you like this little improvement?