Results 1 to 5 of 5

Thread: Slashdot Menu - Expanding a specific Submenu

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

    Default Slashdot Menu - Expanding a specific Submenu

    1) Script Title: Slashdot Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

    3) Describe problem:
    Code:
    // Additional methods...
    var firstSubmenu = myMenu.submenus[0];
    myMenu.expandMenu(firstSubmenu);      // Expand a submenu
    myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
    myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded
    
    myMenu.expandAll();                   // Expand all submenus
    myMenu.collapseAll();                 // Collapse all submenus
    I had tried to expand a submenu "myMenu.expandMenu(firstSubmenu);". But everytime when the page load, all menu are collapsed.

    Can anyone share or guide me in regards to expanding a specific submenu?
    Last edited by jscheuer1; 07-08-2012 at 02:19 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It's a little misleading. The word:

    firstSubmenu
    is just a placeholder or example. You need to identify the DOM node of the submenu. So let's say you add an id to the markup (addition highlighted):

    Code:
       <div style="float: left" id="my_menu" class="sdmenu">
          <div id="firstone">
            <span>Online Tools</span>
            <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
            <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
            <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
            <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
            <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
            <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
          </div>
          <div>
            <span>Support Us</span>
            <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
            <a href="http://www.dyn . . .
    Then you can do:

    Code:
    myMenu.expandMenu(document.getElementById('firstone'));
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    It's a little misleading. The word:



    is just a placeholder or example. You need to identify the DOM node of the submenu. So let's say you add an id to the markup (addition highlighted):

    Code:
       <div style="float: left" id="my_menu" class="sdmenu">
          <div id="firstone">
            <span>Online Tools</span>
            <a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
            <a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
            <a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
            <a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
            <a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
            <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
          </div>
          <div>
            <span>Support Us</span>
            <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
            <a href="http://www.dyn . . .
    Then you can do:

    Code:
    myMenu.expandMenu(document.getElementById('firstone'));
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Thanks! It works perfectly!

  4. #4
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I'm having a similar issue but I can't figure out why, see below.....

    Quote Originally Posted by BearBug View Post
    Thanks! It works perfectly!
    For all menu links under one category, the coding is class="expand" while other categories are "collapsed" until they choose another category, then that category is expanded when they choose all the menu items while the first category is collapsed. I did this for each individual file and it worked perfectly in both IE 8 and google chrome on my computer (prior to uploading the website). When testing it from our server, it doesn't do what it's supposed to do. (collapse vs. expand)

    First 5 asp files under upcoming events have this coding:

    HTML Code:
    <div align="left" class="expand">
    <span>Upcoming Events</span>
            <a href="luncheons.asp">Council Meetings/Member Lunches</a>
    		<a href="agm.asp">Annual General Meeting</a>
    		<a href="ufe-dates.asp">UFE Dates</a>
    		<a href="convocation.asp">Convocation</a>
    		<a href="upcoming.asp">Professional Development</a>
    
        </div>
    			  <div align="left" class="collapsed">
            <span>Professional Opportunities</span>
            <a href="employment.asp">Employment Opportunities</a>
    		<a href="volunteer.asp">Volunteer Opportunities</a>
    		<a href="http://www.casource.com/" target="_blank">CA Source</a>
    		<a href="http://www.directorssource.com/" target="_blank">Directors Source</a>
    
        </div>
    Under professional opportunities, all asp files have this coding:

    HTML Code:
    <div align="left" class="collapsed">
    <span>Upcoming Events</span>
            <a href="luncheons.asp">Council Meetings/Member Lunches</a>
    		<a href="agm.asp">Annual General Meeting</a>
    		<a href="ufe-dates.asp">UFE Dates</a>
    		<a href="convocation.asp">Convocation</a>
    		<a href="upcoming.asp">Professional Development</a>
    
        </div>
    			  <div align="left" class="expand">
            <span>Professional Opportunities</span>
            <a href="employment.asp">Employment Opportunities</a>
    		<a href="volunteer.asp">Volunteer Opportunities</a>
    		<a href="http://www.casource.com/" target="_blank">CA Source</a>
    		<a href="http://www.directorssource.com/" target="_blank">Directors Source</a>
    
        </div>
    Like I said, it works well when testing on my computer through both browsers but no longer works upon uploading it. I didn't change anything in the js file. If you require more from me, please let me know. I hope you can help
    Last edited by keyboard; 11-07-2012 at 07:15 PM. Reason: Format: Html Tags [html][/html]

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    If something works locally but not on the live server, the first thing I check is that all of the file paths are correct.

    If you need more help than this, you should start a new thread on the topic.

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
  •