Problems converting pure CSS responsive menu for mobile - javascript

I have existing pure CSS menu for the desktop which expands from left to right when hover.
<nav id="nav">
<ul class="dropdown dropdown-vertical">
<span class="clearfix">
<li class="dir">ITEM 1
<ul>
<li class="dir">SUB ITEM 1
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li class="dir">SUB ITEM 2
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
</ul>
</li>
<li class="dir">ITEM 2
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li class="dir">ITEM 3
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li class="dir">ITEM 4
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li>ITEM 5</li>
<li class="dir">ITEM 6
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li>ITEM 6</li>
<li class="dir">ITEM 7
<ul>
<li>SUB MENU 1</li>
<li>SUB MENU 2</li>
</ul>
</li>
<li>ITEM 8</li>
</span>
</ul>
</nav>
CSS
#charset "UTF-8";
body {
padding: 1.25em;
/* 20 */
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 0px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown-vertical {
width: 110px;
}
ul.dropdown-vertical ul {
top: 0px;
left: 99%;
}
ul.dropdown-vertical li {
float: none;
}
ul.dropdown {
font-weight: normal;
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
ul.dropdown li {
padding: 4px 5px;
border-style: solid;
border-width: 0px 0px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #ffffff;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited {
color: #000;
text-decoration: none;
}
ul.dropdown a:hover {
color: #000;
}
ul.dropdown a:active {
color: #ffa500;
}
/* -- level mark -- */
ul.dropdown ul {
width: 110px;
margin-top: 0px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* #section Support Class `dir`
* #level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 15px;
background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 10px;
background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
I have tried to change it so that the left-to-right menu will become Accordion menu going down in mobile mode.
/* for mobile devices */
#media only screen and ( max-width: 40em)
/* 640 */
{
html {
font-size: 75%;
/* 12 */
}
#nav > a {
display: none;
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em;
/* 50 */
height: 3.125em;
/* 50 */
text-align: left;
text-indent: -9999px;
background-color: #000;
position: relative;
}
#nav > a:before,
#nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em;
/* 20 (24) */
}
#nav > ul > li:not(:last-child) > a {
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#nav li ul {
position: static;
padding: 1.25em;
/* 20 */
padding-top: 0;
}
}
I have tried to use this a base but was not able to make it work properly.
My attempt is shown in this fiddle. To see the mobile version, resize the window. The issue is:
all the menu and sub-menus expanded when click on the icon instead of showing when selected
I have tried many ways but can't seems to get it to work properly. Any help or suggestion is much appreciated.

Related

Toggle navigation bar not toggling properly

I have just created a responsive toggle navigation bar. Everything is working fine, just one problem is that it is not toggling properly as it should.
Dropdown menu can be seen when it on mouse click, and as soon as I release the mouse click, the dropdown menu disappears (refer http://testpage187.tumblr.com/). It's happening for both Desktop and Mobile (as it is responsive, I think it will work as same for both). I think the problem is with the javascript code. Please look into it. I am attaching my codes here. Thank you in advance.
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
})
body {
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif;
}
header {
position: absolute;
top: 50px;
left: 0px;
padding: 0 100px;
background: #262626;
width: 100%;
box-sizing: border-box;
}
header .logo {
color: #fff;
float: left;
height: 50px;
line-height: 50px;
font-size: 24px;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: block;
}
header nav ul li {
list-style: none;
display: inline;
position: relative;
}
header nav ul li.sub-menu:before {
content: '\f0d7';
font-family: 'fontAwesome';
position: absolute;
line-height: 50px;
color: #fff;
right: 5px;
}
header nav ul li.active.sub-menu:before {
content: '\f0d8';
}
header nav ul li ul {
position: absolute;
left: 0;
top: 33px;
background: #333;
display: none;
}
header nav ul li:active ul {
display: block;
}
header nav ul li ul li {
display: block;
width: 200px;
}
header nav ul li ul li a {
display: inline-block;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #fff;
text-decoration: none;
display: inline-block;
}
header nav ul li a:hover,
header nav ul li a:active {
background: #2196f3;
}
.menu-toggle {
color: #fff;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
#media screen and (max-width: 800px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
position: absolute;
width: 100%;
height: calc(100vh - 50px);
background: #333;
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active {
left: 0;
top: 50px;
}
header nav ul {
width: 100%;
display: block;
text-align: center;
}
header nav ul li {
width: 100%;
display: block;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
header nav ul li a {
display: block;
}
header nav ul li.active ul {
position: relative;
background: #003e6f;
}
header nav ul li ul li {
width: 100%;
text-align: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<header>
<div class="logo">LOGO</div>
<nav>
<ul>
<li>Home</li>
<li>Trending</li>
<li>Popular</li>
<li>New <i class="fas fa-caret-down"></i>
<ul>
<li>New 1</li>
<li>New 2</li>
<li>New 3</li>
<li>New 4</li>
<li>New 5</li>
</ul>
</li>
<li>Contact <i class="fas fa-caret-down"></i>
<ul>
<li>Contact 1</li>
<li>Contact 2</li>
<li>Contact 3</li>
<li>Contact 4</li>
</ul>
</li>
<li>About</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
Here's the solution:
You had a problem in the CSS. You were adding a "state" :active instead of a class .active on the siblings.
CSS problem:
header nav ul li a:hover,
header nav ul li a:active {
background:#2196f3;
}
header nav ul li:active ul{
display:block;
}
CSS Solution:
header nav ul li a:hover,
header nav ul li a.active {
background:#2196f3;
}
header nav ul li.active ul{
display:block;
}
And also I fixed a top displacement.
Here's the fiddle: Toggle solution
One simple css class as solution
add below to your style.
header nav ul li:hover > ul {
display: block;
}
then remove all scripts

Multi level dropdown menu with padding around that doesn't disappear when going to submenu

Visuals speak for themselves:
/* GENERAL STYLE */
#nav {
background: green;
height: 50px;
width: 100%;
}
/* Category red */
.category{
position: relative;
background: red;
}
/* highlight category items on hover */
.category:hover {
background-color: blue;
}
/* float and size li's */
#nav li {
float: left;
line-height: 50px;
padding: 0 10px;
margin-top:-1px;
border: 1px solid white;
}
/* default off */
ul,
li {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
}
/* a default off */
a {
text-decoration: none;
color: #fff;
}
/* hover effect */
li:hover{
opacity: 0.6;
}
/* GENERAL STYLE END */
/* hide dropdowns */
.dropdown {
display: none;
position: absolute;
background: yellow;
padding: 10px;
}
.category:hover>.dropdown{
display: block;
}
/* #nav ul li > ul > li */
.dropdown li{
position: relative;
background: orange;
margin: 0;
padding: 0;
text-align: center;
text-transform: capitalize;
}
.dropdown-subcategory{
white-space:nowrap;
}
/* #nav ul li > ul > li > ul */
.dropdown-subcategory .dropdown{
display: none;
position: absolute;
left:110%;
background: red;
text-align: center;
top: 0;
}
.dropdown li:hover ul {
display: block;
}
#nav .subcategory-item {
background: green;
color: #000;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
<div id="nav">
<ul>
<li class="category">
<a>Category</a>
<ul class="dropdown">
<li class="dropdown-subcategory">
<a>Category Item 1</a>
<ul class="dropdown">
<li class="subcategory-item"><a>Subcategory Item 1</a></li>
<li class="subcategory-item"><a>Subcategory Item 2</a></li>
<li class="subcategory-item"><a>Subcategory Item 3</a></li>
<li class="subcategory-item"><a>Subcategory Item 4</a></li>
</ul>
</li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
</ul>
</li>
</ul>
</div>
I want to hover from Category Item 1 to Subcategory Item 1, but submenu dropdown disappears when I try to move cursor to it. When you move mouse fast, submenu stays, but I think it is not wise to expect such level of dexterity from the user.
How to make submenu dropdown stay with CSS without deleting padding on .dropdown class?
Look at my code snippet!
Changing .dropdown-subcategory .dropdown property left to 100% does the job!
I delete the padding of 10px on the li also for presentational purpose, you dont have to. Be sure that you use margin and padding on the li to get the best results.
/* GENERAL STYLE */
#nav {
background: green;
height: 50px;
width: 100%;
}
/* Category red */
.category{
padding: 0 10px;
position: relative;
background: red;
}
/* highlight category items on hover */
.category:hover {
background-color: blue;
}
/* float and size li's */
#nav li {
float: left;
line-height: 50px;
margin-top:-1px;
border: 1px solid white;
}
/* default off */
ul,
li {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
}
/* a default off */
a {
text-decoration: none;
color: #fff;
}
/* hover effect */
li:hover{
opacity: 0.6;
}
/* GENERAL STYLE END */
/* hide dropdowns */
.dropdown {
display: none;
position: absolute;
}
.category:hover>.dropdown{
display: block;
}
/* #nav ul li > ul > li */
.dropdown li{
position: relative;
background: yellow;
}
.dropdown li a {
margin-top: -10px;
margin-bottom: -10px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
background: orange;
}
.dropdown li.subcategory-item a {
margin-top: -10px;
margin-bottom: -10px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
background: blue;
}
.dropdown-subcategory{
white-space:nowrap;
}
/* #nav ul li > ul > li > ul */
.dropdown-subcategory .dropdown{
display: none;
position: absolute;
left:100%;
top: 0%;
background: red;
text-align: center;
border: none;
}
.dropdown-subcategory .subcategory-item a{
background: green;
}
.dropdown li:hover ul {
display: block;
}
#nav .subcategory-item {
background: green;
color: #000;
position: relative;
width: 100%;
}
<div id="nav">
<ul>
<li class="category">
<a>Category</a>
<ul class="dropdown">
<li class="dropdown-subcategory">
<a>Category Item 1</a>
<ul class="dropdown">
<li class="subcategory-item"><a>Subcategory Item 1</a></li>
<li class="subcategory-item"><a>Subcategory Item 2</a></li>
<li class="subcategory-item"><a>Subcategory Item 3</a></li>
<li class="subcategory-item"><a>Subcategory Item 4</a></li>
</ul>
</li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
<li><a>Category Item 1</a></li>
</ul>
</li>
</ul>
</div>

Can't get sidebar nav to display properl

I can't get my child <ul> to display properly. When the dropdown is open, it displays underneath the rest of the menu. What I want is the rest of the <li> to move down to make room for the dropdown.
HTML:
<ul class="nav">
<li>One</li>
<li>Two
<ul>
<li>Two One</li>
<li>Two Two</li>
</ul>
</li>
<li>
Three
<ul>
<li>Four</li>
<li>Five</li>
</ul>
</li>
</ul>
CSS:
.nav {
width: 250px;
font-size: 18px;
color: white;
list-style: none;
display: block;
z-index: 2;
}
.nav li {
background-color: #000;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:hover {
background-color: #008cba;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
}
.nav ul li {
background-color: #cccccc;
color: #000;
border-bottom: #464646 solid 1px;
}
.nav ul li:hover {
background-color: #464646;
}
.active {
display: initial!important;
tranistion: 0.5s;
}
jQuery:
$(document).ready(function() {
$("ul.nav li ").click(function() {
$(this).find("ul").toggleClass("active");
});
});
You should:
Add "position: relative" to your ".nav ul"
Remove "height: 40px" from your ".nav li"
Change in your ".active" class from "display: initial !important" to "display: block !important"
Here are the relevant classes:
.nav li {
background-color: #000;
display: block;
line-height: 40px;
text-align: center;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
position: relative;
}
.active {
display: block !important;
transition: 0.5s;
}

How to get dropdown to display correctly?

I don't know how much of this code is necessary to show you, but I honestly can not figure out how to fix my problem so I'll just list it all. I have a dropdown menu for my mobile version of my site that is ALMOST complete. This is what it looks like when I pull up the menu (menu div):
Home
About
Contact
My problem now is the sub-menus. When I click on them I see something like this (empty space at top of li ul and next menu item covered up):
Home
<---empty space
My dropdown li
My dropdown li 2
My dropdown li 3
Contact
I've tried messing with margins, I've tried changing around display types, I've tried changing position types... The closest I've come to getting it to work correctly is to use a negative margin on the li ul to get rid of the empty space, but it still covers up the "about". I just don't understand what I can do to fix the css! Any help is greatly appreciated!!
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
}
li ul li {} li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li
</li>
<li>My Dropdown li 2
</li>
<li>My Dropdown li 3
</li>
</ul>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
You hava top value (top: 51px;) on ul which is inheriting to your sub-menus. Add top: 0; to li ul so that isn't iniherited on sub-menus.
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
top: 0;
}
li ul li {}
li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li</li>
<li>My Dropdown li 2</li>
<li>My Dropdown li 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
</script>

jQuery Custom Vertical Drop Down Menu

I have a problem in my drop-down-menu (here's my fiddle: http://jsfiddle.net/iamthestig/Vhs2v/). When you click products there's a drop-down-menu on the left side, but the other navigation elements in the bottom slide down too. Is there a way to stop that from happening? I've been reading some tutorials for the drop-down-menu for a couple of hours. And that's why I have this code. But I can't achieve what I want to happen. Hope you guys can help me out. Thanks!
Here's my code:
HTML
<body>
<nav>
<ul class="nav">
<li>Home</li>
<li class="products">
Products
<ul class="subnav-products clearfix">
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
<li>Product Four</li>
<li>Product Five</li>
<li>Product Six</li>
</ul>
</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
​
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: darkgray;
}
.nav {
width: 100px;
position: absolute;
top: 30px;
right: 20px;
list-style: none;
}
.nav li {
margin: 0 0 10px 0;
font-family: Helvetica;
font-size: 11px;
text-align: right;
text-transform: uppercase;
line-height: 1;
}
.nav li:nth-child(5) {
margin: 0;
}
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
}
.subnav-products {
width: 300px;
position: relative;
top: -31px;
left: -300px;
display: none;
}
.subnav-products li {
width: 150px;
margin: 0;
text-align: center;
float: left;
}
.subnav-products li a {
display:block;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}​
JS/JQUERY
$(".products").on("click", function(){
$(".subnav-products").slideToggle();
$(this).toggleClass("active");
});​
I gave the a elements relative positioning, and then the .subnav elements absolute positioning. After a bit of messing with the position this is what I came up with...
http://jsfiddle.net/Vhs2v/2/
CSS
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
position: relative;
}
.subnav-products {
width: 300px;
position: absolute;
top: 41px;
left: -300px;
display: none;
}

Categories

Resources