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?
Comment should be must faster.
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 :)
@Ollie, thanks for the feedback. It re-assured me that this is the right way to go.
还说你英文不好。。。