I've created a modal window with 2 sections: a header and a ul. I use jQuery to open the modal. So far so good. I want to make the ul fit the modal box without overflowing.
I can overflow the .modal. But, i really just to want to overflow the ul, not the entire .modal box.
https://jsfiddle.net/tjL1e0ca/
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
.modal {
display: none;
position: fixed;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
Add style="overflow-y: auto; height: 100px;" to your ul. This basically adds overflow-y to your ul, except it would only work if you specify a height.
I updated your JSFiddle for you.
Change the height as you wish.
Update: After reading the coments, I realized that you wanted the height of the ul to be adaptive and not set. To fix that, change the height from height: 100px; to height: 50%; (and change the percentage as you wish). That way, the ul will always be 50% of the modal, no matter the height of the modal. Since it didn't seem to work on snippets here, I made a JSFiddle for you.
$(document).on("click", "h3", function(e) {
$(".modal").css("display", "block");
})
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
h3 {
cursor: pointer;
}
.list {
overflow-y: auto;
height: 100px;
}
.modal {
display: none;
position: fixed;
z-index: 700;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
max-width: 650px;
max-height: calc(100% - 60px);
padding: 30px 20px 20px;
/*overflow: auto;*/
border: 3px solid black;
background-color: #ccc;
}
.modal_1 ul {
background-color: red;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>click here to open modal</h3>
<div class="modal">
<div class="modal_1">
<div>
<h1>HEADER GOES HERE</h1>
<h2>SUB GOES HERE</h2>
</div>
<ul class="list">
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
Related
I want to use Floating UI to prevent dropdown menus from going off the left/right edge of the screen. The example code is as follows:
HTML:
<ul class="menu">
<li class="menu__item">
Item 1
<ul class="submenu">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
<li>Item 1.5</li>
</ul>
</li>
<li class="menu__item">
Item 2
<ul class="submenu">
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul>
</li>
<li class="menu__item">
Item 3
<ul class="submenu">
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
<li>Item 3.4</li>
<li>Item 3.5</li>
</ul>
</li>
<li class="menu__item">
Item 4
<ul class="submenu">
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
<li>Item 4.4</li>
<li>Item 4.5</li>
</ul>
</li>
<li class="menu__item">
Item 5
<ul class="submenu">
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
<li>Item 5.4</li>
<li>Item 5.5</li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
display: flex;
}
a {
color: inherit;
text-decoration: none;
}
.menu {
display: flex;
gap: 5px;
justify-content: space-around;
color: white;
}
.menu > li {
position: relative;
background: blue;
padding: 0 30px;
height: 40px;
}
.submenu {
display: none;
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
background: red;
}
.menu > li:hover .submenu {
display: flex;
}
.submenu li {
padding: 10px 20px;
}
.submenu a {
white-space: nowrap;
}
JS:
import { autoUpdate, computePosition, shift } from "https://cdn.skypack.dev/#floating-ui/dom#1.2.0";
const menuItems = document.querySelectorAll('.menu__item');
menuItems.forEach((item) => {
const reference = item.querySelector('.menu__link');
const floating = item.querySelector('.submenu');
computePosition(reference, floating, {
placement: "bottom",
middleware: [shift()]
}).then(({ x, y }) => {
Object.assign(floating.style, {
left: `${x}px`
});
});
});
There's a CodePen here.
However, I'm struggling to understand the documentation and the implementation I have doesn't seem to work. The red dropdowns should be center-aligned under the blue items where possible but Floating UI should adjust the positioning horizontally so that the first dropdown should have its left edge aligned to the left of the screen and the last dropdown should have its right edge aligned to the right of the screen.
Could anyone advise how to get this working and ensure that it maintains the correct positioning even after window resizing?
Many thanks.
`<!DOCTYPE html>
Sideways Scrolling List
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
}
li {
list-style: none;
padding: 10px;
margin-right: 10px;
background: #ccc;
font-weight: bold;
}
button {
padding: 10px;
margin: 10px;
background: #444;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Sideways Scrolling List</h1>
<html>
<head>
<title>Scrolling List of Items</title>
<script>
function ScrollLeft() {
var list = document.getElementById("list");
list.scrollBy(10, 0);
}
function ScrollRight() {
var list = document.getElementById("list");
list.scrollBy(-10, 0);
}
</script>
<style>
.scroll-container {
overflow: auto;
white-space: nowrap;
background-color: #f5f5f5;
padding: 15px;
border-radius: 10px;
}
.scroll-list {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.2em;
color: #444;
}
.scroll-list li {
display: inline-block;
padding: 10px 20px;
margin: 0 0 10px 0;
background-color: #fff;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.scroll-list li:hover {
background-color: #f5f5f5;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="scroll-container">
<ul class="scroll-list" id="list">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
</ul>
</div>
<button onclick="scrollLeft()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
<script>
function scrollLeft() {
document.querySelector("ul").scrollLeft = 0;
}
function scrollRight() {
document.querySelector("ul").scrollLeft = document.querySelector("ul").scrollWidth;
}
</script>
</body>
</html>
</body>
`
scroll left and right buttons dont work, ive tried using this, window.scrollBy(), ___.scrollLeft and literally nothing works
I expected my sideways list too move left and right onclick
any help as too why this doesnt work would be appreciated, also if there are any methods that do this that are supported by most/all browsers that would be nice, than you
EDIT ::
I do not know why but the following works ; and i fixed some html "bad practices" ( i noticed there were two html tags in the previous answer i posted ), and it works with the 'ul' tag
<!DOCTYPE html>
<html>
<head>
<title>Scrolling List of Items</title>
<style>
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
}
li {
list-style: none;
padding: 10px;
margin-right: 10px;
background: #ccc;
font-weight: bold;
}
button {
padding: 10px;
margin: 10px;
background: #444;
color: #fff;
font-weight: bold;
}
</style>
<script>
function scrollLeftenant() {
document.querySelector("ul").scrollLeft = 0;
}
function scrollRight() {
document.querySelector("ul").scrollLeft = document.querySelector("ul").scrollWidth;
}
</script>
</head>
<body>
<h1>Sideways Scrolling List</h1>
<div class="scroll-container">
<ul class="scroll-list" id="list">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
</ul>
</div>
<button onclick="scrollLeftenant()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
</body>
</html>
i had to rename the function from scrollLeft to scrollLeftenant, well the exact name does not matter as long as it is not scrollLeft, it will work, this is probably due to "scrollLeft" probably being used somewhere internally by javascript or something else is overriding it, sooo dont use the name "scrollLeft" for your function names or varibles
I've been learning Javascript and as a bit of practice, thought i'd create myself a dropdown navigation menu, that works on a 'click' rather than hover. I've created the code below (which doesn't work) and i was wondering if someone could explain why so i can see where i've gone wrong.
I can get the dropdown to open, but when i added the code to close the dropdown, the dropdown menu doesn't even open.
I'm hoping someone can point me in the right direction so i can see where i'm going wrong and i can avoid such issues in the future
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
As requested, the CSS is as follows
.main-nav ul > li {
display: inline;
position: relative;
}
.main-nav ul li a {
display: inline-block;
font-family: bebas-neue, sans-serif;
font-style: normal;
font-weight: 400;
text-decoration: none;
color: #333;
font-size: 1.3em;
padding: 0.5em 0.8em 0.8em 0.8em;
transition: background 0.2s linear;
}
.main-nav ul li a:hover {
background: #00a492;
color: #fff;
}
.main-nav ul li a:not(:only-child):after {
content: '\25bc';
font-size: 0.6em;
position: relative;
top: -4px;
left: 2px;
}
/* Second Level of Navigation */
.main-nav ul li ul {
width: 250px;
position: absolute;
top: 160%;
left: 0;
background: #00a492;
}
.main-nav ul li ul li a {
display: block;
}
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
.slicknav_menu {
display:none;
}
.highlight-btn {
background: #00a492 !important;
color: #fff !important;
}
``
Consider using event delegation instead. When anywhere on the page is clicked, run an event listener. If the clicked target is not inside a LI, remove the .nav-open from the existing element with .nav-open, if there is one. Otherwise, if the clicked target was the <a> (a descendant of the outer .menu-item-has-children), navigate to its second child (.children[1]) and add the class to it:
function closeOpenNav() {
const currentOpen = document.querySelector('.nav-open');
if (currentOpen) {
currentOpen.classList.remove('nav-open');
}
}
window.addEventListener('click', (event) => {
const li = event.target.closest('.menu-item-has-children');
if (!li) {
// Close if anywhere on screen aprt form menu is clicked
console.log('closing');
closeOpenNav();
return;
}
if (event.target.parentElement !== li) {
// The clicked element is a descendant of a `.nav-open`
// so, don't do anything
return;
}
event.preventDefault();
closeOpenNav();
const thisSubMenu = li.children[1];
thisSubMenu.classList.add('nav-open');
});
.sub-menu {
display: none;
}
.nav-open {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
I think it can happen because at first you are adding nav-open class than you are checking is it exist if yes you are adding event to window(window still can catch this event) and deleting this class so nothing should happen. Try to addevent.stopPropagation() under event.preventDefault()
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenu = document.querySelector('.sub-menu');
menuHeader.forEach(function(btn) {
btn.addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation()
subMenu.classList.add('nav-open');
// Close if anywhere on screen aprt form menu is clicked
if (subMenu.classList.contains('nav-open')) {
window.onclick = function(event) {
if (!event.target.classList.contains('sub-menu')) {
subMenu.classList.remove('nav-open');
}
};
};
});
});
})();```
This is a wroking demo
(function() {
let menuHeader = document.querySelectorAll('.menu-item-has-children');
let subMenus = document.querySelectorAll('.sub-menu');
menuHeader.forEach(function(btn) {
btn.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
closeAllMenus();
btn.querySelector('.sub-menu').classList.add('nav-open');
});
});
document.addEventListener("click", function(){
closeAllMenus();
});
function closeAllMenus(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
}
})();
.sub-menu{
display: none;
}
.sub-menu.nav-open{
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">
What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
The first mistake on your code was declaring this
let subMenu = document.querySelector('.sub-menu');
this always will be the first subMenu, so I just removed it.
If you want to get the subMenu of every element you should do something like this:
btn.querySelector('.sub-menu')
So now It will get the sub menu for every element inside the forEach you already did.
To close the menu on document click I just made an event listener on document click which will remove the class nav-open from any of the sub menus.
document.addEventListener("click", function(){
subMenus.forEach(function(ele) {
ele.classList.remove('nav-open');
});
});
maybe like so, code should be self explanatory
// Dropdown Menu
(function(){
let menuHeader = document.querySelectorAll('.menu-item-has-children');
menuHeader.forEach(function(btn){
btn.addEventListener('click', function(event){
event.preventDefault();
if(this.classList.contains('nav-open')) {
return this.classList.remove('nav-open');
}
var openNavPoints = document.querySelectorAll('.menu-item-has-children.nav-open');
if(openNavPoints.length >= 1) {
[...openNavPoints].forEach(function(openNavPoint) {
openNavPoint.classList.remove('nav-open');
});
}
this.classList.add('nav-open');
});
});
})();
.menu-item-has-children .sub-menu {
display: none;
}
.menu-item-has-children.nav-open .sub-menu {
display: block;
}
<nav class="main-nav">
<ul>
<li>Home</li>
<li class="menu-item-has-children">What We Do
<ul class="sub-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul></li>
<li class="menu-item-has-children">Our Work
<ul class="sub-menu">
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>Portfolio 3</li>
<li>Portfolio 4</li>
<li>Portfolio 5</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
My submenu Category, overflow the page when resized to a small screen. How do I make the submenu to go to the left everytime this happens?
Here is what's happening
And here is how I want to be
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
I searched for getBoundingClientRect but I don't know how to implement it. I also tried this plugin but didn't help. https://github.com/gijsroge/offscreen.js/
How can i do this with pure javascript ?
Help much appreciated...
All I had to do was to apply a media query,
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
problem solved.
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
I have an issue while sorting the list items when width if all the <li> is not equal. In the example below I try to place "Item 6" just after "Item 4" to no avail.
$('#sort').sortable({
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
Actually you still can put Item 6 after Item 4 (eg. put Item 6 before Item 4 first then move it after Item 4). It's just a bit difficult. Adding grid option makes it easier. Try to run this snippet:
$('#sort').sortable({
grid: [ 10, 10 ]
});
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px;
padding: 5px;
background: #0f0;
width: 25%;
}
.ui-sortable-placeholder {
height: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul id="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li style="width:100%;">Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>