I have a custom drop-down navigation menu that I want to use on my big cartel theme. It has HTML, CSS and Java Script.
Unfortunately, It is not working. The Java Script helps with the toggle event.
The drop-downs are on "Shop" and "About". When I click those dropdowns, they don't show.
In my Big Cartel Theme, I first tried linking to the JS file -- that didn't work.
I then put the script in the area and it still didn't work.
Here's the code working
https://codepen.io/findingcolors/pen/ZErZZgo
HTML
<div class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><i class="fa-solid fa-bars"></i> Menu</a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Shop <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
All Products
</li>
<li>
Stickers
</li>
<li>
Notepads + Sticky Notes
</li>
<li>
Bookmarks
</li>
<li>
Jewelry
</li>
<li>
Phone Straps
</li>
</ul>
</li>
<li>
About <i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
The Brand
</li>
<li>
Shipping + Returns
</li>
<li>
FAQ
</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Cart
</li>
<li>
Search
</li>
</ul>
</nav>
</div>
</div>
CSS
/* --- NAVIGATION bar --- */
.navigation {
height: 50px;
background: #fefcfc;
font-family: "Open Sans", sans-serif;
}
.nav-container {
text-align: center;
margin: 0 auto;
}
nav {
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #fefcfc;
color: #716558;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
color: #90867a;
}
nav ul li ul li {
min-width: 250px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
text-align: left;
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #fefcfc;
height: 50px;
width: 50px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
text-align: left;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: inline-block;
}
}
#nav-toggle {
position: absolute;
left: -160px;
top: 10px;
cursor: pointer;
padding: 10px 35px 16px 0px;
color: #716558;
text-decoration: none;
font-size: 16px;
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Java
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
The jQuery library was missing from the website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
After including it, the navigation menu is working now.
Related
I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
}
#navContainer ul li {
position: relative;
}
#navContainer ul li span {
display: block;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
}
#navContainer ul ul {
position: absolute;
display: none;
}
#navContainer ul li:hover ul {
width: 80%;
position: absolute;
display: block;
left: 88px;
top: 0;
}
<div id="navContainer">
<ul>
<li><span>Home</span></li>
<li>
<span>About </span>
<ul>
</ul>
</li>
<li>
<span>Quiz's</span>
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li><span>Info</span></li>
</ul>
</div>
This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears
I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.
Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.
#navContainer {
margin: 0;
padding: 0;
padding-top: 17px;
width: 220px;
position: relative;
}
#navContainer ul {
margin: 0;
padding: 0;
list-style: none;
background: lightgrey;
position: relative;
}
ul>li {
position: relative;
}
#navContainer ul li a {
text-decoration: underline;
color: orange;
display: block;
padding: 8px;
font-weight: bold;
font-size: large;
position: relative;
}
#navContainer ul>li>ul {
position: absolute;
display: none;
left: 100%;
width: 100%;
background-color: pink;
top: 0px;
}
#navContainer>ul>li:hover>ul {
display: block;
}
<div id="navContainer">
<ul>
<li>Home</li>
<li>
About
<ul>
</ul>
</li>
<li>
Quiz's
<ul>
<li>McDonalds</li>
<li>KFC</li>
<li>Burger King</li>
<li>Subway</li>
</ul>
</li>
<li>Info</li>
</ul>
</div>
You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.
Added a border to the li elements to demonstrate.
https://jsfiddle.net/rojqczsp/
You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.
I am trying to make my navigation menu responsive. I have made it so the navigation list items are hidden on mobile display and the menu tag appears ready to be clicked to show the menu but can't seem to get my list items to show on click when on mobile display. Any help please?
function toggleMenu() {
var menuBox = document.getElementById('nav-menu');
if(menuBox.style.display == "block") {
menuBox.style.display = "none";
}
else {
menuBox.style.display = "block";
}
}
header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}
header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}
header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}
header .nav-container p {
display: none;
}
#media only screen and (max-width: 600px) {
header .nav-container p {
display: block;
}
}
header .nav-container nav {
padding-top: 2rem;
}
header .nav-container nav ul {
display: block;
}
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
header .nav-container nav ul li {
position: relative;
display: inline-block;
}
header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458b;
}
header .nav-container nav ul li a:hover {
color: #00458b;
}
header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}
header .nav-container nav ul li ul li,
header .nav-container nav ul li ul a {
width: 100%;
}
header .nav-container nav ul li:hover ul {
display: block;
}
header .nav-container nav ul .menu-item-40 a {
padding: 0;
}
<header>
<div class="nav-container">
<p id="menu" onclick="toggleMenu()"> Menu</p>
<nav class="nav" id="nav-menu" role="navigation">
<ul>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">Services
<ul class="sub-menu">
<li class="nav-item">Windows
</li>
<li class="nav-item">Glass
</li>
<li class="nav-item">Doors
</li>
<li class="nav-item">Roofline
</li>
</ul>
</li>
<li class="nav-item">Our Work
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
</header>
Your mistake is in you css. Here
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}
you have given display: none to the 'ul' but you toggling the nav with your javascript.
Tip: Try using toggle in javascript
element.classList.toggle('className');
here you can have class with display: block and can toggle without checking if the element is already having display block or not.
I am working on a website where I am trying to achieve the following:
When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.
HTML:
<div class="menu-container-portal">
<a class="toggle-menu" href="#" style="display: none;">
<img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
<ul class="nav">
<li class="">
Upplev & Besök
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li class="">
Bostäder
</li>
<li>
Evenemang
</li>
<li>
Kopia (1) av Upplev & Besök
</li>
<li>
Kopia (4) av Bostäder
</li>
<li>
Mat och dryck
</li>
<li>
Shopping
</li>
</div>
</ul>
</li>
<li>
Bo & Leva
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Flytta hit & Jobba
</li>
<li>
Näringsliv
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Kontakta oss
</li>
</ul>
</div>
CSS:
.menu-container-portal ul {
margin: 0;
padding: 0;
}
.active {
background: #2b90f5;
overflow: hidden;
}
.menu-container-portal li:hover>a {
color: #fff;
background: #304040;
opacity: .7;
}
.menu-container-portal li {
margin: 0;
padding: 0;
/*width: 100%;*/
height: 15%;
/*display: inline-block;*/
;
}
.menu-container-portal a {
text-decoration: none;
}
.menu-container-portal a:hover {
color: #dadcdf;
background: #304040;
padding-bottom: 10px;
}
/*.menu-container-portal {
max-width: 900px;
margin: 10px auto;
}*/
/*.menu-container-portal {
max-width: 900px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 15px;
white-space: nowrap;
text-align:left;
} */
.menu-container-portal {
max-width: 1100px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
/* margin-left: 15px; */
white-space: nowrap;
text-align: left;
margin-left: 22.5%;
}
.toggle-menu {
display: none;
/*background: #404040;*/
padding: 10px 15px;
color: #fff;
}
.toggle-menu:hover {
opacity: 0.7;
}
.nav {
list-style: none;
*zoom: 1;
/*background:#404040;*/
display: flex;
justify-content: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 100%;
text-align: center;
}
.nav a {
padding: 10px 15px;
color: #101210;
*zoom: 1;
}
.nav>li {
float: left;
z-index: 200;
}
.nav>li>a {
display: inline-block;
}
.nav li ul {
display: flex;
position: absolute;
left: -99999px;
z-index: 100;
width: 100%;
/*height: 100%;*/
padding-bottom: 0.5em;
justify-content: left;
}
.nav li li a {
display: block;
/* display:inline-block; */
/*background: #404040;*/
/*position: relative;*/
z-index: 99999;
/*height: 100%;*/
width: auto;
/* width:100%; */
color: #fff;
}
.nav li li li a {
background: #404040;
/* z-index:200; */
;
}
.nav li {
/*position: relative;*/
;
}
.nav>li.hover>ul,
.nav>li.hover>ul :active {
left: 0;
overflow: hidden;
}
.nav li li.hover ul {
left: 100%;
top: 0;
overflow: hidden;
}
.arrow {
display: none;
}
.sub {
background: #304040;
opacity: 0.9;
}
ul .sub {
padding-top: 10px;
}
.menu-container-portal a:hover .nav li li li a {
background: #ff0000;
}
/* Bestämma undermenyns storlek */
.sub2 {
column-width: auto;
text-align: left;
}
.test1 {
display: inline-flex;
margin-left: 22.5%;
}
.test1-show {
display: block;
margin-left: 22.5%;
color: green !important;
}
jQuery:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
/*$(".test1").addClass("active");
$('.nav a').filter(function(){
return this.href==location.href;}).parent()
.addClass('active').siblings().removeClass('active');
/*$(".nav > li > a").addClass("active");*/
$(document).ready(function () {
$('a(.active) a').hide();
$('a(.active)').hover(
function () {
$('.test1').hide();
},
function () {
$('.test1').show();
});
});
}
});
}
Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)
I was thinking about using one of these that I have found here:
http://jsfiddle.net/4G7TJ/1/
http://jsfiddle.net/MGkQC/7/
2019 - 01 - 21:
An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:
jQuery:
$(document).ready(function() {
$(".nav li [href]").each(function() {
if (this.href == window.location.href) {
$(this).css("background", "red");
$(this).addClass("hover");
$(this).parent().find('ul.sub').css("left","0");
}
}); });
I was thinking about using .toggle somehow but cant really seem to get it working.
Intended you expecting the following functionality:
$("ul.nav > li > a").hover(
function(e) {
$('ul.nav > li > a.on-hover').removeClass('on-hover');
$(this).addClass('on-hover');
},
function(e){
//If you expecting to hide on-hover-out as well, uncomment the below line
//$('ul.nav > li > a.on-hover').removeClass('on-hover');
});
See in action: http://jsfiddle.net/kn761qgL/ and confirm.
I have two drop down menus on a navigation bar, and have gotten the icons to toggle as long as that anchor is clicked, but i can not figure out how to get one to reset if a separate sub menu is clicked. I'm asking if there's a way to make this happen with how it is laid out now, and if not, how do i achieve this?
I'm also sorry in advance if this whole thing is littered with rookie mistakes.
I tried to condense the JSfiddle as much as possible, but you may need to expand the side part to see the affected icons to the right. I left out the responsive portion.
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
$("nav ul li a").click(function() {
$(this).find("i").toggleClass("fa-angle-down fa-angle-up");
});
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", sans-serif;
background: url(img/sunset.jpg);
background-attachment: fixed;
background-position: center;
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
background: #000000;
width: 100%;
box-sizing: border-box;
}
.header-icons {
color: white;
}
header nav ul li a.active span {
color: red;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: inline-flex;
}
header nav ul li {
list-style: none;
position: relative;
}
.sub-menu {
color: fff;
}
header nav ul li ul {
position: absolute;
left: 0;
display: none;
}
header nav ul li.active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: auto;
text-align: center;
}
header nav ul li ul li a {
background: linear-gradient(#000000, #34282C);
border-style: inset;
border-color: #000;
}
/*full screen header*/
header nav ul li a {
font-family: "Helvetica Neue", sans-serif;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
transition: .25s;
font-weight: ;
color: #000000;
background: #2196f3;
}
header nav ul li a.active {
background: #25383C;
font-weight: normal;
color: #fff;
}
header nav ul li a.active:before {
content: '\f096';
font-family: fontAwesome;
font-size: 25%;
position: absolute;
line-height: 50px;
bottom: 20px;
right: 2px;
color: #fff;
cursor: pointer;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>
<body>
<header>
<nav>
<ul>
<li><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><span class="header-icons"><i class="far fa-image fa-fw"></i></span>Portfolio<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link </li>
<li>Link </li>
<li>Link </li>
<li>Link </li>
</ul>
</ul>
</nav>
</div>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
</body>
This is another solution just for your reference. I check for the active class under li tag, then remove or add the fa-angle-down or fa-angle-up class on i tag.
$('.menu-toggle').click(function(){
$('nav').toggleClass('active')
})
$('ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
// Check for active class
if($(this).hasClass('active')){
$(this).parent().find("i").removeClass("fa-angle-up").addClass("fa-angle-down");
}
$(this).find("i").toggleClass("fa-angle-down fa-angle-up");
})
https://jsfiddle.net/80wne34L/79/
Normally this is achieved by:
Make all arrows down.
Make clicked arrow up.
This function will work for you:
$("nav ul li a").click(function() {
// Cache variables (for speed)
var $this = $(this),
$arrow = $this.find('.sub-menu i');
// Make all arrows point down, excepted clicked arrow
$('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');
// Toggle this arrow
$arrow.toggleClass("fa-angle-down fa-angle-up");
});
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
});
// Move into $(document).ready() for good practices
$("nav ul li a").click(function() {
// Cache variables (for speed)
var $this = $(this),
$arrow = $this.find('.sub-menu i');
// Make all arrows point down, excepted clicked arrow
$('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');
// Toggle this arrow
$arrow.toggleClass("fa-angle-down fa-angle-up");
});
})
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", sans-serif;
background: url(img/sunset.jpg);
background-attachment: fixed;
background-position: center;
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
background: #000000;
width: 100%;
box-sizing: border-box;
}
.header-icons {
color: white;
}
header nav ul li a.active span {
color: red;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: inline-flex;
}
header nav ul li {
list-style: none;
position: relative;
}
.sub-menu {
color: fff;
}
header nav ul li ul {
position: absolute;
left: 0;
display: none;
}
header nav ul li.active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: auto;
text-align: center;
}
header nav ul li ul li a {
background: linear-gradient(#000000, #34282C);
border-style: inset;
border-color: #000;
}
/*full screen header*/
header nav ul li a {
font-family: "Helvetica Neue", sans-serif;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
transition: .25s;
font-weight: ;
color: #000000;
background: #2196f3;
}
header nav ul li a.active {
background: #25383C;
font-weight: normal;
color: #fff;
}
header nav ul li a.active:before {
content: '\f096';
font-family: fontAwesome;
font-size: 25%;
position: absolute;
line-height: 50px;
bottom: 20px;
right: 2px;
color: #fff;
cursor: pointer;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
</head>
<body>
<header>
<nav>
<ul>
<li><span class="header-icons"><i class="fas fa-pen-square fa-fw"></i></span>Services<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>
<a href="#">
<span class="header-icons"><i class="far fa-image fa-fw"></i></span> Portfolio
<span class="sub-menu"><i class="fas fa-angle-down fa-fw"></i></span>
</a>
<ul>
<li>Link </li>
<li>Link </li>
<li>Link </li>
<li>Link </li>
</ul>
</ul>
</nav>
</div>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
</body>
Trying to get 3 level dropdown working. In Opencart I have been using a third party repsonsive menu which works great. Demonstrated and available here http://cssmenumaker.com/menu/responsive-flat-menu
However, Opencart doesn't support 3 level categories so an addon is needed https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=19296
the 3rd levels categories are loaded but no displaying. Can anyone help get the thrid category and two systems merged and displaying over 1000px and even loading too with a + symbol?
Here is the dropdown menu in action at Plunkr https://plnkr.co/edit/hZG4pbVCXQupf2kgqoKF?p=preview
<div id="cssmenu"><div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<div class="has-sub"><span class="submenu-button"></span>
<ul>
<li>Designer Videos</li>
</ul>
</div>
</li>
<li> Bathroom Cabinets</li>
</ul>
</li>
</ul>
</div>
Here's my version, without changing your html and js. All of the changes are strictly within css. Most of the fix lied in getting rid of the following:
#cssmenu ul ul ul {
margin-left: 100%;
}
#cssmenu ul ul {
left: -9999px;
}
https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview
I could not understand your question properly but from what I understood I have a created a two level dropdown using jQuery. 'div' tag is used inside the 'li' tag so the HTML has to be structured just a little more.
$(document).ready(function() {
$("#first li").children('ul').hide();
$("#first li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
$("#second li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
line-height: 1;
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
#cssmenu:after,
#cssmenu > ul:after {
line-height: 0;
display: block;
clear: both;
height: 0;
content: '.';
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
border-radius: none;
background: #515151;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: #fff;
}
#first ul li a {
background-color: white;
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: black;
margin-left: 20px;
}
#first ul ul li a {
position: relative;
left: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul id="first">
<li class="has-sub">Extractor Fans
<ul id="second">
<li>
<div>
<a class="arrow has-2nd-sub" href="#">Bathroom Shower</a>
</div>
<ul id="third">
<li class="has-3rd-sub">
<div>Designer Videos</div>
<div class="has-sub"><span class="submenu-button"></span>
</div>
</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>
You shouldn't use a div inside the <li> element.
So it seems to work like this:
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<ul class="has-sub submenu-button">
<li>Designer Videos</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>
See https://plnkr.co/edit/Xc0jSmZd3Qa0koklgUBG?p=preview
Just change in css and you get the result what you have:
/* Line no 575*/
#cssmenu > ul > li > ul > li > div {
left: -100%;
top: 0px;
}
/* Line no 171*/
#cssmenu ul ul ul {
top: 0;
left: 0;
}
Check the link: https://plnkr.co/edit/qqqYbmwftggcggzvgjAQ?p=preview