Results 1 to 7 of 7

Thread: ddlevelsmenu uber menu has problem with submenus

  1. #1
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default ddlevelsmenu uber menu has problem with submenus

    1) Script Title: ddlevelsmenu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../generator.htm

    3) Describe problem: Using the uber menu, the mobile submenu comes up with the submenu items, but the back arrow has the word 'null' instead of the name of the submenu. It seems to be caused by the <scan> around the submenu name, but the <scan> is required for the uber menu.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    <scan>? There isn't such a thing as a <scan> tag. Make sure that you are using a <span> tag instead and if you need more help, Or if the problem persists, please post a link to your page.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default ddlevelsmenu uber

    Quote Originally Posted by Beverleyh View Post
    <scan>? There isn't such a thing as a <scan> tag. Make sure that you are using a <span> tag instead and if you need more help, Or if the problem persists, please post a link to your page.
    The <scan> above was a typo. http://sandhillsmoaa.com/ , The Gallery menu item is the submenu item. This is the code:
    <li><a href="gallery.html"rel="ddsubmenu1"><span>Gallery</span></a></li>
    Last edited by Beverleyh; 05-27-2015 at 12:50 PM. Reason: formatting

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Hmmm, there appears to be a span-related bug in the js file (it doesn't like the extra element).

    You can fix it by reverting back to the span-less version though. The span element is only needed to hold the extra rounded right corner image, but you can use a different technique and put both rounded corner images on the main .ubercolortabs a element instead.

    Here's what to do...

    1. Remove all the <span> tags from the main/parent menu, so the markup looks like this;
    Code:
    <li><a href="gallery.html" rel="ddsubmenu1">Gallery</a></li>
    2. In the topbar.css file, replace these lines;
    Code:
    background: #0D3684 url(roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
    padding: 0 0 1px 3px;
    With these lines;
    Code:
    background: url(roundright.gif) no-repeat right top, url(roundleft.gif) no-repeat left top;
    background-color: #0D3684;
    padding: 7px 9px 4px 9px;
    3. In the same topbar.css file, delete these lines;
    Code:
    .ubercolortabs a span{
    float: left;
    display: block;
    background: transparent url(roundright.gif) no-repeat right top; /*right corner image*/
    padding: 7px 9px 3px 6px;
    cursor: pointer;
    }
    
    .ubercolortabs a span{
    float: none;
    }
    
    ...
    
    .ubercolortabs a:hover span{
    background-color: transparent;
    }
    This multiple background-image technique works in all modern browsers and IE9+. IE8 users will just see square cornered tabs.

    While I'm here, I think that there many be another underlying problem with the menu though -- nothing to do with the above changes - just an observation I made while comparing the DD installations to the zip package download. I opened the default demo page in IE8 and IE9 modes to test, and I they appear to be broken (no red arrows or drop-downs/fly-outs). May the mobile update has lost backwards compatibility. I'll file a bug report for ddadmin to pick up.
    Last edited by Beverleyh; 05-27-2015 at 01:41 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    marymcc (05-27-2015)

  6. #5
    Join Date
    Jul 2013
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Beverleyh,
    It works beautifully. I knew the <span> was the problem, but didn't know how to fix it. Thank you so much for your help. I'll have to watch for a fix for the IE8 & 9 problem.
    Mary

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

    Default

    Thanks for notifying me of the IE8/9 issue. To fix it, inside the .js file, find the line:

    Code:
    mql: window.matchMedia("screen and (max-width: 700px)"), // CSS media query to switch to mobile menu when matched
    and change that to:

    Code:
    mql: (window.matchMedia)? window.matchMedia("screen and (max-width: 700px)") : {matches:false, addListener: function(){}}, // CSS media query to switch to mobile menu when matched
    I'll update the official .js file soon with the changes.

    Regarding the other issue, I'm not sure I understand actually:

    but the back arrow has the word 'null' instead of the name of the submenu.
    There is no back arrow used in the menu, only a down and right pointing arrow. They both show up inside the Uber menu for me.
    DD Admin

  8. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    This demonstrates the problem ddadmin: http://fofwebdesign.co.uk/template/_...smenu/demo.htm

    Top-level menu markup provided by the generator is different to the standard menu and looks like this;
    Code:
    <div id="ddtopmenubar" class="ubercolortabs">
    <ul>
    <li><a href="http://www.dynamicdrive.com"><span>Home</span></a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1"><span>DHTML</span></a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2"><span>CSS</span></a></li>
    <li><a href="http://www.dynamicdrive.com/forums/"><span>Forums</span></a></li>
    <li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3"><span>Web Tools</span></a></li>
    </ul>
    </div>
    1. Reduce the browser width to trigger the mobile menu.

    2. Click on any of the top-level headings that have subs (DHTML, CSS and Web Tools)

    3. The first line (the title) says "< null"

    This only happens on the first sub-level (because of the extra span in the markup). Deeper sub-menus carry the correct title.

    Tested in IE11 and Chrome (same issue)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. ddlevelsmenu problem with zoom / problem with refresh
    By BodoF in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 11-22-2012, 07:30 PM
  2. Amending Uber Round Color Tabs
    By eugenedonaghy in forum CSS
    Replies: 0
    Last Post: 01-16-2010, 09:23 PM
  3. ddlevelsmenu submenus dismiss too quickly
    By jbarnesciti in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-25-2009, 04:44 PM
  4. Slashdot-like menu with submenus title problem
    By Peter2007 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-18-2008, 12:01 AM
  5. Jims DHTML Menu Problem - Mouseout Submenus
    By elogicmedia in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 06-26-2005, 05:46 AM

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
  •