I'm creating a menu using Bootstrap on Drupal, but I'm having trouble getting the dropdown to work on hover.
What's supposed to happen is when you hover over a main menu item, a dropdown menu will appear below it. The dropdown menu is functioning, as well as the main menu, but the dropdowns currently appear on screen at all times. I want to do this using CSS, but can't seem to find the right selector to make it visible/hidden when hovering on and off.
My HTML and CSS for this project are attached below. Thanks!
<div class="region region-header">
<div id="block-menu-block-2" class="block block-menu-block main-navigation">
<div class="content">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first expanded menu-mlid-650">Main Menu Item 1<ul class="menu"><li class="first last leaf menu-mlid-687">Dropdown Item 1</li>
</ul></li>
<li class="expanded menu-mlid-651 dropdown ">Main Menu Item 2<ul class="menu"><li class="first last leaf menu-mlid-668">Dropdown Item 2</li>
</ul></li>
<li class="expanded menu-mlid-653 dropdown">Main Menu Item 3<ul class="menu"><li class="first leaf has-children menu-mlid-656">Dropdown Item 3</li>
</ul></li>
<li class="last expanded menu-mlid-655 dropdown">Main Menu Item 4<ul class="menu"><li class="first last leaf menu-mlid-664">Dropdown Item 4</li>
</ul></li>
</ul></div>
</div>
</div>
<div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first collapsed menu-mlid-650">Main Menu Item 1</li>
<li class="collapsed menu-mlid-651 dropdown ">Main Menu Item 2</li>
<li class="collapsed menu-mlid-653 dropdown">Main Menu Item 3</li>
</ul></div>
</div>
</div>
</div>
CSS:
.dropdown-menu {
display: block;
border-radius: 0px;
display: block;
left: 0;
top: 100%;
float: left;
list-style: none;
background-clip: padding-box;
position: static;
width: 100%;
}
.mobile-nav ul.menu li ul.menu {
#extend .dropdown-menu;
.main-nav ul.menu li ul.menu {
#extend .dropdown-menu;
}
#media only screen and (min-width: 1000px;) {
.dropdown-menu {
width: auto;
display: block;
position: absolute;
width: auto;
padding-left: 10px;
padding-right: 10px;
}
}
The menu class is the parent for all menus to it should be
.menu ul {
display:none;
}
$(document).ready(function() {
$(".menu li a").hover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
});
});
.menu ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region region-header">
<div id="block-menu-block-2" class="block block-menu-block main-nav top-nav contextual-links-region">
<div class="content">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="first expanded active-trail menu-mlid-650">Main Menu Item 1
<ul class="menu">
<li class="first last leaf active-trail active menu-mlid-687">Main Menu Item 2
</li>
</ul>
</li>
<li class="expanded menu-mlid-651 dropdown ">Main Menu Item 3
<ul class="menu">
<li class="first last leaf menu-mlid-668">Item 3 Dropdown Item
</li>
</ul>
</li>
<li class="leaf menu-mlid-652">Main Menu Item 4
</li>
<li class="leaf menu-mlid-654">Main Menu Item 5
</li>
<li class="expanded menu-mlid-653 dropdown">Main Menu Item 6
<ul class="menu">
<li class="first leaf has-children menu-mlid-656">Item 6 Dropdown Page
</li>
<li class="last leaf menu-mlid-659">Item 6 Dropdown Page 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav contextual-links-region">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid- 0 menu-level-1">
</ul>
</div>
</div>
</div>
</div>
Here is a simple :hover based dropdown menu, using just CSS - no scripting needed:
ul {
margin: 0;
padding: 0;
}
li {
position: relative;
display: block;
width: 120px;
height: 24px;
line-height: 24px;
padding: 6px;
list-style-type: none;
background-color: rgb(127, 127, 127);
cursor: pointer;
}
li ul {
position: absolute;
display: none;
}
li:hover {
background-color: rgb(163, 163, 163);
}
li:hover ul {
position: relative;
display: block;
top: -12px;
left: 114px;
z-index: 6;
}
li li {
background-color: rgb(191, 191, 191);
}
<ul>
<li>Menu Item 1
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li>Menu Item 2
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
<li>Menu Item 3
<ul>
<li>Submenu Item 1</li>
<li>Submenu Item 2</li>
<li>Submenu Item 3</li>
</ul>
</li>
</ul>
Related
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>
I am having dropdowns in a menu that has horizontal scrolling on mobile resolution.
As you can see in the example the desktop version is able to display the dropdowns when the menu is hovered, however, when using the mobile version that uses overflow-y: hidden the dropdown is obscured.
I have attempted to change the overflow-y to all available options, I would have thought setting it to visible would allow the dropdown to be seen however, this is not the case.
I'm open to anything at this point, I'm about to use position fixed and set it with javascript but I would prefer not to if there is a better solution in css.
I need to leave the horizontal scrolling of the top level menu items.
Thanks for any help.
body {
background: #eee;
font-family: sans-serif;
}
.main.mobile {
max-width: 250px;
}
.main {
max-width: 700px;
margin: 0 auto;
background: white;
}
.mobile .nav {
overflow-x: scroll;
overflow-y: hidden;
}
.list {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.list__item {
padding: 1em;
white-space: nowrap;
position: relative;
transition: .2s all;
}
.list__item:hover {
background: #dc205c;
}
.list__item:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown {
visibility: hidden;
opacity: 0;
transition: .4s all;
position: absolute;
list-style-type: none;
top: 100%;
padding: 0;
left: 0;
background: white;
}
.dropdown__item {
padding: 1em;
transition: .2s all;
}
.dropdown__item:hover {
background: #dc205c;
}
<main class="main mobile">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
<main class="main">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
I'm trying to put divs inside li. If the user klick on one li-tab, the div appears. The list elements are in horizontal position, and the div content should be placed under the whole list. At the moment, if the div appears, the standard content appears over the div.
.filter-list {
position: relative;
}
.filter {
display: inline-block;
padding-right: 40px;
}
.subnav {
position: absolute;
}
<ul class="filter-list">
<li class="filter">Name
<div id="subnav">onetwothree
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>
try this
<ul class="filter-list">
<li class="filter">Name
<div class=row>
<div id="subnav">onetwothree</div>
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>
On mouseover of Diveagar category one drop down list is displayed but it displays from that div only.
I want to display it from left Ex: from "Quick look" tab, I have used the following code to display the div when mouse is over.
<ul class="nav pull-left">
<li class="dropdown">
<p>
<a href="#" class="dropdown-toggle " style="color:black;" data-toggle="dropdown"><?php echo $sub_desti_res["sub_destination"]; ?><br> 2 Packages Available
</a>
</p>
<ul class="dropdown-menu">
<li>
<div class="destination-list">
<div class="col-md-12">
You mean like this?
* {margin: 0; padding: 0; list-style: none;}
.menu {display: block; text-align: center;}
.menu a {display: block; text-decoration: none; color: #333; border: 1px solid #999; padding: 5px; }
.menu > li {display: inline-block; position: relative; width: 100px;}
.menu ul {position: absolute; width: 150px; left: -25px; display: none;}
.menu > li:hover ul {display: block;}
<ul class="menu">
<li>
Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>
Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
Put this CSS style:
.nav {position: relative;}
.dropdown-menu {position:absolute;left:0;width:100%;}
I have a dropdown menu with a sub-menu, made up of lists:
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
My CSS changes the background-color of these items when hovered on.
What I want to do is keep Item 2's background color changed whilst hovering over any give Sub Item
Any simple way to do this?
CSS:
.list_item:hover {
background-color:green;
}
.sub_list_item:hover {
background-color:yellow;
}
Wrap item 2 around its <ul> tag
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
</li>
<li class="list_item">Item 3</li>
</ul>
You could use the direct child selector > to target a specific li as opposed any given li or ul.
jsFiddle here - menu I made a few weeks ago
Usage example:
#menu > ul > li:hover {
background: #2580a2;
}
Change the code and css
<ul class="item">
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
CSS is
.item
{
color: #000000;
list-style-type: disc;
}
.item li:hover
{
color: #FFFFFF;
background-color: #336600;
}
.item ul li:hover
{
color: #FFFFFF;
background-color: #FF0000;
}
Enjoy ... and choose your color whatever you like
for more detail visit ..
http://www.mr-sudhir.com/blog/what-is-css.aspx