Menu Overflow

Developer
Anthony Adamski
Size
2,280 Kb
Views
42,504
  1. Menu Overflow Previews
  2. Menu Overflow HTML Codes
  3. Menu Overflow CSS Codes
  4. Menu Overflow JS Codes

How do I make an menu overflow?

What is a menu overflow? How do you make a menu overflow? This script and codes were developed by Anthony Adamski on 25 August 2022, Thursday.

Menu Overflow Previews
IQ Test

Menu Overflow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Overflow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="firstList">	<li>Item 1</li>	<li>Item 2</li>	<li>Item 3</li>	<li>Item 4</li>	<li>Item 5</li>	<li>Item 6</li>
</ul>
<ul class="secondList">
</ul>
<h1></h1>
<h2></h2> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu Overflow - Script Codes CSS Codes

ul { white-space: nowrap; width: 100%; overflow: auto;
}
ul li { display: inline-block; width: 200px; list-style: none; background: blue; margin: 5px;
}
.firstList { background: red;
}
.secondList { background: green;
}

Menu Overflow - Script Codes JS Codes

var resizeId;
$(window).on('resize', function() {	clearTimeout(resizeId);	resizeId = setTimeout(doneResizing, 500);
});
function doneResizing() {	navWidth = $('ul').width();	navItem = $('.firstList > li');	hiddenItem = $('.secondList > li');	navItem.each(function(index) {	navItemOffset = $(this).offset().left + $(this).width();	if (navWidth <= navItemOffset) {	$(this).appendTo('.secondList');	}	});	hiddenItem.each(function(index) {	lastItemOffset = navItem.last().offset().left + $(this).width();	console.log(lastItemOffset);	console.log(navWidth);	if (navWidth >= (lastItemOffset + 200)) {	console.log('Added Item');	$('.secondList > li:last').appendTo('.firstList');	}	});
}
Menu Overflow - Script Codes
Menu Overflow - Script Codes
Home Page Home
Developer Anthony Adamski
Username anthonyadamski
Uploaded August 25, 2022
Rating 3
Size 2,280 Kb
Views 42,504
Do you need developer help for Menu Overflow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Adamski (anthonyadamski) Script Codes
Name
Full Viewport Background Scroll
Simple CSS3 Slider
Video Test
Live resume concept
Responsive Email Template
Cool Page Split Effect
Single page concept
Live CSS Blur
Work In Progress
Jquery Snippets
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!