CODEWITHSUNDEEP
css
user663724
user663724

Reputation:

How can i Split Menu Bar in two lines

This is my jsfiddle

http://jsfiddle.net/Cs8Uu/1/

I have got a Menu as shown in the fiddle Right now the Menu is being shown under one line .

How can i make that display in two lines ??

Means 

ONE TWO THREE (First Line )
FOUR FIVE SIX (In second line )

Could anybody please let me know how to do this ??

The above CSS was given two me

I am using this to append data dynamically to the menu 

function createhorizontaltab(categories) {
var categoryArr = categories;
    for (var i = 0; i < categoryArr[0].length; i++) {
        if (categoryArr[i] != undefined) {
  $("#swiper-wrapper").append('<li id= "' + categoryArr[i] + '" class="swiper-slide">' + categoryArr[i] + '</li>');
        }
    }
}




 <section class="menuWrap">
      <div class="menuInner">
         <div class="swiper-container">
            <ul id="swiper-wrapper" class="swiper-wrapper"> 
            </ul>
         </div>
      </div>
   </section>

Please let me know how can i make Menu Bar dispay in two lines ??

Updated answer

 function createhorizontaltab(categories) {
var categoryArr = categories;
    for (var i = 0; i < categoryArr[0].length; i++) {
        if (categoryArr[i] != undefined) {
            if(i==4)
            {
$("#swiper-wrapper").append('</ul><ul>');
            }
  $("#swiper-wrapper").append('<li id= "' + categoryArr[i] + '" class="swiper-slide">' + categoryArr[i] + '</li>');
        }
    }
}

The output HTML that function creates is 

<ul id="swiper-wrapper" class="swiper-wrapper" style="width: 0px; height: 30px;">
   <li id="Chips &amp; Chocolates" class="swiper-slide">Chips &amp; Chocolates</li>
   <li id="Ice creams" class="swiper-slide">Ice creams</li>
   <li id="Popcorn" class="swiper-slide">Popcorn</li>
   <li id="Snacks &amp; Corn" class="swiper-slide">Snacks &amp; Corn</li>
   <li id="Soft Drinks" class="swiper-slide">Soft Drinks</li>
   <li id="Tea &amp; Coffee" class="swiper-slide">Tea &amp; Coffee</li>
</ul>

Upvotes: 0

Views: 1385

Answers (2)

The_DemoCorgin
The_DemoCorgin

Reputation: 744

You can split the menu into two different <ul>. If you add </ul><ul> after the Three</li>, it will split it into two rows. You'll need to adjust the css some to fix the heights then.

Upvotes: 0

DRD
DRD

Reputation: 5813

Add the following rule set:

.menuWrap .menuInner ul li:nth-child(4) {
    clear: left;
}

Upvotes: 1

Related Questions