PDA

View Full Version : Drop Down Menus in Blogger



Awaken
03-19-2008, 03:26 PM
I have been trying to get a Drop Down Menu going in Blogger forever. I can easily get it functioning on a separate HTML page, but just inserting code into the HTML/Javascript segment is not working for me. Any advice or someone have a clear tutorial on how this can be done?

Thanks

This is the stuff I am trying to add.
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Awaken
03-19-2008, 07:01 PM
So I have gotten a lot of it working with some more time and effort. However, now I am stuck where my menus don't drop down directly underneath my list item. Any ideas?

http://crharvey.blogspot.com

I am using the Chrome Drop Down, except I am using background colors instead of images. Other than that it should be the same.

Thanks

ddadmin
03-19-2008, 08:02 PM
Most of the positioning problems with Chrome Menu can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<div id="dropmenu1" style="width: 160px;" class="dropmenudiv">
<a href="http://crharvey.blogspot.com/search/label/portraits">Portraits</a>
<a href="http://crharvey.blogspot.com/search/label/personal">Personal</a>
<a href="http://crharvey.blogspot.com/search/label/engagement">Engagements</a>
<a href="http://crharvey.blogspot.com/search/label/travels">Travel</a>
<a href="http://crharvey.blogspot.com/search/label/nature">Nature</a>

<a href="http://crharvey.blogspot.com/search/label/videos">Videos</a>
</div>

<div id="dropmenu2" style="width: 160px;" class="dropmenudiv">
<a href="http://crharvey.blogspot.com/SOMEPOSTHEREABOUTUS">Erin Harvey</a>

<a href="http://crharvey.blogspot.com/SOMEPOSTHEREABOUTUS">Chris Harvey</a>
</div>


<div id="dropmenu3" style="width: 160px;" class="dropmenudiv">
<a href="http://www.erinchris.com">Main Website</a>
</div>




<div id="dropmenu4" style="width: 160px;" class="dropmenudiv">
<a href="mailto:imagesADDRESSHERE">Email Both of Us</a>
<a href="mailto:erinADDRESSHERE">Email Erin</a>
<a href="mailto:chrisADDRESSHERE">Email Chris</a>
<a href="ContactFormLink">Email Erin & Chris</a>
</div>


<div id="dropmenu5" style="width: 165px;" class="dropmenudiv">

<a href="http://www.armindefiesta.com/">Armin DeFiesta</a>
<a href="http://www.thebecker.com/">Becker</a>
<a href="http://www.davidjay.com/">David Jay</a>
<a href="http://www.melissajill.com/">Melissa Jill</a>
<a href="http://www.jcsphoto.com/newsite/index.html">Jessica Claire</a>
<a href="http://www.marybethtyson.com/">Mary Beth Tyson</a>
<a href="http://www.jasminestarphotography.com/">Jasmine Star</a>

</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>
</body>

cat1553
03-19-2008, 09:10 PM
I have been trying to get a Drop Down Menu going in Blogger forever. I can easily get it functioning on a separate HTML page, but just inserting code into the HTML/Javascript segment is not working for me. Any advice or someone have a clear tutorial on how this can be done?


Your problem isn't where the drop down DIVs are located. It's because your Blogger template CSS code is screwing with the menu's CSS. Delete the position:relative; from the outer-wrapper, wrap2 and header-wrapper CSS styles. That relative positioning is not needed for your template, your blog displays ok without it (at least in Firefox, I didn't try any others). Once you delete that positioning in those 3 places that you'll find your menu works just fine.

I've been using a heavily modified v2.01 of the Chrome CSS Drop Down Menu on my private Blogger blog for some time now. It works great at displaying Blogger widgets like the Archives, Labels, RSS Feeds, etc, etc. I don't like those things cluttering up the sidebar; in fact I don't even have a sidebar, just the header, menu and blog posts. Everything else drops out of the menu. After trying almost every menu system out there, I've found it's the only dropdown menu system that works "out of the box", so to speak, with Blogger templates. All the others have one problem or another with this or that brand browser, or with the Blogger XML parser itself. The Chrome Drop Down Menu flat out works. Kudos to the Dynamic Drive guys.