Dropdown Menu Items Open Outside the Container - html

I am creating a mobile menu as dropdown list items as follows,
jQuery('#menu-main-menu > .is-dropdown-submenu-parent a').click(function() {
$(this).siblings('ul').slideToggle(500);
jQuery(this)
.closest(".is-dropdown-submenu-parent")
.siblings()
.find(".sub-menu")
.slideUp();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu-mobile" class="menu-list navbar-collapse collapse clearfix">
<ul id="menu-main-menu" class="navigation clearfix" style="display:flex; flex-direction: column">
<li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
menu 1
<ul class="sub-menu ">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
</ul>
</li>
<li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
menu 2
<ul class="sub-menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
</ul>
</li>
</ul>
</div>
The problem is when I click into the main menu for opening, it opens outside the frame of the menu (it gets outside the container) explain more: when I click on the menu1 the items of it appear above the menu2. Where it suppose to shift menu2 down and list the items bellow menu1.
I did not get where is the error & I have searched & seen all menus made as I did !!


Try this small change
I have commented slideUp() line in the .js.
I think it works as you want.
jQuery('#menu-main-menu > .is-dropdown-submenu-parent a').click(function() {
$(this).siblings('ul').slideToggle(500);
jQuery(this)
.closest(".is-dropdown-submenu-parent")
.siblings()
.find(".sub-menu")
//.slideUp(); // commented this line
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu-mobile" class="menu-list navbar-collapse collapse clearfix">
<ul id="menu-main-menu" class="navigation clearfix" style="display:flex; flex-direction: column">
<li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
menu 1
<ul class="sub-menu ">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
</ul>
</li>
<li data-toggle="collapse" class="dropdown is-dropdown-submenu-parent collapsed">
menu 2
<ul class="sub-menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
</ul>
</li>
</ul>
</div>

Related

One Click on Nav Menu Trigger several actions

I have 3 menus in a nav and each menu has a submenu. I need to do 2 acts when clicking on a menu, or plus/minus sign.
First Act: When I click:
show this submenu
change this plus sign to minus sign
Close other submenus
Change other submenus signs from minus to plus
Second Act: When I click on an element which has an open submenu, again
submenu will be closed.
minus sign change to plus sign
My JQuery is working as expected on the First Act, but somehow it doesn't work on the Second Act
Please give me a hand. Thanks
$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('open').next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open').next().toggleClass('icon-minus icon-plus'))
.parent().next('.child-layer').toggleClass('show')
})
})
$(function() {
$('.plus-minus').click(function() {
$(this)
.prev().toggleClass('open')
.next().toggleClass('icon-minus icon-plus')
.add($('.parent-list.open').not(this).removeClass('open'))
.parent().next('.child-layer').toggleClass("show");
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>

$(function(showHidesubMenu) {
$('.parent-list').click(function() {
$(this)
.toggleClass('opening') // add class mark this opening
.next()
.toggleClass('icon-minus icon-plus')
.add(
$('.parent-list.opening')
.not(this)
.removeClass('opening')
.next()
.toggleClass('icon-minus icon-plus')
)
// to parent toogle ul
.parent()
.next('.child-layer')
.toggleClass('show')
})
})
li {
display: flex
}
.icon-plus:before {
content: "\2795";
}
.icon-minus:before {
content: "\2212";
}
.parent-list {
padding-right: 50px;
cursor: pointer;
}
.collapse {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="non-active">
<a class="non-active parent-list" href="#level1">level 1</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 1</li>
<li>Sub Child 1</li>
<li>Sub Child 1</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level2">level 2</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 2</li>
<li>Sub Child 2</li>
<li>Sub Child 2</li>
</ul>
<li class="non-active">
<a class="non-active parent-list" href="#level3">level 3</a>
<div class="plus-minus icon-plus"> </div>
</li>
<ul class="child-layer collapse">
<li>Sub Child 3</li>
<li>Sub Child 3</li>
<li>Sub Child 3</li>
</ul>
</ul>

How to show drop-down content on hover or on click?

How do I hide the drop-down button to the hover or click to display it? I specifically use foundation zurb plugin. Look my code:
HTML:
<ul class="menu" data-drilldown data-back-button='<li class="js-
drilldown-
back"><a class="new-back"></a></li>'style="width: 200px" id="m1">
<li>
Item 1
<ul class="menu">
<li>
Item 1A
<ul class="menu">
<li>Item 1Aa</li>
<li>Item 1Ba</li>
<li>Item 1Ca</li>
</ul>
</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A</li>
<li>Item 2B</li>
<li>Item 2C</li>
</ul>
</li>
</ul>
The code doesn't mean much to you if you haven't used the drill dropdown foundation zurb plugin.

floating sub menu contains on its parent instead of overlapping the parent

Below is my snippet. First, I have two different link which triggered a drop down sub menu when hovered. Now the problem is, If you hover on the "First menu" (this is a fixed position), its drop down sub menu does not overlap like the second drop down sub menu from the second menu, it contains itself to its parent which seem's ugly, any ideas, help, clues, suggestions, recommendations to fix this please?
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>

You just have to remove overflow-y and overflow-x and it will work :
a{text-decoration:none;color:#000000;}
ul,li{list-style:none;padding:0px;}
#menu{max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;position:fixed;width:300px}
.sub_menu{
position:absolute;
z-index:99999999999;
background:red;
padding:15px;
color:#000000;
display:none;
}
.d_menu a:hover + .sub_menu{display:block !important;}
#menu2{overflow-y:auto;overflow-x:hidden;max-height:50px;background:#ededed;color:#ffffff !important;padding:15px;margin-top:50px;}
<div id="menu">
<ul class="d_menu">
<li>
This is first menu, this has a fixed position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<div id="menu2">
<ul class="d_menu">
<li>
This is second menu, this has a static position
<ul class="sub_menu">
<li>sub menu 1</li>
<li>sub menu 2</li>
<li>sub menu 3</li>
<li>sub menu 4</li>
<li>sub menu 5</li>
<li>sub menu 6</li>
<li>sub menu 7</li>
<li>sub menu 8</li>
<li>sub menu 9</li>
<li>sub menu 10</li>
</ul>
</li>
</ul>
</div>

Not able to write article after vertical menu in HTML

I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ

Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));

How to align something inside an <a>?

I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.

Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>