Moving <li> to next column

Moving <li> to next column - javascript

I have following html code:
<div style="column-count: 3;">
<ul>
<li><h3>Education<h3></li>
<li><a>Education 1</a></li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
</ul>
<ul>
<li><h3>Careers<h3></li>
<li><a>Careers1</a></li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li><h3>Legal<h3></li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
It divides the ul's into 3 columns. The following picture explains above code:
As you can see, Education is at the bottom of the first column, it looks weird because it's subsequent anchor tags are moved to the next column. I want to move Education to the next column as well in such case. Any CSS or JS solution?

A less-than-semantic but effective solution as inspired by this post is to wrap each h3 and the following a in an element, and then set them to display: inline-block.
We have to add some extra styles to make the list appear "normal" and not as a nested list, but this will effectively prevent a header from hanging at the bottom of any column. If one of the divs wrapping an h3 and the a immediately after it would normally break across columns, the use of display: inline-block on its children (i.e., the h3 and a) will prevent that break.
/* the important part */
ul li ul li div h3,
ul li ul li div a {
display: inline-block;
width: 100%;
}
/* aesthetics */
ul li ul {
list-style: none;
padding-left: 0;
}
ul li ul li {
list-style-type: disc;
}
div {
background-color: lightgray;
max-height: 150px;
}
<div style="column-count: 3;">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>
<ul>
<li>
<div>
<h3>Education</h3>
<a>Education 1</a>
</div>
</li>
</ul>
</li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
<li><a>Education 4</a></li>
<li><a>Education 5</a></li>
<li><a>Education 6</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Careers</h3>
<a>Careers1</a>
</div>
</li>
</ul>
</li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Legal</h3>
<a>Legal</a>
</div>
</li>
</ul>
</li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
Compare against:
/* the important part */
/*ul li ul li div h3,
ul li ul li div a {
display: inline-block;
width: 100%;
}*/
/* aesthetics */
ul li ul {
list-style: none;
padding-left: 0;
}
ul li ul li {
list-style-type: disc;
}
div {
background-color: lightgray;
max-height: 150px;
}
<div style="column-count: 3;">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>
<ul>
<li>
<div>
<h3>Education</h3>
<a>Education 1</a>
</div>
</li>
</ul>
</li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
<li><a>Education 4</a></li>
<li><a>Education 5</a></li>
<li><a>Education 6</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Careers</h3>
<a>Careers1</a>
</div>
</li>
</ul>
</li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Legal</h3>
<a>Legal</a>
</div>
</li>
</ul>
</li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
(Note: The above snippets fix a problem you had with not closing your h3 tags correctly.)

If you are using bootstrap, you can set put each list in a div and assign a col-xs-4 class to each div. If not, you can emulate something like the grid system.

Related

How to occupy 100% of the height

I'm trying to do a navbar but I have a responsive problem when trying to occupy 100% of the height of the screen.
any solution? thanks to all
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" />
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
</head>
<body>
<nav class="navbar">
<img class="navbar__logo" src="gamezonia.png" alt="logo" />
<ul class="navbar__list">
<li class="list__item">Inicio</li>
<li class="list__item">Categoria 1</li>
<li class="list__item">Categoria 2</li>
<li class="list__item">Categoria 3</li>
<li class="list__item">Contacto</li>
<li class="list__item">Acceder</li>
<li class="list__item--search"><i class="fas fa-search"></i></li>
</ul>
<div class="navbar__hamburger">
<i class="fas fa-bars"></i>
</div>
</nav>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<script src="./index.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
background-color: #2B2F33;
font-family: 'Roboto', sans-serif;
}
.navbar__logo{
width: 100%;
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list{
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.list__item--search{
margin-left: auto;
margin-right: 30px;
}
.navbar__hamburger{
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 850px){
.navbar{
position: relative;
}
.navbar__list{
display: block;
position: absolute;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 100%;
transform: translateX(-100%);
transition: transform 0.5s;
}
.navbar__hamburger{
display: block;
margin-left: auto;
margin-right: 30px;
}
.showMenu{
transform: translateX(0%);
}
.list__item, .list__item--search{
padding: 10px;
margin-left: 10px;
}
}
JS:
console.log('works')
document.querySelector('.navbar__hamburger').addEventListener('click', ()=>{
document.querySelector('.navbar__list').classList.toggle('showMenu')
})

From your screenshot it seems like that navbar is scrolled up (the first four lis at the top are missing or not visible), so I would guess its container (nav) is higher than the screen and scrolls, or the navbar is somehow moved up under the top border of the screen.
A simple solution would be to change position from absolute to fixed, the the 100vh high navbar would remain in position and not scroll. You might have to adjust some other settings, but I supposse that should work.

Since the sidenav is inside the <nav> you can't use height: 100%. What you could do is combine position: fixed and height: 100vh like this:
.navbar__list {
display: block;
position: fixed;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 0px;
transform: translateX(-100%);
transition: transform 0.5s;
}
It will still need some changes in order to keep the sidenav under the nav but it's a good start.

Keep the menu open when child or grandchild is active using jQuery

I cannot change the HTML as it is generated.
Like the title says, if the grandchild Terms II in Terms 2 is active, then Terms 2 > Terms B should remained open. Likewise, if the child, Terms I in Terms 3 is open, then Terms 3 must remained open. How can I go about this?
JSFiddle DEMO: https://jsfiddle.net/t2sz3ogv/
PS: I have created 3 different HTML in JSFiddle to show the different scenarios for your convenience.
PSS: Please note that the parent Market is hidden permanently.
HTML:
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
CSS:
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

I suggest that: find each parent of li.active and show them:
$("li.active").parents('ul.nav, ul.nav-child').show();
jQuery(".menupolicies .parent ul").hide();
jQuery(".menupolicies>li>ul").show();
jQuery(".menupolicies .parent > span").click(function() {
jQuery(this).next("ul").toggle();
});
jQuery(".menupolicies .parent .nav-header").click(function(e) {
jQuery(this).find("img").toggleClass( "arrow" );
});
$("li.active").parents('ul.nav, ul.nav-child').show();
.hide {
display: none;
}
.menupolicies>li {
width: 100%;
}
.menupolicies .parent {
padding: 5px 0;
}
.menupolicies a, .menupolicies li {
font-size: 14px;
color: #333;
}
.menupolicies .active {
font-weight: bold;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.menupolicies .parent span img {
width: 24px;
float: right;
}
.menupolicies .arrow {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="current active deeper parent">Terms 1</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" class=""><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="active deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="current active">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<div class="moduletable">
<ul class="nav menupolicies">
<li class="active deeper parent"><span class="nav-header hide">Market</span>
<ul class="nav-child unstyled small">
<li class="deeper parent">Terms 1</li>
<li class="deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 2</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms A</li>
<li class="deeper parent"><span class="nav-header "><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png" alt="Fleet"><span class="image-title">Terms B</span></span>
<ul class="nav-child unstyled small">
<li class="">Terms I</li>
<li class="">Terms II</li>
<li class="">Terms III</li>
</ul>
</li>
</ul>
</li>
<li class="current active deeper parent"><span class="nav-header"><img src="https://i.postimg.cc/28db52g3/ios-arrow-up.png"><span class="image-title">Terms 3</span></span>
<ul class="nav-child unstyled small">
<li class="current active">Terms I</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

How to beautify this nested list with css?

I made this drop-down menu with nested lists. But no matter how I adjust height, it is impossible to display every element in .submenutwo. Moreover, when hovering .submenutwo the user can no longer see the other options. Is there an easy way to fix this with css or very minimal javascript? Adjusting height to min-height does not work. I think onclick will be better than hovering.
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
.submenutwo {
display: none
}
.submenu:hover .submenutwo {
display: initial;
min-height: 300px;
height: auto;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Residential
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'>Kitchen
</li>
<li class='listOptionLvlThree'> Bathroom
</li>
<li class='listOptionLvlThree'> Basement
</li>
<li class='listOptionLvlThree'> Bedroom
</li>
<li class='listOptionLvlThree'> Diner Room
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> Doors and windows
</li>
<li class='listOptionLvlThree'> Garage
</li>
<li class='listOptionLvlThree'> Roofing
</li>
<li class='listOptionLvlThree'> Insulation
</li>
<li class='listOptionLvlThree'> Masonry
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
<li>Commercial
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
<li>Industrial
<ul class="submenu">
<li>Interior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Exterior
<ul class="submenutwo">
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
<li class='listOptionLvlThree'> More option
</li>
</ul>
</li>
<li>Services
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>
</ul>
</nav>

here are the css codes, may find what you want :)
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
/*min-height: 200px;*/
/*height:auto;*/
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
/*overflow: hidden;*/
/*max-height: 0;*/
display: none;
-webkit-transition: all 0.5s ease-out;
}
.submenutwo {
display: none
}
.submenu li:hover .submenutwo {
display: block;
/*min-height:300px;*/
/*height:auto;*/
}

menu acordeon : div stuck in my list because of the overflow

I want to create a side menu and my code look like this :
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
}
#submenus {
background-color: green;
display: none;
}
submenus ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
But I when I show my submenu, he do not apear outside the box...
I want a menu like this :
I need absolutely need the "overflow-y" because I have a lot of menu and I need to have a scrolling option. Did you know how to have this result?

You have <ul id="submenus"> within <div id="menus">, if you don't want the sub menus inside of the menu, make another <div>, and put it in that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
<div>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</div>
</nav>
Then to get them side-by-side, apply float:left; to #menus:
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
float: left;
}
#submenus {
background-color: green;
display: none;
}
submenus, ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}

You can change your CSS and use absolute position on the submenu:
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
#submenus {
position:absolute;
left:100%;
top:0;
background-color: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
Bonus -- Quick Multiple SubMenus
$('span').click(function(){
var col = $(this).data('color');
$('.submenus').hide();
$('span').css('background', '');
$(this).css('background', col);
$(this).next('.submenus').show().css('background', col);
})
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
.submenus {
position:absolute;
left:100%;
top:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span data-color="red">Menu 1</span>
<ul class='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
<span data-color="yellow">Menu 2</span>
<ul class='submenus'>
<li>SubMenu 21
</li>
<li>
SubMenu 22
</li>
<li>
SubMenu 23
</li>
</ul>
</li>
<li>
<span data-color="green">Menu 3</span>
<ul class='submenus'>
<li>SubMenu 31
</li>
<li>
SubMenu 32
</li>
<li>
SubMenu 33
</li>
</ul>
</li>
</ul>
</div>
</nav>

Multi-level dropdown navigation - keep secondary dropdown closed

so I am relatively new to coding and I am trying to make a multilevel dropdown menu, that when opened shows the links for the first level but doesn't show the second level links until clicked.
I started with a fork from codepen and have the navigation built, but I do not know what script to add to close the secondary links.
// open mobile menu
$('.js-toggle-menu').click(function(e){
e.preventDefault();
$('.mobile-header-nav').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle').click(function(e){
e.preventDefault();
$('.subnav1').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle2').click(function(e){
e.preventDefault();
$('.subnav2').slideToggle();
});
$('.sub-toggle3').click(function(e){
e.preventDefault();
$('.subnav3').slideToggle();
});
* {
box-sizing: border-box;
}
#media (min-width: 768px) {
.mobile-nav-wrap {
/* display: none; */
}
}
.mobile-header-nav {
background-color: #222222;
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
width: 100%;
}
.mobile-header-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
color: white;
display: block;
padding: 15px 15px;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
background-color: #2f2f2f;
}
a.mobile-menu-toggle {
padding-left: 50px;
color: #52575f;
text-decoration: none;
background: #eeeff0;
font-size: 3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav1">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle2" href="#">Resources</a>
<ul class="subnav2">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle3" href="#">Service</a>
<ul class="subnav3">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
The codepen that I am working on can be found here:
Codepen Link
Any advice is welcome

You can just add some CSS to hide the sub nav initially, like this:
.subnav1, .subnav2, .subnav3 {
display: none;
}
You may want to also change the classes so they are a little more generic, like just use a class of subnav and sub-toggle instead of subnav1, sub-toggle2, etc. Then you can have just one CSS rule and one event handler regardless of how many menu items you add. So your CSS for hiding the sub nav would just be:
.subnav {
display: none;
}
And your javascript to toggle all of the menu items is reduced to just:
$('.sub-toggle').click(function(e){
$(this).next('.subnav').slideToggle();
$(this).toggleClass('open');
});
I updated your code pen with an example here.

You may try this. The changes are only done to js logic.
Also, I'm not sure why you have e.preventDefault(). You only need it if you are trying to avoid submit a form. So I took them out.
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
Overview
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Resources</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Service</a>
<ul class="subnav">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
<script>
$().ready(function()
{
$('.js-toggle-menu').click(function(e){
$('.sub-toggle').slideToggle();
$('.sub-toggle').each(function()
{
$(this).closest('li').find('.subnav').hide();
});
});
$('.sub-toggle').click(function(){
$(this).closest('li').find('.subnav').slideToggle();
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Moving <li> to next column - javascript

If you are using bootstrap, you can set put each list in a div and assign a col-xs-4 class to each div. If not, you can emulate something like the grid system.

Related

How to occupy 100% of the height

Keep the menu open when child or grandchild is active using jQuery

How to beautify this nested list with css?

menu acordeon : div stuck in my list because of the overflow

Multi-level dropdown navigation - keep secondary dropdown closed

Categories

Resources