Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Appending items

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Appending items

    Hi guys, got a slight problem. I have a simple menu like so
    Code:
    <nav class="nav">
                <div class="mainmenu">
                    <div id="mainmenu">
                      <h2 id="menu-text">Main Menu</h2>
                      <ul class="sf-menu">
                        <li class="nav-item"><a href="index.html" id="visited"><span class="home"></span>home</a></li>
                        <li class="nav-item"><a href="why.html"><span class="home"></span>why</a></li>
                        <li class="nav-item"><a href="what.html"><span class="home"></span>what</a></li>
                        <li class="nav-item"><a href="work.html"><span class="home"></span>work</a></li>
                        <li class="nav-item"><a href="connect.html"><span class="home"></span>connect</a>
                          <ul class="responsive-subnav2">
                              <li><a href="team.html">meet us</a></li>
                              <li><a href="join.html">join us</a></li>
                              <li><a href="#">blog</a></li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                </div>
    </nav>
    Everything works perfectly for my large menu, but for a mobile, I want it to go into a drop down type menu thing. I have managed to do this for everything, apart for the submenu part above. So what I have done for now is hidden the submenu in the mobile menu, and everything now looks good. But I need to somehow get this menu in, so I decided to make them main menu items via JQuery. This means I will have to make them in the following format,
    Code:
    <li class="nav-item"><a href="why.html"><span class="home"></span>why</a></li>
    And then add them to my existing list. So to start with, I have done
    Code:
        
        var listItem = document.createElement('li');
        listItem.className = 'nav-item';
        var listLink = document.createElement('a');
        var listSpan = document.createElement('span');
        listSpan.addClass = 'home';
    I am not sure if this is the correct approach, and I did not know how to add a href. My main question is whether the above is correct and if so, how can I attach it to my current list?

    Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Look into Twitter Bootstrap for help with responsive design in menus. Keep in mind that you can customize Bootstrap to only have what is needed; therefore a smaller overhead.
    An example of horizontal to vertical menu can be found here:
    http://www.programming-free.com/2013...l#.Ucmbxtg3mBs

    The final look of it can be changed with Bootstrap also. Hope this helps.
    Evolution - The non-random survival of random variants.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by nick2price View Post
    This means I will have to make them in the following format,
    Code:
    <li class="nav-item"><a href="why.html"><span class="home"></span>why</a></li>
    And then add them to my existing list. So to start with, I have done
    Code:
        
        var listItem = document.createElement('li');
        listItem.className = 'nav-item';
        var listLink = document.createElement('a');
        var listSpan = document.createElement('span');
        listSpan.addClass = 'home';
    I am not sure if this is the correct approach, and I did not know how to add a href. My main question is whether the above is correct and if so, how can I attach it to my current list?
    jQuery makes appending elements and adding attributes so easy, why don’t you make use of it if you have it at your disposal. To create an element just do:
    PHP Code:
    var listItem = $('<li>'); 
    you can easily add attributes with this kind of syntax:
    PHP Code:
    var listItem = $('<li>', {
      
    'class''nav-item'// note: “class” must be in quotes in order to work in IE
      
    text'text string inside the element',
      
    id'whatever'
      
    // and so on…
    }); 
    The same goes for links:
    PHP Code:
    var listLink = $('<a>', {
      
    text'link text',
      
    href'http://example.com'
    }); 
    And as said, with jQuery you can easily append elements so you can generate the whole thing on the fly at once:
    PHP Code:
    var listItem = $('<li>', {'class''nav-item'}).append(
      $(
    '<a>', {
        
    text'why',
        
    href'why.html'
      
    }).prepend(
        $(
    '<span>', {'class''home'})
      )
    ); 
    Now, this is a so-called “document fragment” which you can append and reappend to the document as often as you want, like:
    Code:
    $('.nav ul').append(listItem);


  •  

    Posting Permissions

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