Moving li to next column - javascript

I've got a simple ul like so :
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
<li class="item">test 13</li>
<li class="item">test 14</li>
<li class="item">test 15</li>
<li class="item">test 16</li>
<li class="item">test 17</li>
<li class="item">test 18</li>
<li class="categ">category 4</li>
<li class="item">test 19</li>
<li class="item">test 20</li>
<li class="item">test 21</li>
<li class="item">test 22</li>
<li class="item">test 23</li>
<li class="item">test 24</li>
<li class="categ">category 5</li>
<li class="item">test 25</li>
<li class="item">test 26</li>
<li class="item">test 27</li>
<li class="item">test 28</li>
<li class="item">test 29</li>
<li class="item">test 30</li>
<li class="item">test 31</li>
<li class="item">test 32</li>
<li class="item">test 33</li>
</ul>
As you can see here, category 2 is at the very bottom and category 3 is in the middle. I want to be able to move them to the next column dynamically if they're at the very bottom. Knowing that the height might be larger and there could be a lot of other categories in each column, I want to push the LAST category of the column to the next column, thus modifying the rest of the columns accordingly. I don't have any idea on where to start...
EDIT, taken from comments :
To clarify somet hings :
My code is a small example of a larger code containing much more than that, so no the question is still about how can I move each category to the next column, trying to find another way of doing it won't work in my case as this is just a preview. I'm using JQuery in order to get the categories and the list of items, and then I don't know what to do to push the category to the next column using JS. It should just reposition to the next column if it's the last category of the current column.


You could apply the break-before property to the .categ class, but then you end up with three columns:
var item = $(".item")
var categ = $(".categ")
ul {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
margin: auto;
list-style: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
.categ {
break-before: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul>
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>
You have to alter the DOM in order to get this to work. In the following snippet I've made "sublists" out of the .categ list items and all their following .item siblings (using jQuery as you'd included it in your snippet). I've also added a class to the top-most ul so as to differentiate it for styling. You could also use a class on the uls for the "sublists" instead of using the child selector as I did.
$(".categ").each((idx, cat) => $(cat).nextUntil(".categ", ".item").addBack().wrapAll("<li><ul>"));
ul.target {
font-family: calibri, verdana, arial;
min-height: 500px;
float: none;
column-count: 4;
column-width: 25%;
column-gap: 1rem;
column-rule: 1px solid gray;
box-sizing: border-box;
}
ul {
margin: auto;
list-style: none;
}
ul > li > ul {
break-after: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
<li class="categ">category 1</li>
<li class="item">test 1</li>
<li class="item">test 2</li>
<li class="categ">category 2</li>
<li class="item">test 3</li>
<li class="item">test 4</li>
<li class="item">test 5</li>
<li class="item">test 6</li>
<li class="item">test 7</li>
<li class="item">test 8</li>
<li class="categ">category 3</li>
<li class="item">test 9</li>
<li class="item">test 10</li>
<li class="item">test 11</li>
<li class="item">test 12</li>
</ul>


Disclaimer, I'm a little unsure about what you're trying to do:
I think the problem is not the presentation rules (CSS) you apply to your data (HTML). I think the problem is dat your data does not provide enough context for you presentation rules to act upon.
What I think you're trying to do is to have 3 (or more) separate lists presented on something that looks like a footer. However your HTML structures does not seem to properly match this scheme.
Try to make your HTML more explicit. Why put everything in one list instead of one list per category? Then you could justify the categories the way you want by either floats or flex or even grid layouts. I don't see why you should need jQuery for this?
Or have I misinterpreted your question?

Related

Show/Hide Tab Arrows to Navigate Additional Tabs on Overflow

Right now, I have a tab structure that looks like the following:
As you can see, when the tabs reach the end of the line they wrap to the next line. I know how to hide the additional tabs; however, I want to introduce an arrow system to navigate to the additional tabs when the tabs overflow. Something that looks like below depending on the screen resolution:
I only want to have the arrows appear if there are additional tabs that are being hidden, this leads me to my question: How do I detect when the tabs wrap and insert the arrows?
I need this to work with responsive layouts.
Here is the code I am using to create the tabs (note: it includes hard-coded list items for the arrows):
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>

The answer requested:
window.addEventListener('load', initTabs);
function initTabs() {
var listContainer = document.getElementById('tabs');
var buttonWidthCounter = 0;
var totalContainerWidth = listContainer.offsetWidth;
for (var i = 0; i < listContainer.children.length; i++) {
if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
//button overflow...add tab buttons
console.log('there is overflow...add tab arrow buttons...');
}
buttonWidthCounter += listContainer.children[i].offsetWidth;
}
}
li {
display: inline-block;
}
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
The answer I suggest:
Scrollbars are much easier to implement and are arguably better.
li{
display:inline-block;
}
ul{
white-space:nowrap;
}
html,body{
margin:0;
padding:0;
}
#container{
width:100vw;
overflow:scroll;
}
<div id="container">
<ul id="tabs" class="tab-links">
<li class="">Tables & Views</li>
<li class="">ERD</li>
<li class=""><i class="fa fa-caret-left"></i></li>
<li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
<li class="">Query 2</li>
<li class="">Query 3</li>
<li class="">Query 4</li>
<li class="">Query 5</li>
<li class="">Query 6</li>
<li class="">Query 7</li>
<li class="">Query 8</li>
<li class="">Query 9</li>
<li class=""><i class="fa fa-caret-right"></i></li>
<!-- Hidden Tabs -->
<li class="">Query 10</li>
<li class="">Query 11</li>
<li class="">Query 12</li>
</ul>
</div>

Finding a better way to implement navigation bar which has subcategories

I'm building a navigation bar. The link below is what I just have completed so far.https://jsfiddle.net/dsdzyp23/2/
<div class="navbar-01">
<div class="navbar-01-container">
<div class="main-container">
<div class="logo-center">
<img style="width: 240px;" src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg">
</div>
<button class="nav-toggle-btn">
<img style="width: 50px;" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/navigation-512.png">
</button>
<ul class="nav-categories">
<li>RUNWAY</li>
<li>WOMEN</li>
<li>MEN</li>
<li>CHILDREN</li>
</ul>
</div>
</div>
<div id="runway" class="navbar-sub">
<div class="main-container">
<div class="nav-sub-list">
<ul class="nav-sub-categories">
WOMEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
MEN
<li>Cruise 2018</li>
<li>Fall Winter 2017 Runway</li>
<li>Pre-Fall 2017</li>
</ul>
<!--
-->
<ul class="nav-sub-categories">
UNSKILLED WORKER
</ul>
</div>
</div>
</div>
</div>
Cause my subcategories are not wrapped with anchors, when my mouse leaves the anchor, the subcategories div closes, therefore I cannot reach to the content which are wrapped in the subcategories div.
I' am wondering if wrapping subcategories with anchor is the best way to implement a navigation bar? (Considering to responsive web design, it seems like wrapping together is the most easiest way to implement?)

Here's the standard way to make a menu. It's also dependent on requirements.
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.nav-list {
text-align: center;
}
.nav-list-item {
display: inline-block;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.nav-list-item:hover .subnav-list {
display: block;
}
.subnav-list {
display: none;
width: 100px;
transform: translateX(-50%);
position: absolute;
top: 100%;
left: 50%;
}
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
Nav 1
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 2
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 3
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 4
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 5
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 6
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 7
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 8
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 9
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
<li class="nav-list-item">
Nav 10
<ul class="subnav-list">
<li class="subnav-list-item">Sub Nav 1</li>
<li class="subnav-list-item">Sub Nav 2</li>
<li class="subnav-list-item">Sub Nav 3</li>
<li class="subnav-list-item">Sub Nav 4</li>
<li class="subnav-list-item">Sub Nav 5</li>
<li class="subnav-list-item">Sub Nav 6</li>
<li class="subnav-list-item">Sub Nav 7</li>
<li class="subnav-list-item">Sub Nav 8</li>
<li class="subnav-list-item">Sub Nav 9</li>
<li class="subnav-list-item">Sub Nav 10</li>
</ul>
</li>
</ul>
</nav>

Alter Bootstrap nav tabs row wrapping

With Bootstrap 3, rows of nav-tabs wrap in a way where the widest rows tend to be at the top while the shorter rows are at the bottom:
This leaves the tabs looking awkward and unbalanced. Is there a way that nav-tabs can be modified so that the rows are wider at the bottom? More like this:
Here's the JSFiddle that produced the first image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs">
<li class="active">Foo Bar 1</li>
<li>FooBar 2</li>
<li>FooBar 3</li>
<li>FooBar 4</li>
<li>FooBar 5</li>
<li>FooBar 6</li>
<li>FooBar 7</li>
<li>FooBar 8</li>
<li>FooBar 9</li>
<li>FooBar 10</li>
<li>FooBar 11</li>
<li>FooBar 12</li>
<li>FooBarBaz 13</li>
<li>FooBarBaz 14</li>
</ul>
</div>
</div>
</div>

I know it's not the best solution from the performance point of view but, anyway...Hope, this will be helpful. This solution doesn't depends on specific tab width and provides the result you want.
JSFiddle: https://jsfiddle.net/cpxd8eh0/6/
$(function(){
var $container = $('#sync-tabs');
updateTabs($container);
$(window).resize(function(){
updateTabs($container);
});
function updateTabs($tabsContainer){
var $containerWidth = $tabsContainer.width();
var tabWidths = [];
var $tabs = $tabsContainer.find('li');
$tabs.each(function(index, tab){
tabWidths.push($(tab).width());
});
var formattedTabs = [];
var maxWidth = $containerWidth;
var maxWidthSet = false;
var rowWidth = 0;
for(var i = tabWidths.length - 1; i >= 0; i--){
var tabWidth = tabWidths[i];
if(rowWidth + tabWidth > maxWidth){
if(!maxWidthSet){
maxWidth = rowWidth;
maxWidthSet = true;
}
rowWidth = tabWidth;
formattedTabs.unshift($('<div class="spacer"></div>'));
}else{
rowWidth += tabWidth;
}
formattedTabs.unshift($tabs.get(i));
}
var $tempContainer = $('<div></div>');
formattedTabs.forEach(function(tab, index){
$tempContainer.append(tab);
});
$tabsContainer.html($tempContainer.html());
}
});

I have updated the answer with a new and improved solution. Here is a demo. _.debounce is a function from Lodash which is being used to improve performance of the resize watcher.
function setTabs() {
let availableWidth = $('#nav-bar').outerWidth();
let liNodes = $('#nav-bar li');
liNodes.removeClass('clear');
let filledWidth = 0;
for (var i=liNodes.length-1; i>=0; i--) {
let currentWidth = $(liNodes[i]).outerWidth();
if (filledWidth + currentWidth <= availableWidth)
filledWidth += currentWidth;
else {
$(liNodes[i+1]).addClass('clear');
availableWidth = filledWidth;
filledWidth = currentWidth;
}
}
}
setTabs();
$(window).resize(_.debounce(setTabs, 200));

Are you trying to do something like shown in the fiddle
You can explicitly use css clear trick to achieve what you want.
.clear {
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-tabs">
<li class="active">Foo Bar 1</li>
<li>FooBar 2</li>
<li>FooBar 3</li>
<li>FooBar 4</li>
<li class="clear">FooBar 5</li>
<li>FooBar 6</li>
<li>FooBar 7</li>
<li>FooBar 8</li>
<li>FooBar 9</li>
<li class="clear">FooBar 10</li>
<li>FooBar 11</li>
<li>FooBar 12</li>
<li>FooBar 13</li>
<li>FooBar 14</li>
</ul>
</div>
</div>
</div>

I didn't understand what exactly you are looking for, and added following css to look good https://jsfiddle.net/2tu6a2yh/2/
.nav-tabs {
display: table;
table-layout: fixed;
width : 100%;
}
.nav-tabs li {
display: table-cell;
width:120px; // constant width
}

I think you need to set the column sizes for each list item for a more consistent look. Otherwise positions are determined according to the text length they contain. I think, if you make a few trial you'll find the combination you want for each screen size. Try something like following approach
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-tabs">
<li class="active col-sm-4">Foo Bar 1</li>
<li class="col-sm-4">FooBar 2</li>
<li class="col-sm-4">FooBar 3</li>
<li class="col-sm-4">FooBar 4</li>
<li class="col-sm-4">FooBar 5</li>
<li class="col-sm-4">FooBar 6</li>
<li class="col-sm-3">FooBar 7</li>
<li class="col-sm-3">FooBar 8</li>
<li class="col-sm-3">FooBar 9</li>
<li class="col-sm-3">FooBar 10</li>
<li class="col-sm-3">FooBar 11</li>
<li class="col-sm-3">FooBar 12</li>
<li class="col-sm-3">FooBarBaz 13</li>
<li class="col-sm-3">FooBarBaz 14</li>
</ul>
</div>

Here is a fiddle that i have done according to your requirements
FIDDLE LINK
.nav-tabs
{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" id="sync-tabs">
<li class="active">Foo Bar 1</li>
<li>FooBar 2</li>
<li>FooBar 3</li>
<li>FooBar 4</li>
<li>FooBar 5</li>
<li>FooBar 6</li>
<li>FooBar 7</li>
<li>FooBar 8</li>
<li>FooBar 9</li>
<li>FooBar 10</li>
<li>FooBar 11</li>
<li>FooBar 12</li>
<li>FooBarBaz 13</li>
<li>FooBarBaz 14</li>
</ul>
</div>
</div>
</div>
UPDATED FIDDLE LINK AS PER THE IMAGE GIVEN
Hope this helps...

SlickNav menu, each li with specific color background?

I prepare my mobile menu with SlickNav but I have a little problem. I can not specify my css attributes on my <li> beacause SlickNav not taken into account. The problem is that I simply want to change the background of each of my <li>
Any idea?
<ul id="menu2">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>

I think you can use CSS3 :nth-child() Selector, like this:
ul:nth-child(1) { // first li
background-color: #ff0000;
}
ul:nth-child(2) { // second li
background-color: #ffffff;
}

Float left and right in same UL

I have a unordered list
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
I want the items to be displayed horizontal. The items with the left class on the left site and the others on the right site.
I want to use smartmenus, for this reason I need a unordered list.
Here is the plunkr: http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview

On the basis of my understanding from your post, this is your desired result
.left{float:left}
.right{float:right}
ul{list-style:none}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>

You can use flex-box if you can have a "filler" element between left and right.
ul {
display: flex;
list-style: none;
}
.filler {
flex: 1 0 auto;
}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="filler"></li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
check out this pen: http://codepen.io/anon/pen/pJpBjq
and here is a guide to flex-box

Categories