I have an issue with my dropdown menu: it isn't working. However, my menu IS.
The links don't work properly either, they take me to the page but not the section.
If I take out display: none on the dropdown menu CSS it does show my menu, but not as a dropdown. The menu is properly coded and there I guess, but it somehow doesn't display correctly.
<nav>
<ul class="menu">
<li class="...">
...
</li>
<li class="item">..</li>
<div class="....">
<ul>
<li>...</li>
<li>..</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">..</li>
</ul>
</nav>
It's semantically not correct to add div inside ul. Add submenu inside the parent li to which submenu belongs.
nav {
width: 100%;
flex: 1;
}
nav ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-top: 4%;
margin: 0;
}
nav ul li {
padding: 1em 4em;
}
nav ul li a {
text-decoration: none;
margin-right: auto;
color: #000;
font-size: 17px;
}
nav ul li a:hover {
border-bottom: 2px solid #724c20;
}
li.logo {
margin-right: auto;
}
.Submenu {
display: none;
}
nav ul li:hover .Submenu {
display: block;
background-color: #724c20;
position: absolute;
margin-top: 15px;
margin-left: -15px;
}
nav ul li:hover .Submenu ul {
display: block;
margin: 10px;
}
nav ul li:hover .Submenu ul li {
width: 150px;
padding: 10px;
border-bottom: 1px;
background: transparent;
border-radius: 0;
text-align: center;
}
nav ul li:hover .Submenu ul li:last-child {
border-bottom: none;
}
nav ul li:hover .Submenu ul li a:hover {
color: #d1b9a5;
}
<nav>
<ul class="menu">
<li class="logo">
<img src="..." class="logo" alt="...">
</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
</ul>
</nav>
I use javascript to make drop down menues. Take the dropdown menu display: none;. To show drop down menu you have to do something, like click to an icon. So you have to import an icon or add a button and use javascript:
<script type="text/javascript">
$("*here comes your icon's/div's/button's id/class name you want*").click(function(){
$(".Submenu").toggleClass("active");
});
</script>
than you have to write in CSS what hapens when .Submenu will be active:
.Submenu.active {
display: block;
}
Here an exemple from my last project:
<script type="text/javascript">
$(".menu-toggle-btn").click(function(){
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
If you want to when you click on an icon and the menu drops down the icon will change to another you have to write this to your javascript script: $(this).toggleClass("fa-times"); . toggleClass("here comes your icons class name ");
If you have any other questions feel free to ask.
Related
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.
Using css how I can make a sub-menu start from the left side of the screen instead of starting it from under the parent item.
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
<nav>
<ul>
<li>
Contacts
<ul>
<li>Add Contact</li>
<li>View Contacts</li>
</ul>
</li>
<li>
Tickets
<ul>
<li>New Ticket</li>
<li>View Tickets</li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
here is a jsfiddle: http://jsfiddle.net/jhmkqrye/1/ - hope it helps
When you hover on Tickets it's sub-menu starts from below the Ticket which I want to start below the Contacts from the start of screen width to end of screen width.
you can try to set the parent position for relative and child's to absolute and then set the position using left, right, bottom, top
for example left: 0; would put your child item on the very left
edit: is jsfiddle correct? 'cause i can't seem to find any sub-menu on hover, and on click it throws 404
I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>
if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css
I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.
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
Hello stackoverflow community. I need help with my list. I need to make something like this:
As you can see, on button press, list with checkbox'es drops down. How can i make that drop down full width like in the picture? So long I made this something similar but cant figure it out, how to make full width, so that other buttons would move down. Here is my code in jsfiddle: https://jsfiddle.net/DTcHh/13790/ So to be sure I need that my ul > a would be the same size as it is but ul > li would be full width and push other buttons down.
Html:
<div class="categ-list">
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
<ul class="col-md-4 parent">
Menu link
<li>
Menu link
</li>
<li>
Menu link
</li>
<li>
Menu link
</li>
</ul>
</div>
Css:
.categ-list {
display: inline-block;
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.categ-list > ul {
display: block;
position: relative;
float: left;
text-align: center;
}
.categ-list > ul > a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.categ-list > ul > li > a {
display: block;
text-decoration: none;
color: #FFF;
border-top: 1px solid #FFF;
padding: 3px 15px;
background: #344F57 none repeat scroll 0% 0%;
margin-left: 1px;
white-space: nowrap;
}
.categ-list > ul > li > a:hover {
background-color: rgb(93, 93, 93);
}
.kat-active {
background: #3b3b3b!important;
}
.categ-list > ul > a:hover {
background: #3b3b3b;
}
.categ-list > ul > a:hover {
background: #3b3b3b;
}
.categ-list > ul:hover ul a:hover {
background: #1e7c9a;
}
.displayNone {
display: none;
}