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?
by Jian Shuo Wang on September 1, 2007 under Backstage
- Load All Articles on Category Page October 3, 2009
- Recovered Old Files on Wangjianshuo.com September 23, 2009
- Full Content on Home Page of my Blog? August 21, 2009
- Google Translate for Blog Articles August 17, 2009
- How Many of My Readers Use FaceBook? December 5, 2008
- Google AdSense for Feed September 3, 2008
- Experiment on Natural Search September 2, 2008
- Improving User Portal on Wangjianshuo.com March 15, 2008
- Analysis of Links and Ways to Improve March 14, 2008