| « prev next » | ||
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?
Posted by Jian Shuo Wang at September 1, 2007 12:07 PM
Copyright: You are free to redistribute this work, as long as you keep this disclaimer
and this link: http://home.wangjianshuo.com/archives/20070901_how_to_add_navigation_menu_to_movabletype.htm
Wow! Good job! The navigation menu makes it much easier for anybody visiting the site to find out information about Shangai directly. Very useful indeed :)
Posted by: Ollie on September 3, 2007 6:42 AM@Ollie, thanks for the feedback. It re-assured me that this is the right way to go.
Posted by: Jian Shuo Wang (external link) on September 3, 2007 10:42 AM