Blogging Tip : Creating a Horizontal Flyout/Drop Down Menu

(Photo courtersy of www.idea.com)

Above is a horizontal flyout/drop down menu picture that has a combination of 2 sub menus and 1 sub menu. It may exist horizontally or vertically. If your pointer passes over a link, a box with different options will be displayed for you to select. And if the mouse passes completely out of the menu and the navigation area, then the menu will go away after 250 miliseconds delay. In this article, I'll show you how we can create a horizontal flyout/drop down menu with ONLY one sub menu.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Click here to copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

Copy and paste the following code in front of the closing head tag.
<script src='http://onbizmy.googlepages.com/chrome.js' type='text/javascript'/>

In your template, search for these lines:-




Copy and paste the following code right after the closing div
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://onlinebiz-my.blogspot.com/">Home</a></li>
<li><a href="http://onlinebiz-my.blogspot.com/" rel="dropmenu1">Resources</a></li>
<li><a href="http://onlinebiz-my.blogspot.com/" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Save the changes. That's it. (Note - The DIVs are the drop down menus you wish to be associated with the menu bar links. Each DIV should be assigned a unique ID (code in red), which is then assigned to the desired menu bar link through the "rel" attribute and by assigning as its value the ID of the drop down menu.)