In the following example, I have a header with logo-container on the left, menu in the middle and a button on the right. In the example, the menu has 5 top-level items, and 2 sub-menus.
<div class="container">
<div class="logo_container">
<img src="logo.png" />
</div>
<div id="top-navigation">
<div id="top-menu-nav">
<ul id="top-menu">
<li class="top-item">Top Item 1</li>
<li class="top-item">Top Item 2
<ul>
<li class="sub-item">Sub-Item 1</li>
<li class="sub-item">Sub-Item 2</li>
<li class="sub-item">Sub-Item 3</li>
<li class="sub-item">Sub-Item 4</li>
</ul>
</li>
<li class="top-item">Top Item 3
<ul>
<li class="sub-item">Sub-Item 5</li>
<li class="sub-item">Sub-Item 6</li>
<li class="sub-item">Sub-Item 7</li>
<li class="sub-item">Sub-Item 8</li>
</ul>
</li>
<li class="top-item">Top Item 4</li>
<li class="top-item">Top Item 5</li>
</ul>
</div>
<ul id="menu-button">
<li class="menu-button-cta">Button</li>
</ul>
</div>
</div>
As top-level items might be added or removed, I'd like to change the width of the parent element in accordance with the number of top-level items in menu.
For instance:
<ul id="top-menu"> has 5 <li class="top-item"> = .container {width: 100%;}
<ul id="top-menu"> has 4 <li class="top-item"> = .container {width: 90%;}
<ul id="top-menu"> has 3 <li class="top-item"> = .container {width: 80%;}
Is there a way to do it in CSS or jQuery?
You can do this in jquery using .children().length, eg:
$("ul.top-menu").each(function() {
$(this).addClass(".container-" + $(this).children(".top-item").length);
});
then css:
.container-5 { width: 100%; }
.container-4 { width: 90%; }
.container-5 { width: 80%; }
Here is my solution with jQuery. First, calculating length of children, then applying style accordingly.
var lengthOfChildren = $("#top-menu").children().length;
switch (lengthOfChildren) {
case 3:
$(".container").css("width", "80%");
break;
case 4:
$(".container").css("width", "90%");
break;
default:
$(".container").css("width", "100%");
}
Related
I want to manually scroll a UL list with two button.
First time 4 items will show and when user click on up or down button list will scroll 1 item a time.
$(document).ready(function() {
$(".down").on("click", function() {
$(".scroll").scrollTop(
$(".listitem:nth-child(4)").offset().top -
$(".listitem:nth-child(3)").offset().top
);
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div></div>
Now i am stuck i don't how i can dynamically pass the next and previous li to make it work . i want to do it exactly like that as i show in down button list scroll to next item.
You can use scrollIntoView() method to scrolls the element into the visible area. Note that :not(:nth-last-child(3)) would be the n - 1 visible list.
$(document).ready(function() {
$(".down").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.next();
if ($target.get(0) && $target.is(':not(:nth-last-child(3))')) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
$(".up").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.prev();
if ($target.get(0)) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem active">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div>
</div>
</div>
I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function(){
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>
If anyone has any ideas on how this can be done your help would be greatly appreciated!
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function() {
$('ul>li>ul>li').each(function() {
if ($(this).hasClass('current_page_item')) {
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background: #ddd;
}
.current_page_item {
background: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link => {
link.onclick = function() {
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
}
})
.current_page_item {
background-color: aliceblue;
}
.side_open:before {
content: 'I have side open class';
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function(){
$('ul.main_ul>li>ul.sub_ul>li').each(function(){
if($(this).hasClass('current_page_item')){
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>
I am having trouble correctly toggling classes in my tab list using javascript.
At first click the menu is open and on second click on the same will close, but after close will not open again if I click on the same menu.
Check my example to see exactly what I mean:
var prev = '';
var tabsList = document.querySelectorAll('.main-col');
for (i = 0; i < tabsList.length; ++i) {
tabsList[i].addEventListener("click", function(){
var elements = document.getElementsByClassName('main-col');
for (j = 0; j < elements.length; ++j) {
elements[j].classList.remove("open");
}
var index = this.dataset.foo;
document.querySelectorAll('[data-foo="' + index + '"]')[0].classList.toggle("open");
if ( prev == this) {
this.classList.remove("open");
}
prev = this;
});
}
h3 {
cursor: pointer;
}
.main-col .menu {
max-height: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(0, 1, 0, 1);
}
.main-col.open .menu {
background: #333;
max-height: 500px;
transition: max-height .5s ease-in-out;
}
<div id="f-col1" class="main-col" data-foo="1">
<h3 class="title-col1">Column 1 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-1">
<ul id="column-1-container" class="menu">
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
</ul>
</div>
</div>
<div id="f-col2" class="main-col" data-foo="2">
<h3 class="title-col2">Column 2 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-2">
<ul id="column-2-container" class="menu">
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
</ul>
</div>
</div>
<div id="f-col3" class="main-col" data-foo="3">
<h3 class="title-col3">Column 3 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-3">
<ul id="column-3-container" class="menu">
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
</ul>
</div>
</div>
PS: Please don't give me alternatives with jQuery to this little problem. :)
You could achieve this by the following:
// Iterate each tab (main-col) that the toggle behaviour is applied to
document.querySelectorAll('.main-col').forEach(function(tabItem) {
// Add click event listener to current tab to process toggle logic
tabItem.addEventListener("click", function() {
// Use the toggle method to toggle open class on and off
tabItem.classList.toggle('open');
// Select any currently open tabs, and remove the open class from tabs
// that are not the tab we're currently toggling
document.querySelectorAll('.main-col.open').forEach(function(openTabItem) {
if(openTabItem !== tabItem) {
openTabItem.classList.remove('open');
}
});
})
})
h3 {
cursor: pointer;
}
.main-col .menu {
max-height: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(0, 1, 0, 1);
}
.main-col.open .menu {
background: #333;
max-height: 500px;
transition: max-height .5s ease-in-out;
}
<div id="f-col1" class="main-col" data-foo="1">
<h3 class="title-col1">Column 1 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-1">
<ul id="column-1-container" class="menu">
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
</ul>
</div>
</div>
<div id="f-col2" class="main-col" data-foo="2">
<h3 class="title-col2">Column 2 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-2">
<ul id="column-2-container" class="menu">
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
</ul>
</div>
</div>
<div id="f-col3" class="main-col" data-foo="3">
<h3 class="title-col3">Column 3 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-3">
<ul id="column-3-container" class="menu">
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
</ul>
</div>
</div>
IE11 solution, with no polyfill (forEach)...
let FcolsParent = document.getElementById("Parent_of_f-cols");
FcolsParent.onclick = function(e) {
if (!e.target.matches('h3')) return;
e.stopPropagation();
let
isOpen = e.target.parentNode.classList.contains('open'),
Open_Tabs = FcolsParent.querySelectorAll('.main-col.open')
;
for( let i=0, iMax=Open_Tabs.length; i<iMax; i++ ) {
Open_Tabs[i].classList.remove('open');
}
if (!isOpen) e.target.parentNode.classList.add('open');
}
h3 {
cursor: pointer;
}
.main-col .menu {
max-height: 0;
overflow: hidden;
transition: max-height 1.5s cubic-bezier(0, 1, 0, 1);
/* transition: max-height 1.5s ease-in-out; */
}
.main-col.open .menu {
background: #333;
max-height: 500px;
transition: max-height 1.5s ease-in-out;
}
<div id="Parent_of_f-cols">
<div id="f-col1" class="main-col" data-foo="1">
<h3 class="title-col1">Column 1 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-1">
<ul id="column-1-container" class="menu">
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
</ul>
</div>
</div>
<div id="f-col2" class="main-col" data-foo="2">
<h3 class="title-col2">Column 2 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-2">
<ul id="column-2-container" class="menu">
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
</ul>
</div>
</div>
<div id="f-col3" class="main-col" data-foo="3">
<h3 class="title-col3">Column 3 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-3">
<ul id="column-3-container" class="menu">
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
</ul>
</div>
</div>
</div>
what about if a click will happen on one of your link ?
actually this remove too your ".open" class
let FcolsParent = document.getElementById("Parent_of_f-cols");
FcolsParent.onclick = function(e) {
if (!e.target.matches('h3')) return;
e.stopPropagation();
let isOpen = e.target.parentNode.classList.contains('open');
FcolsParent.querySelectorAll('.main-col.open').forEach( openTabItem=>openTabItem.classList.remove('open') );
if (!isOpen) e.target.parentNode.classList.add('open');
}
h3 {
cursor: pointer;
}
.main-col .menu {
max-height: 0;
overflow: hidden;
transition: max-height 1.5s cubic-bezier(0, 1, 0, 1);
}
.main-col.open .menu {
background: #333;
max-height: 500px;
transition: max-height 1.5s ease-in-out;
}
<div id="Parent_of_f-cols">
<div id="f-col1" class="main-col" data-foo="1">
<h3 class="title-col1">Column 1 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-1">
<ul id="column-1-container" class="menu">
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
<li id="menu-item-1" class="menu-item">LINK 1</li>
</ul>
</div>
</div>
<div id="f-col2" class="main-col" data-foo="2">
<h3 class="title-col2">Column 2 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-2">
<ul id="column-2-container" class="menu">
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
<li id="menu-item-2" class="menu-item">LINK 2</li>
</ul>
</div>
</div>
<div id="f-col3" class="main-col" data-foo="3">
<h3 class="title-col3">Column 3 with sub-menu (1st click open, 2nd close and from now on will not open)</h3>
<div class="column-3">
<ul id="column-3-container" class="menu">
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
<li id="menu-item-3" class="menu-item">LINK 3</li>
</ul>
</div>
</div>
</div>
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...
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