Anyway so you do it with the help of one website called pixopoint: http://pixopoint.com/products/suckerfish_css/
- On pixopoint, you can customize your drop down menu the way you wish by just entering the color code without #. You can get the code by clicking on the little palette on the left of each menu. Then click on submit design and look at the preview (the drop down menu of the current page is what changes so no new page actually loads). Once you found what you want copy the css code that they give you at the bottom of the page.
- Go to Design -> Edit HTML and pass the css code obtained from pixopoint just before this line: ]]></b:skin>
- Save your template
- For proper placement of the drop down menu erase what's between /*Tabs and /*Headings in your template
- Save your template
- Because you don't want your drop down menu to go behind posts or w/e, you need to add z-index:100; right next to the semicolumn of the position:absolute; which is below #suckerfishnav ul { so like that:
#suckerfishnav ul {
position:absolute;z-index:100;
- Save your template
- Pass your html by going to Design->Page Elements->Add a Gadget then choose html.
- Pass this code:
<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
<li><a href="#">Sub link</a></li>
</ul>
</li>
</ul>
Of course you gotta change the "#" into the address of the link and "link" and "sub link" by whatever you want your titles to be. I suggest you play around with those to see the changes.
As an example here is what mine looks like:
<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
<li><a href="http://www.humaninthemirror.blogspot.com">Home</a></li>
<li><a href="#">Recipes</a>
<ul>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Sugary">Sugary</a></li>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Sugary%20Creams">Sugary Creams</a></li>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Salty">Salty</a></li>
</ul>
</li>
<li><a href="http://humaninthemirror.blogspot.com/search/label/Travel">Travel</a>
</li>
<li><a
href="http://humaninthemirror.blogspot.com/search/label/HTML%20for%20Dum%20Me">HTML</a>
</li>
<li><a href="#">Misc.</a>
<ul>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Shopoholic">Shopoholic</a></li>
<li><a
href="http://www.humaninthemirror.blogspot.com/search/label/Movie%20Critic">Movie Critic</a></li>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Animal%20Rights">Animal Rights</a></li>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Madctuality">Madctuality</a></li>
<li><a href="http://www.humaninthemirror.blogspot.com/search/label/Touchy%20Topics">Touchy Topics</a></li>
</ul>
</li>
</ul>
<br /><br /><br />
- Note the <br/> at the end? This is in case your drop down menu is behind the text because there are too many items in it. Adding as many as you want of these <br/> will fix that.
- In IE (which NOBODY should use... really), you might get stuck with sticky menu when you hover over them. To fix that go to Design->Template Designer->Advanced->Add Css and add these lines:
#suckerfishnav li:hover, #suckerfishnav li.hover {
position:static;
}
- That's it folks!!
No comments:
Post a Comment