I'm in trouble with some li in a menu. I made a sandbox with what i have made, i'm struggling at making the div in blue fill the height correctly or with auto height. The menu on the left (red one) is okay. That should be like in this menu (https://www.superc.ca/ in "EPICERIE EN LIGNE") : https://i.stack.imgur.com/aKo36.png
My CSS :
#header .navbar-responsive-collapse-mainMenu {
border-top: gray;
padding: 0;
border-top-width: 2px;
}
#header .navbar-responsive-collapse-mainMenu span.title {
color: #242932;
font-size: 12px;
letter-spacing: 0;
line-height: 14px;
text-align: center;
}
#header .navbar-responsive-collapse-mainMenu .nav-menu-header {
margin-left: 160px;
}
#header .navbar-responsive-collapse-mainMenu ul li a {
font-family: rubikmedium;
color: #242932;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 17px;
}
#header
div.navbar-responsive-collapse-mainMenu
ul.nav-menu-header
> :first-child.open
> a {
color: #e31937;
}
#header
div.navbar-responsive-collapse-mainMenu
ul.nav-menu-header
> :first-child
> a {
padding-left: 0;
}
#header .open > .dropdown-menu {
display: flex;
flex-direction: column;
left: -161px;
height: 550px;
background-color : black;
width: 1440px;
}
#header .ul-level-1 .li-level-1 {
height: 40px;
width: 264px;
background-color: #FF7276;
margin-left: 160px;
}
#header .ul-level-1 .li-level-1 a {
color: #242932;
font-family: latoregular;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
#header .ul-level-1 .li-level-1 .ul-level-2 {
margin-left: 275px;
width: 1005px;
display: flex;
flex-wrap: wrap;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
width: 265px;
margin-bottom: 8px;
margin-left : 20px;
background-color : #add8e6;
display: inline-block;
position: relative;
}
This is my html :
<header id="header">
<nav class="navbar ng-isolate-scope" data-rbs-website-menu="" data-block-id="mainMenu" style="margin-bottom: 0;">
<div class="collapse navbar-collapse navbar-responsive-collapse-mainMenu">
<ul class="nav navbar-nav nav-menu nav-menu-header">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" target="_self" aria-expanded="true">
Les produits <b class="caret"></b>
</a>
<ul class="dropdown-menu ul-level-1">
<li class=" li-level-1">
<a target="_self">offre du moment</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-2">
<li class=" li-level-2">
<a target="_self">First Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">first sub-element</a>
</li>
<li class=" li-level-3">
<a target="_self">second sub-element</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Second Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Third Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Ciseaux, équerres, compas</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fourth Category
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
</ul>
</li>
<li class=" li-level-1">
<a target="_self">Les produits les plus vendus</a>
</li>
<li class=" li-level-1">
<a target="_self">Cartouches d’encre</a>
</li>
<li class=" li-level-1">
<a target="_self">Imprimantes</a>
</li>
<li class=" li-level-1">
Papiers
</li>
<li class=" li-level-1">
<a target="_self">Fauteuils & chaises</a>
</li>
<li class=" li-level-1">
<a target="_self">Services généraux</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
This is my sandbox if you have any idea : https://codepen.io/Kh4yz/pen/XWEqOqN
You can always inspect a webpage and see how the CSS is implemented.
#header .ul-level-1 .li-level-1 .ul-level-2 {
margin-left: 275px;
width: 1005px;
/* Remove flex */
column-count: 3;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
width: 265px;
margin-bottom: 8px;
margin-left : 20px;
background-color : #add8e6;
display: inline-block;
position: relative;
float: left; /* This is missing */
}
Related
I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?
this is the HTML code
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
This is js:
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>
and this is CSS:
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color:black;
font-family: IRANSans;
font-weight: 400;
}
Here you go...
Just change this...
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
...to this.
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
$(document).ready(function() {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function() {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color: black;
font-family: IRANSans;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to build a menu with a submenu. I used forEach to loop over the menu items and inside of it I used a for loop to show the submenu for that specific menu. However when I click on the parent menu all the submenus appear (Example 1 below)
I'm fairly new to Javascript. Is there a way to fix this? or maybe a better way to do it?.
Thanks!
Example 1
Here is the JS code:
const navMobile = document.querySelector(".mobile-nav");
const menuLink = navMobile.childNodes;
const subMenu = document.querySelectorAll(".mobile-submenu");
menuLink.forEach((link) => {
link.addEventListener("click", () => {
subMenu.forEach((sublink) => {
sublink.classList.toggle("mobile-submenu-visible");
sublink.classList.remove("collapse");
});
});
});
HTML
<ul class="mobile-nav">
<li class="nav-menu-element">
<a href="#" class="nav-link-mobile"> Product
<img
src="./images/icon-arrow-dark.svg"
class="arrow-nav-mobile"
alt=""
/></a>
<ul class="mobile-submenu collapse">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="nav-menu-element">
<a href="#" class="nav-link-mobile">Company
<img
src="./images/icon-arrow-dark.svg"
class="arrow-nav-mobile"
alt=""
/></a>
<ul class="mobile-submenu collapse">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="nav-menu-element">
<a href="#" class="nav-link-mobile">Connect
<img
src="./images/icon-arrow-dark.svg"
class="arrow-nav-mobile"
alt=""
/></a>
<ul class="mobile-submenu collapse">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
<nav class="nav-btns-mobile">
Login
Sign Up
</nav>
</ul>
<ul class="desktop-nav">
<li class="nav-link">
Product
<img
src="./images/icon-arrow-light.svg"
class="arrow-nav"
alt=""
/>
<ul>
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="nav-link">
Company
<img
src="./images/icon-arrow-light.svg"
class="arrow-nav"
alt=""
/>
<ul>
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="nav-link">
Connect
<img
src="./images/icon-arrow-light.svg"
class="arrow-nav"
alt=""
/>
<ul>
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
CSS:
.mobile-nav {
background-color: white;
position: absolute;
left: 50%;
top: 5rem;
transform: translateX(-50%);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2rem;
padding: 2rem;
border-radius: 0.6rem;
box-shadow: 0px 5px 30px 4px rgba(0, 0, 0, 0.13);
visibility: hidden;
}
.mobile-nav-open {
visibility: visible;
}
.nav-link-mobile {
font-family: "Ubuntu", sans-serif;
font-size: 1.4rem;
font-weight: 400;
color: hsl(208, 49%, 24%);
cursor: pointer;
text-decoration: none;
}
.arrow-nav-mobile {
width: 14px;
}
.mobile-submenu {
list-style: none;
font-family: "Ubuntu", sans-serif;
color: hsl(236, 11%, 49%);
background-color: hsl(0, 0%, 93%);
padding: 2rem 7rem;
font-size: 1.2rem;
margin-top: 2rem;
border-radius: 0.6rem;
cursor: pointer;
}
.mobile-submenu li {
padding-bottom: 1rem;
}
.mobile-submenu-visible {
display: block;
}
.collapse {
display: none;
}
Here's what I did, though when I try your CSS I can't seem to find the link to toggle the sub menu. Basically I add some id to your menuLink and only change the class of sub menu based on the id of the link you clicked.
Javascript
const navMobile = document.querySelector(".mobile-nav");
const menuLink = navMobile.childNodes;
const subMenu = document.querySelectorAll(".mobile-submenu");
menuLink.forEach((link) => {
link.addEventListener("click", () => {
subMenu.forEach((sublink) => {
const dictionary = {
'product-link': 'product-submenu',
'company-link': 'company-submenu',
'connect-link': 'connect-submenu'
}
if (dictionary[link.id] === sublink.id) {
sublink.classList.toggle("mobile-submenu-visible");
sublink.classList.remove("collapse");
// sublink.classList.toggle("collapse"); // uncomment this and delete the remove("collapse") and else block if you want it to be toggle able
} else {
sublink.classList.toggle("mobile-submenu");
sublink.classList.add("collapse");
}
});
});
});
HTML
<ul class="mobile-nav">
<li class="nav-menu-element" id="product-link">
<a href="#" class="nav-link-mobile"> Product
<img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
<ul class="mobile-submenu collapse" id="product-submenu">
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="nav-menu-element" id="company-link">
<a href="#" class="nav-link-mobile">Company
<img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
<ul class="mobile-submenu collapse" id="company-submenu">
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="nav-menu-element" id="connect-link">
<a href="#" class="nav-link-mobile">Connect
<img src="./images/icon-arrow-dark.svg" class="arrow-nav-mobile" alt="" /></a>
<ul class="mobile-submenu collapse" id="connect-submenu">
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
<nav class="nav-btns-mobile">
Login
Sign Up
</nav>
</ul>
<ul class="desktop-nav">
<li class="nav-link">
Product
<img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
<ul>
<li>Overview</li>
<li>Pricing</li>
<li>Marketplace</li>
<li>Features</li>
<li>Integrations</li>
</ul>
</li>
<li class="nav-link">
Company
<img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
<ul>
<li>About</li>
<li>Team</li>
<li>Blog</li>
<li>Careers</li>
</ul>
</li>
<li class="nav-link">
Connect
<img src="./images/icon-arrow-light.svg" class="arrow-nav" alt="" />
<ul>
<li>Contact</li>
<li>Newsletter</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
AM trying to have to actions on a nav menu (open and close)
this is my code :
Here, i can open the item and hide it when i click outside BUT I need also to close the item when i click on the link .menu-item-has-children > a
var click_item = function() {
$('.menu-item-has-children > a').on('click', function() {
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
if ($(this).attr('aria-expanded') === "true") {
console.log("ppppp");
$(this).attr('aria-expanded', false);
$(this).removeClass('is-opened');
EltToToggle.removeClass('show');
console.log("click true")
} else if ($(this).attr('aria-expanded') === "false") {
$(this).attr('aria-expanded', true);
$(this).addClass('is-opened');
EltToToggle.addClass('show');
console.log("click false")
}
});
}
click_item();
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
// If the target of the click isn't the sub_menu
if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
console.log("ok")
}
click_item();
});
.menu {
display: flex;
}
li {
margin: 10px;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 50%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
.menu-item-has-children>a {
position: relative
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a:after {
content: "\f077";
font-family: FontAwesome!important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: inherit;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-alt: "";
speak: none;
right: 1.6rem;
top: 2.3rem;
font-size: 1rem;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a[aria-expanded=true]:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>
Try to hide/show your navigation bar using css class, that will be easy and effective way to manage it.
Also replace $(document).mouseup with $(document).click, you just need clicking event, so I recommend to avoid using mouseup in such scenarios.
You can do something like this:
$(document).ready(function() {
$(document).click(function(event) {
var clickover = $(event.target);
// if the user click outside navbar
if (!clickover.hasClass("navbar")) {
$(".navbar").removeClass("in");
}
});
});
.navbar.in {
background: red;
width: 100px;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<div class="navbar in"></div>
</body>
</html>
Click outside the navbar and it'll be closed. This is just a DEMO that can help you understand how to hide/show elements by clicking events.
Here is a solution
If there are no submenus, close all parent uls with class show
I also converted the if to a toggle
$('.menu-item-has-children a').on('click', function() {
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
const expanded = $(this).attr('aria-expanded') === "true"
$(this).attr('aria-expanded', !expanded);
$(this).toggleClass('is-opened', !expanded);
EltToToggle.toggleClass('show', !expanded);
if (EltToToggle.length === 0) {
$(this).parents("ul,show").toggleClass("show",false)
}
});
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
// If the target of the click isn't the sub_menu
if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
console.log("ok")
}
});
.menu {
display: flex;
}
li {
margin: 10px;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 50%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>
try this
$(document).ready(function(){
$("*").click(function(){
$(".menu-item-has-children > a").removeClass('is-opened');
});
});
I am creating a website with a mobile menu.
The menu button should be animated the menu should initially be hidden and open when pressing the button.
It should also close and animate to the original state when either clicking the button again, or a link in it.
Right now I have several problems with my code:
1. Menu is open when I load the page
2. Menu doesn't close when clicking a link
The code is from a real website so all the links direct you to a subpage which doesn't exist in jsfiddle. I prepared the link "Club" so that it doesn't redirect you
https://jsfiddle.net/TheBB23/nmobt0c7/2/
var coll = document.getElementsByClassName("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else, like open/close menu
});
/* Responsive (Smartphone) Menu */
#media (max-width: 1000px) {
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 2%;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
right: 0;
z-index: 1;
margin-top: 50px;
background: pink;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header--is-active {
display: flex;
}
<div class="nav">
</div>
<div id="BurgerSpace">
<div class="header">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="mobilemenuspace">
<div class="mobilemenuitems">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2> Login</h2>
<li>
CLUB
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?module=*kontakt">Kontakt</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*vorstand">Vorstand</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*mitgliedsantrag">Mitgliedschaft</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*ueber_uns">Über uns</a>
</li>
</ul>
</li>
<li>
HOCKEY
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1.Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1.Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jugend <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
<li class="menulevel2">
<a class=" " href="?action=*MJA">Männliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MJB">Männliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnA">A Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnB">B Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnC">C Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnD">D Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnE">E Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJA">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJB">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaA">A Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaB">B Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaC">C Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaD">D Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaE">E Mädchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_gruppe&id=975">Kalender</a>
</li>
</ul>
</li>
<li>
TENNIS
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Herren">HERREN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Damen">DAMEN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
</li>
</ul>
</li>
<li>
UHLEN.TV
</li>
<li>
MEIN.HTCU
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=profile_edit">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_interessen">Meine Interessen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_meinetermine">Meine Termine</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
</li>
</ul>
</li>
<li>
ADMIN
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">KASSE <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?module=kasse">KASSE</a>
<li class="menulevel2">
<a class=" " href="?action=kasse_tasks">Startseite</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=kasse_beleg">SPESEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Belege <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_angebote">Angebote</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
</li>
</ul>
</li>
<li class="menulevel2">
<a class=" " href="?action=members_beitragaktuell">BEITRÄGE</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Rechnungen <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_faellig">Übersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_einzug">SEPA-ÜW/Einzug</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Buchführung <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_journal">Journal</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bilanzoffenk">Übersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Barkasse <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Bankkonten <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_kontouebersicht">(Übersicht)</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_overview">ÜBERBLICK</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_basis">BASISKONFIG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_optionen">OPTIONEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel1">
VORLAGEN <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=admin_mailtemplates">MAIL</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_pdftemplates">PDF</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_static">HTML</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_antraege">Anträge</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
</li>
</ul>
</li>
</div>
</div>
</div>
</div>
1.) If the menu is open when the page is called, you may want to hide it until called using style="display: none;" on the mobilespacemenu-class.
Edit: If you really want to use JS to hide the menu on page load, you could use: document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";, although referencing using an Id might be a better option here.
2.) Add an EventListener to the div, reacting on clicks and hiding the menu.
I am not quite sure whether this covers all points (and if I determined the menu correctly).
I am trying to make a custom tree view to shop trough diverse categories on my website. You can see what I want to do here on fiddle. I need the second level UL to take all the space under the current row of selected li without making other li of the row moving.
Here is my code
HTML:
<ul Class="CategoriesContainer">
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
CSS:
.CategoriesContainer{
width:90%;
display:Block;
list-style:none;
}
.CategoryButton{
height:130px;
width:130px;
display:inline-block;
margin-left:5px;
margin-top:5px;
background-color:lightgray;
text-align:center;
cursor:pointer;
list-style-type:none;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.UpperHalf {
display:block;
height:50%;
width:100%;
}
.LowerHalf {
display:block;
height:50%;
width:100%;
}
.CategoryImage
{
height:40px;
width:40px;
vertical-align:middle;
}
.CategoryText {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.TreeContainer {
width:100%;
display:none;
}
.Toggled
{
left:0;
top:0;
padding:0;
margin:0;
white-space:nowrap;
display:block;
background-color:green;
}
Javascript
$(".CategoryButton").click(function () {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled"))
{
$(Container).removeClass("Toggled");
}
else
{
$(Container).addClass("Toggled");
}
});
Edit
There is a mock up of what I am trying to do.
Regards
You can make the containers same row not moving down adding:
.CategoryButton{
min-height: 130px;
vertical-align:top;
}
The problem now is that your sub-category won't be shown as you have given to the containers a fixed height (130px) while the 2 divs inside gets all the height (50% height each), so there's no room for your subcategory. It will be shown (overflow is visible) but won't move the elements below as the height of the container will always be 130px.
You may fix this changing the height to min-height:130px; and as the height is a fixed amount add height:65pxto the elements inside. This way the container height will change when the subcategory is shown:
JSFIDDLE
You can add float: left to the ul elements and also add some margin-bottom to display them correctly:
$(".CategoryButton").click(function() {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled")) {
$(Container).removeClass("Toggled");
} else {
$(Container).addClass("Toggled");
}
});
.CategoriesContainer {
width: 90%;
display: Block;
list-style: none;
}
.CategoryButton {
height: 130px;
width: 130px;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
background-color: lightgray;
text-align: center;
cursor: pointer;
list-style-type: none;
margin-bottom: 40px;/*add margin-bottom*/
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.UpperHalf {
display: block;
height: 50%;
width: 100%;
}
.LowerHalf {
display: block;
height: 50%;
width: 100%;
}
.CategoryImage {
height: 40px;
width: 40px;
vertical-align: middle;
}
.CategoryText {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.TreeContainer {
width: 100%;
display: none;
}
.Toggled {
left: 0;
top: 0;
padding: 0;
margin: 0;
white-space: nowrap;
display: block;
background-color: green;
float: left;/*add float left*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul Class="CategoriesContainer">
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
</ul>