So here is my little HTML page with a playlist of videos:
http://jsfiddle.net/VvR4H/3/
As you can see, in the grey area I have an inline list of playlists, I have three now:
Kangaroo Fighting
Australian Sports
Real Football
Under each playlist are listed videos.
What I want to achieve is a nice horizontal scrolling between my playlists. Right now, when you click on the left or right corner of the grey playlist bar (where the text is half cut), it will slide to the other playlist.
However the sliding is not very nice. I want the Kangaroo Fighting to slide in the middle of the playlist bar when you click on the left corner, could you help me please?
Here is my HTML:
<div class="container">
<ul class="playlists">
<li class="playlist">
<div class="title"> <span class="move-left">Real Foorball</span>
<span>Kangaroo Fighting</span>
<span class="move-right">Australian Sports</span>
</div>
<ul class="videos">
<li class="video">Video 1 C</li>
<li class="video">Video 2 C</li>
<li class="video">Video 3 C</li>
</ul>
</li>
<li class="playlist">
<div class="title"> <span class="move-left">Kangaroo Fighting</span>
<span>Australian Sports</span>
<span class="move-right">Real Football</span>
</div>
<ul class="videos">
<li class="video">Video 1 A</li>
<li class="video">Video 2 A</li>
<li class="video">Video 3 A</li>
</ul>
</li>
<li class="playlist">
<div class="title"> <span class="move-left">Australian Sports</span>
<span>Real Football</span>
<span class="move-right">Kangaroo Fighting</span>
</div>
<ul class="videos">
<li class="video">Video 1 B</li>
<li class="video">Video 2 B</li>
<li class="video">Video 3 B</li>
</ul>
</li>
</ul>
</div>
My CSS:
ul li {
list-style: none;
}
.container {
position: relative;
background: #000;
width: 300px;
height: 500px;
overflow: hidden;
font-family: sans-serif;
}
ul.playlists {
width: 1200px;
padding-left: 0;
margin-top: 0;
position: absolute;
left: -300px;
}
ul.playlists li {
float: left;
width: 300px;
height: 50px;
}
ul.playlists li.playlist .title {
width: 100%;
background: grey;
color: white;
line-height: 50px;
text-align: center;
}
ul.playlists li.playlist .title .move-left, ul.playlists li.playlist .title .move-right {
width: 30px;
line-height: 50px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
ul.playlists li.playlist .title .move-left {
float: left;
direction: rtl;
}
ul.playlists li.playlist .title .move-right {
float: right;
}
ul.videos {
clear: both;
padding-left: 0;
}
ul.videos li {
float: left;
width: 250px;
height: 50px;
padding: 25px;
color: white;
background: blue;
border-top: 1px solid black;
}
And my JavaScript:
$(".move-left").click(function () {
$(this).parent().parent().parent().animate({
"left": "0"
}, 500, "linear", function () {
console.log("yay");
});
});
$(".move-right").click(function () {
$(this).parent().parent().parent().animate({
"left": "-600"
}, 500, "linear", function () {
console.log("yay");
});
});
It is not complete (I didnt do infinity loop), but I guess it has better animation as you requested.
I separated your html into 2 parts. First one is moving slower then second one. So you can se half text of next titles but you dont have to duplicate texts.
http://jsfiddle.net/VvR4H/10/
html
<div class="container">
<div class="title-wrapper">
<div class="title">
<span>Real Foorball</span>
<span>Kengoroo Fighting</span>
<span>Australian Sports</span>
</div>
</div>
<div class="playlist">
<ul class="videos">
<li class="video">Video 1 C</li>
<li class="video">Video 2 C</li>
<li class="video">Video 3 C</li>
</ul>
<ul class="videos">
<li class="video">Video 1 A</li>
<li class="video">Video 2 A</li>
<li class="video">Video 3 A</li>
</ul>
<ul class="videos">
<li class="video">Video 1 B</li>
<li class="video">Video 2 B</li>
<li class="video">Video 3 B</li>
</ul>
</div>
</div>
css
ul li {
list-style: none;
}
.container {
position: relative;
background: #000;
width: 300px;
height: 500px;
font-family: sans-serif;
overflow: hidden;
}
div.title-wrapper {
background: grey;
height: 50px;
}
div.title {
position: absolute;
overflow: hidden;
height: 50px;
left: 75px;
white-space: nowrap;
}
div.playlist {
position: absolute;
overflow: hidden;
top: 50px;
clear: both;
white-space: nowrap;
}
div.title span {
width: 300px;
background: grey;
color: white;
line-height: 50px;
text-align: left;
display: block;
float: left;
margin: 0;
padding: 0;
text-indent: 20px;
}
ul.videos {
float: left;
width: 300px;
margin: 0;
padding: 0;
}
ul.videos li {
display: block;
background: blue;
height: 50px;
padding: 10px 20px;
margin: 1px 0 0 0;
color: white;
}
javascript
$('.title span').css({
'text-indent' : '0',
'text-align' : 'center',
'width' : '150px'
});
var titles = [];
$('.title span').each( function () {
titles.push($(this));
});
var max = titles.length-1;
var left = max;
var right = 1;
$('.title span').click(function () {
console.log($(this).context.innerText + ' left: ' +titles[left].context.innerText + ' right: ' +titles[right].context.innerText)
if($(this).context==titles[left].context) {
left = (left==0) ? max : --left;
right = (right==0) ? max : --right;
$('.title').animate({
"left": "+=150px"
}, 500);
$('.playlist').animate({
"left": "+=300px"
}, 500);
}
if($(this).context==titles[right].context) {
left = (left==max) ? 0 : ++left;
right = (right==max) ? 0 : ++right;
$('.title').animate({
"left": "-=150px"
}, 500);
$('.playlist').animate({
"left": "-=300px"
}, 500);
}
});
Related
In the middle of my div scroll-parent you may see borders.
.scroll-parent{
position: relative;
width: 100px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;
}
.scroll-child {
height: 100%;
margin-right: -50px; /* maximum width of scrollbar */
padding-right: 50px; /* maximum width of scrollbar */
overflow-y: scroll;
}
.scroll-parent::before {
content: "";
top: 50%;
position: absolute;
margin-top: -15px;
height: 32px;
z-index: -1;
left: 0;
right: 0;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
}
ul {
list-style: none;
}
ul::before,
ul::after {
content: "";
display: block;
width: 100%;
height: 80px;
}
<div class="scroll-parent">
<div class="scroll-child">
<ul class="datepicker" id="datepicker">
<li class="datepicker-nr">1</li>
<li class="datepicker-nr">2</li>
<li class="datepicker-nr">3</li>
<li class="datepicker-nr">4</li>
<li class="datepicker-nr">5</li>
<li class="datepicker-nr">6</li>
<li class="datepicker-nr">7</li>
<li class="datepicker-nr">8</li>
<li class="datepicker-nr">9</li>
<li class="datepicker-nr">10</li>
<li class="datepicker-nr">11</li>
<li class="datepicker-nr">12</li>
<li class="datepicker-nr">13</li>
<li class="datepicker-nr">14</li>
<li class="datepicker-nr">15</li>
<li class="datepicker-nr">16</li>
<li class="datepicker-nr">17</li>
<li class="datepicker-nr">18</li>
<li class="datepicker-nr">19</li>
<li class="datepicker-nr">20</li>
<li class="datepicker-nr">21</li>
<li class="datepicker-nr">22</li>
<li class="datepicker-nr">23</li>
<li class="datepicker-nr">24</li>
</ul>
</div>
</div>
Whenever the user scrolls, the content within that box in the middle should get a larger font size. How can I do this?
jsfiddle
Use this Jquery Plugin :
iOS 7 Style jQuery 3D Animated Value Selector - Drumjs
https://www.jqueryscript.net/form/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs.html
I'm trying to create a horizontal dropdown (err.. dropside?).
When clicked, it expands to the right to show more options, and the user can click the option they want.
I have found this JsFiddle but it is implemented using ul and li, not select and option. Does this really matter for the purposes of clicking a menu item and dispatching an action? It also expands on hover, not on click. And when a menu item is clicked, I need the menu to stay open until the 'X' on the left is clicked. If anyone could help me start on this it would be much appreciated.
Here's an image of what I'm trying to do
Try something like this:
[...document.getElementsByClassName("item")].forEach(i => i.addEventListener("click", function(e) {
e.stopPropagation();
console.log(this);
}));
document.getElementById("open-button").addEventListener("click", function() {
this.parentElement.classList.add("open");
});
document.getElementById("close-button").addEventListener("click", function() {
this.parentElement.classList.remove("open");
});
body {
background: black;
}
.menu {
background: white;
border-radius: 17px;
height: 34px;
width: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.menu .item {
display: none;
color: grey;
}
.menu #open-button {
display: block;
}
.menu #close-button {
display: none;
color: grey;
}
.menu.open {
justify-content: space-around;
width: 300px;
}
.menu.open .item {
display: block;
}
.menu.open .item:hover {
color: black;
}
.menu.open #close-button {
display: block;
}
.menu.open #close-button:hover {
color: black;
}
.menu.open #open-button {
display: none;
}
<div class="menu">
<div id="open-button">Menu</div>
<div id="close-button">✕</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div>
if you for some reason have to use select and option in your markup here's how to do it, but it's a lot of work https://www.w3schools.com/howto/howto_custom_select.asp
or you can do something like this:
var btnToggle = document.querySelector(".js-toggle");
btnToggle.addEventListener("click", handleMenu);
function handleMenu() {
var menu = document.querySelector(".js-menu");
if ( menu.classList.contains("is-showing") )
{
menu.classList.remove("is-showing");
}
else
{
menu.classList.add("is-showing");
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #333;
}
.navigation {
background: #fff;
border-radius: 9999px;
display: inline-flex;
align-items: center;
padding: 20px;
}
.menu {
list-style: none;
padding-left: 22px;
margin: auto;
display: none;
}
.menu.is-showing {
display: inline-flex;
}
.menu__item {
background: #fff;
}
.box {
display: block;
background: #999;
width: 60px;
height: 60px;
margin: 0 22px;
}
.box:hover {
background: #498cdf;
}
.toggle {
padding: 0;
background: #e7e7e7;
border: none;
width: 60px;
height: 60px;
}
<div class="navigation">
<button class="toggle js-toggle">x</button>
<ul class="menu js-menu">
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
<li class="menu__item">
<span class="box"></span>
</li>
</ul>
</div>
Try this
<nav>
<a class="nav-btn">Logo</a>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</nav>
a, li {
display: block;
width: 100px;
height: 100px;
background-color: red;
float: left;
border: 1px solid yellow;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
display: none;
}
.expand{
display: block;
}
$("nav .nav-btn").click(function(){
$("nav ul").toggleClass("expand");
});
a, li {
display: block;
width: 100px;
height: 100px;
background-color: red;
float: left;
border: 1px solid yellow;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
display: none;
}
.expand{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a class="nav-btn">Logo</a>
<ul>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</nav>
Let's say we have a navigation div which contains elements. Below navigation div there is some bar that must expand to the width where it matches one of the navigation elements (3rd one in this case).
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
From this code, main_navigator_progression div must expand its width so it matches BTN 3.
You can see the concept here.
I've written a simple JS code, but it doesn't seem to be neat and doesn't always work:
function initializeProgressorPos() {
document.getElementById("main_navigator_progression").setAttribute("style", ("width: " + (document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().x - document.getElementsByClassName("main_nav_btn")[2].getBoundingClientRect().width) + "px"))
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
Is there any way to create such a function that works even when browser is scaled? What could be wrong with my code? Is there any chance that this can be done with pure css?
As you have floatted the element to the right, first you have to get the width of document, then exclude the width from left of document to the right of element from that amount:
function initializeProgressorPos() {
var elementRight=$(document).width()- $('.main_nav_btn:eq(2)').offset().left - $('.main_nav_btn:eq(2)').width();
$("#main_navigator_progression").css({"width": elementRight + "px"});
}
initializeProgressorPos();
$(window).resize(function() {
initializeProgressorPos();
});
body {
margin: 0;
overflow-y: scroll;
}
#main_navigator {
position: fixed;
background-color: black;
width: 100%;
}
#main_navigator_upper {
position: relative;
display: flex;
flex-direction: row;
}
#main_navigator_logo {
width: 416px;
height: 120px;
background-color: white;
}
#main_navigator_r1 {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
padding: 0;
padding-right: 5%;
text-align: center;
margin-top: 0px;
height: 98px;
list-style-type: none;
}
#main_navigator_r1 li {
flex-grow: 1;
flex-shrink: 1;
/* flex-basis: 0; */
flex-basis: auto; /* new */
}
#main_navigator_l1 {
flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
color: white;
display: block;
height: 100%;
font-family: "nexa_bold";
font-size: 0.9em;
text-decoration: none;
}
#main_navigator_s1 {
display: inline-block;
width: 2px;
height: 35px;
background-color: #B28039;
}
#main_navigator_regbox {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#main_navigator_regbox li {
display: inline-block;
flex-grow: 0.1;
flex-shrink: 0.1;
}
#regbox_signin {
display: block;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
color: #B28039;
font-size: 0.9em;
font-family: "nexa_light";
}
#regbox_signup {
display: block;
white-space: nowrap;
text-decoration: none;
color: white;
font-size: 0.9em;
font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
display: inline-block;
width: 1.4px;
height: 13.5px;
background-color: white;
}
#main_navigator_bottom {
background-color: black;
height: 24px;
}
#main_navigator_progression {
position: relative;
background-color: #B28039;
height: 100%;
width: 416px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="main_navigator">
<div id="main_navigator_upper">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li id="main_navigator_l1">
<div id="main_navigator_s1"></div>
</li>
<li>
<ul id="main_navigator_regbox">
<li>
<p id="regbox_signin">sign in</p>
</li>
<li>
<div id="main_navigator_regbox_s1"></div>
</li>
<li>
<a id="regbox_signup" href="sign_up">sign up</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="main_navigator_bottom">
<div id="main_navigator_progression"></div>
</div>
</div>
</body>
</html>
This is a proof of concept.
You can use a combination of a custom HTML5 data-* attribute and an ::after pseudo-element on your navigation menu (and a dash of javascript) to indicate which menu item you have most recently selected.
Despite the dash of javascript, most of the work is done using CSS.
Working Example:
var menu = document.querySelector('nav ul');
var menuItems = [... menu.getElementsByTagName('li')];
function selectMenu() {
menu.dataset.selectedMenu = (menuItems.indexOf(this) + 1);
}
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', selectMenu, false);
}
nav ul {
display: flex;
position: relative;
margin: 0;
padding: 0;
}
nav li {
flex: 0 0 60px;
padding: 12px 12px 24px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
list-style-type: none;
cursor: pointer;
}
nav ul::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 12px;
background-color: rgba(0, 0, 0, 0.5);
transition: width 0.6s linear;
}
nav ul[data-selected-menu="1"]::after {
width: 80px;
}
nav ul[data-selected-menu="2"]::after {
width: 160px;
}
nav ul[data-selected-menu="3"]::after {
width: 240px;
}
nav ul[data-selected-menu="4"]::after {
width: 320px;
}
nav ul[data-selected-menu="5"]::after {
width: 400px;
}
<nav>
<ul data-selected-menu="1">
<li class="active">Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
I'm working with PHP loops and creating multiple li in one ul.
The problem is, that I need to show every fourth li when I click on one of the three previous li.
At the moment It only works with the first previous li with this:
$('.last_news li').on('click', function(){
$('+ .actu_details',this).toggleClass('expend');
});
Anyone got some clues
$('.last_news li').on('click', function() {
$('+ .actu_details', this).toggleClass('expend');
});
last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>
You can use nextAll() to target following sibling actu_details element then use :first/:eq(0)/.eq(0)/.first() to target first li
$('.last_news li').on('click', function () {
$(this).nextAll('.actu_details:first').toggleClass('expend');
//$(this).nextAll('.actu_details').eq(0).toggleClass('expend');
});
$('.last_news li').on('click', function() {
$(this).nextAll('.actu_details:first').toggleClass('expend');
});
.last_news {
padding: 35px
}
ul {
padding-left: 0px;
margin: 0;
overflow: hidden;
}
ul li {
list-style-type: none;
cursor: pointer;
float: left;
width: 33%;
height: 250px;
background-color: red;
margin-right: 0.5%;
margin-bottom: 5px;
color: #FFF;
position: relative;
}
li:nth-of-type(3) {
margin-right: 0;
}
li:nth-of-type(4n+7) {
margin-right: 0;
}
li.actu_details {
width: 100%;
height: 0px;
background-color: green;
display: block;
}
li.actu_details.expend {
height: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="last_news">
<div class="contenu_grid">
<ul>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="une_actu">Test</li>
<li class="actu_details">
Detail
</li>
</ul>
</div>
</section>
Fiddle
I'm trying to toggle between the categories in the JSFiddle below, it works fine aside from there's a flicker when hides and shows the new content.
Is there a way to fix this?
https://jsfiddle.net/0q7fzh6u/1/
Cheers
// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
menuItem.hover(function() {
$("body").toggleClass("overlay-visible");
$(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
});
.header-categories {
position: relative;
clear: both;
background: #fff;
z-index: 10;
}
.header-categories-list {
margin-bottom: 0;
}
.header-categories-item {
display: inline-block;
vertical-align: top;
letter-spacing: 0.2rem;
line-height: 1;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-item a {
color: #000;
}
.header-categories-item-block {
display: block;
padding: 0;
border-top: 1px solid $black;
}
/* overlay */
#site-overlay {
visibility: hidden;
opacity: 0;
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #999;
transition: .25s;
}
.overlay-visible #site-overlay {
visibility: visible;
opacity: 1;
}
/* Dropdown */
.header-categories-dropdown {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-height: 300px;
padding: 15px 0;
background: #fff;
}
li {
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-dropdown.categories-dropdown-visible {
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML
<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
<ul class="header-categories-list list-unstyled">
<li class="header-categories-item header-categories-item-active">category name 1
<ul class="header-categories-dropdown list-unstyled">
<li>test 1</li>
<li>test 2</li>
</ul>
</li>
<li class="header-categories-item header-categories-item-active">category name 2
<ul class="header-categories-dropdown list-unstyled">
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
</ul>
</div>
What's causing this problem is that there is a gap between the li tags .header-categories-item, so whenever you hover over this gap you get the flick
You can remove the gap by adding margin-right: -5px; to .header-categories-item
See updated fiddle
If you remove the whitespace between the two li-tags, the flicker is gone.
I don't know how to remove the gap in CSS, though. Removing it by margin-right: -5px as Chiller has proposed seems not very reliable to me - maybe the gap is smaller or bigger in a different browser?
Edit
Found a solution: You can set font-size: 0; on the ul to remove the gap.
// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
menuItem.hover(function() {
$("body").toggleClass("overlay-visible");
$(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
});
.header-categories {
position: relative;
clear: both;
background: #fff;
z-index: 10;
}
.header-categories-list {
margin-bottom: 0;
font-size: 0;
}
.header-categories-item {
display: inline-block;
vertical-align: top;
letter-spacing: 0.2rem;
line-height: 1;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-item a {
color: #000;
}
.header-categories-item-block {
display: block;
padding: 0;
border-top: 1px solid $black;
}
/* overlay */
#site-overlay {
visibility: hidden;
opacity: 0;
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #999;
transition: .25s;
}
.overlay-visible #site-overlay {
visibility: visible;
opacity: 1;
}
/* Dropdown */
.header-categories-dropdown {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-height: 300px;
padding: 15px 0;
background: #fff;
}
li {
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-dropdown.categories-dropdown-visible {
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML
<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
<ul class="header-categories-list list-unstyled">
<li class="header-categories-item header-categories-item-active">category name 1
<ul class="header-categories-dropdown list-unstyled">
<li>test 1</li>
<li>test 2</li>
</ul>
</li>
<li class="header-categories-item header-categories-item-active">category name 2
<ul class="header-categories-dropdown list-unstyled">
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
</ul>
</div>
So either this, or you remove the whitespace in the HTML code:
<!-- ... -->
</li><li class="header-categories-item header-categories-item-active">
<!-- ... -->
// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
menuItem.hover(function() {
$("body").toggleClass("overlay-visible");
$(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
});
.header-categories {
position: relative;
clear: both;
background: #fff;
z-index: 10;
}
.header-categories-list {
margin-bottom: 0;
}
.header-categories-item {
display: inline-block;
vertical-align: top;
letter-spacing: 0.2rem;
line-height: 1;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-item a {
color: #000;
}
.header-categories-item-block {
display: block;
padding: 0;
border-top: 1px solid $black;
}
/* overlay */
#site-overlay {
visibility: hidden;
opacity: 0;
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #999;
transition: .25s;
}
.overlay-visible #site-overlay {
visibility: visible;
opacity: 1;
}
/* Dropdown */
.header-categories-dropdown {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-height: 300px;
padding: 15px 0;
background: #fff;
}
li {
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
}
.header-categories-dropdown.categories-dropdown-visible {
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML
<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
<ul class="header-categories-list list-unstyled">
<li class="header-categories-item header-categories-item-active">category name 1
<ul class="header-categories-dropdown list-unstyled">
<li>test 1</li>
<li>test 2</li>
</ul>
</li><li class="header-categories-item header-categories-item-active">category name 2
<ul class="header-categories-dropdown list-unstyled">
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
</ul>
</div>
Both work, but I'd prefer the CSS solution (or both).