#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    7
    Rep Power
    0

    Dynamically create a menu


    I have the following html:

    Code:
    <div id="category_2232" class="category">
    <div class="column" id="forum_259962">
    <h3 class="clearfix"><a href=""><span>Internal KB Documents</span></a></h3>
    </div>
    <div class="column" id="forum_20160368">
    <h3 class="clearfix"><a href=""><span>Downloadable Extras</span></a></h3>
    </div>
    <div class="column" id="forum_20632406">
    <h3 class="clearfix"><a href=""><span>SQL Scripts</span></a></h3>
    </div>
    </div>
    which I use as a guide for creating my menu, which takes the form:

    Code:
    <li><a class="tab" href="http://">INTERNAL</a>
    <ul>
    <li><a href="http://">Internal KB Documents</a></li>
    <li><a href="http://">Downloadable Extras</a></li>
    <li><a href="http://">SQL Scripts</a></li>
    </ul>
    </li>
    I would like to take the first code, and whenever I add a new <div>, I want a corresponding <li> entry on the menu to be added automatically.


    So, really, what I want is to create a frame like this:

    Code:
    <li><a class="tab" href="http://">INTERNAL</a>
    <ul>
    
    </ul>
    </li>
    and have the <li> entries added to it. Im sure theres some JS that can do the job...


    Any help is gratefully received.

    Many thanks
    Howie
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    You'll need to give that <ul/> a class or ID, some way to identify it. Let's say you gave it class "menu", you could do:
    Code:
    $(".category a").each(function() {
       $(".menu").append($("<li/>").append($(this).clone()));
    });
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    7
    Rep Power
    0
    Is that really all I need?
    That seems extremely simple!
    Will that take the name and link with it?

    I'll give it a go, thanks!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    Will that take the name and link with it?
    Using jQuery.clone() will copy the entire element, along with its children. In this case, clone() gets called on the <a> element, so the newly created <li> will contain that <a> and the <span>; for example, the first one created would have this markup:
    <li><a href=""><span>Internal KB Documents</span></a></li>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    7
    Rep Power
    0
    That worked really great! Thanks!

    I did this in the end:

    Code:
    $(".category h3 a").each(function() {
       $(".menu-drop").append($("<li/>").append($(this).clone()));
    });
    already had a menu-drop class in place so used that.

    HOWEVER!
    It seems that this only works if its all on the same page.
    The menu im trying to create exists on every page as a site header, drop down navigation menu, so I want to be able to apply this regardless of which page Im looking at.

    Any way I can do that?

    Thanks
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    It seems that this only works if its all on the same page.
    ... Yeah, that's kind of the idea.

    I want to be able to apply this regardless of which page Im looking at
    Then you want to generate the menu on the server-side, with PHP or JSP or whatever technology you're using; not by relying on javascript to generate the menu by copying one part of the webpage to another part.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    7
    Rep Power
    0
    Well thank you very much for the assistance anyway. You gave me some knoweldge, even if I cant implement it!
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Originally Posted by howiepaul
    Well thank you very much for the assistance anyway. You gave me some knoweldge, even if I cant implement it!
    Put your code in an external JavaScript file and just link the external JS file; in all of your pages:
    Code:
    <script src="my_external_javascript_file.js"></script>
    And in that external JS file; just do something like this:
    Code:
    $("document").ready(function(){
     $(".category h3 a").each(function() {
       $(".menu-drop").append($("<li/>").append($(this).clone()));
     });
    });
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    7
    Rep Power
    0
    Im not sure that would work, would it?
    I mean, its still got to clone code from a separate page wherever I am on the site?

IMN logo majestic logo threadwatch logo seochat tools logo