Results 1 to 4 of 4

Thread: Drop Down Menus in Blogger

  1. #1
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down Menus in Blogger

    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/dynamici...rome/index.htm

  2. #2
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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>

  4. #4
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Awaken View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •