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>
Related
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 have 5 links on my vertical nav. On screen resize my vertical nav becomes a horizontal nav with three (of those 5 links) showing and another link called menu which displays the other two remaining links.
For some reason, on screen resize, when menu appears, the list content is already displayed and then when menu is clicked, it leaves the hover properties even when you're not hovering over it. Here are visuals:
1. On screen resize, it appears like this:
2. When hovering over menu:
Which is OK. I only want the links to appear when the menu link is clicked, not hovered over. But I do not understand why menu talking up two li spaces.
3. When clicking menu:
This is OK. However, note how the Menu li is now perfectly sized.
4. After clicking on menu and then moving the mouse away from the link:
As mentioned, I do not know what's causing these issues.
Here is my current approach:
$(document).ready(function() {
$(".show").click(function() {
$(".subMenu").toggleClass("active");
return false;
});
});
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.show {
display: inline-block !important;
}
.nav ul li {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Explanation:
You have so many things messed up. Most important to note is that sub elements are inheriting from main elements. For example, if we have the following HTML:
<ul id="main_menu">
<li>list item 1</li>
<li>list item 2</li>
<li>
<ul id="sub_menu">
<li>sub list item 1</li>
</ul>
</li>
</ul>
And this CSS:
#main_menu li {/* This styling will also be applied to sub_menu!! */
color: red;
}
So if you want to apply to only direct li under main menu, use > which means only direct elements, like so:
#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
color: red;
}
Fixing the problem:
1- Add !important to sub menu:
ul.subMenu {
display: none !important;
}
2- Comment or remove this line:
.nav li:hover a {
/* color: #f4f3f3; */
}
3- Your sub menu is inheriting some unwanted styling from the main menu. Add these should fix it for you:
.subMenu a.nav-link {
background-color: #f4f3f3;
color: #333;
}
.subMenu a.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.subMenu.active {
display: block !important;
}
Here's a demo.
For some reason, on screen resize, when menu appears, the list content is already displayed
You can use jQuery's resize function to do stuff when you resize.
But I do not understand why menu talking up two li spaces.
Menu is taking up two li spaces because it contains a ul that is two spaces wide which is forcing it's width.
Adding a width to the anchor tag will make it look a little better as it won't inherit the width from the li.
a.nav-link { width: 50px;}
After clicking on menu and then moving the mouse away from the link.
Add a class to the parent of the submenu using jQuery so you can control styling.
Here's the code, hope it helps!
jQuery
$(document).ready(function() {
$(".subMenu").addClass('hide');
$(".show").click(function() {
$(".show").toggleClass('active-parent');
$(".subMenu").toggleClass("active");
$(".subMenu").toggleClass("hide");
return false;
});
});
$(window).resize(function(){
$(".subMenu").addClass('hide');
});
html
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
css
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.nav-container nav .hide{
display: none;
}
.show {
display: inline-block !important;
}
a.nav-link {
width: 50px;
}
.active-parent a.nav-link {
color: #ffffff;
background: #333;
}
.nav ul li {}
}
No 2.
You're setting both ul to display as flex, change it so it will only applied to parent ul only
.nav-container nav>ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Cosmetic for your second level links when user click the menu
.selected a,
.active a {
background-color: #333;
color: #f4f3f3;
}
I also added some class to make styling easier when the menu is open
$(this).toggleClass('selected');
(function($) {
$(document).ready(function() {
$(".show").click(function() {
$(this).toggleClass('selected');
$(".subMenu").toggleClass("active");
return false;
});
});
})(jQuery);
.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
#media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav>li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
.selected a,
.active a {
background-color: #333;
color: #f4f3f3;
}
#media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav>ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.show {
display: inline-block !important;
}
.nav ul li {}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
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 am trying to make a drop down menu, but I want to show and hide drop down just by click on the button. Currently drop down is hiding even when I click on one of the children. How to fix it?
Fiddle:
<ul id="nav">
<li class="parent"><button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Try it:
http://jsfiddle.net/zyfv6nd0/
$(document).ready(function() {
$('button').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Change your selector from $('.parent') to $('.parent button'):
$(document).ready(function() {
$('.parent button').click(function() {
$(this).next('.sub-nav').toggleClass('visible');
});
});
#nav {
list-style: none;
padding: 0;
margin: 0;
}
#nav > li {
display: inline-block;
vertical-align: top;
position: relative;
}
#nav ul.sub-nav {
position: absolute;
min-width: 200px;
display: none;
top: 100%;
left: 0;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Drop down menu only by click on button example classList.toggle pure js
/* Cross-browser solution for classList.toggle() */
function myFunction2() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("show");
} else {
var classes = x.className.split(" ");
var i = classes.indexOf("show");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("show");
x.className = classes.join(" ");
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block}
<p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn" onclick="myFunction2()">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
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);
}
});