CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jason Carlos
Jason Carlos

Reputation: 77

How to apart unordered list into 2 parts?

I have unordered list and i want to break into 2 portions on certain screen size and i tried following jQuery.

HTML is:

<ul class="menu-primary">
   <li class="menu-item">home</li>
   <li class="menu-item">Products</li>
   <li class="menu-item">Settings</li>
   <li class="menu-item">Contact</li>
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

I want to part this unordered list into 2 parts when the viewport is less than 800px like that

<ul class="menu-primary">
   <li class="menu-item">home</li>
   <li class="menu-item">Products</li>
   <li class="menu-item">Settings</li>
   <li class="menu-item">Contact</li>
</ul>

<ul class="searchform-block">
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

so i tried the following jQuery to do so, but there is some problem.

jQuery:

(function($){

    function viewport() {

        var e = window, 
            a = 'inner';

        if (!('innerWidth' in window )) {
            a = 'client';
            e = document.documentElement || document.body;
        }

        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };

    }

    /**
     * Responsive Navigation
     */
    if ( viewport().width < '800' ) {
        $( '.menu-primary li' ).each(function(i){
            if ( $(this).hasClass('search') ) {
                $(this).before('</ul><ul class="searchform-block">');
            }
        });
    }

})(jQuery);

but the result of above jQuery is following which is totally unexpected.

<ul class="menu-primary">
   ...
   <li class="menu-item">Contact</li>
   <ul class="searchform-block"></ul>
   <li class="right search">
      <form class="searchform search-form">
         <input type="text">
      </form>
   </li>
</ul>

NOTE: I am also using superfish.min.js for menu.

Upvotes: 1

Views: 48

Answers (1)

David Costa
David Costa

Reputation: 79

What you are doing is incorrect because jQuery tries to correct the html in the before function. What you should do is to create the ul tag element after the ul.menu-primary and move the li.search to the second unordered list. like this:

var tmpLiEl=null;
$( '.menu-primary li' ).each(function(i){
    if ( $(this).hasClass('search') ) {
        tmpLiEl=$(this).detach();
    }
});
$('.menu-primary').after('<ul class="searchform-block"></ul>');
tmpLiEl.appendTo('.searchform-block');

Upvotes: 1

Related Questions