I have code that makes my menu expand when the parent li is hovered over. I want to change it so that it only expands when it is clicked.
My code in CSS is:
.nav li:hover li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
How do I make this happen only when the parent is clicked?
My HTML:
<ul class="nav">
<li class="dropdown" id="dropdownparent">
Categories
<ul id="dropdown">
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
</ul>
</li>
</ul>
Here is the live page I am using to test this... http://portal.electrovision.co.uk/dropdown-test/
A slight css tweak
.nav li.open li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
And some javascript (jQuery)
$('.nav > li.dropdown').on('click', function(e) {
$(this).toggleClass('open');
});
Related
I have a web page, 1000px by 1000px for the main div. Inside the main div, at the top, there is a horizontal bar with four sections, each taking up 1/4 of the space. Each section has some text [wrapped in h2 tag], horizontally/vertically centered in the middle of the 1/4 section and each section must generate a drop-down menu.
For the drop down menu [which must work both on mobile and desktop], I borrowed the idea of using a checkbox [check for make dropdown visible, uncheck for invisible], but it isn't working correctly. The checkbox is small and if it is invisible it is almost impossible to know where to click to check/uncheck. I want the drop down menu to appear if the user clicks/taps ANYWHERE in the 1/4 section area.
The horizontal row of 1/4 section drop down menus looks like this:
^ Note that they don't actually work.
HTML Code:
<div id="Media_Choices">
<div id="Video" class="media_choice"> <h2>Video▼</h2> </div>
<div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div>
<div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div>
<div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div>
</div>
CSS:
#Media_Choices {
width: 100%;
max-height:40px;
min-height:40px;
}
.media_choice {
display: inline;
float: left;
width: 24.5%;
max-height: 38px;
min-height: 38px;
text-align: center;
vertical-align: middle;
line-height: 38px; /* the same as your div height */
}
#Video {
}
#Pictures {
}
#Audio {
}
#Stories {
}
Extra credit if you can get the ▼ downward facing arrow to turn into a ▲ whenever the drop down menu is down and then revert back into a ▼ downward facing arrow whenever the menu is up. You don't need to use the check-box based technique [I know there is a hover option], but anything that works cross platform is good.
For reference, check boxes were origionally implemented using the following code [taken from another question], but copy-pasting in this solution and changing the text inside the box isn't good enough:
<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
<label for="dropdownbox1">Open dropdown</label>
<ul class="dropdown">
<li>...</li><li>etc</li>
</ul>
</div>
with CSS:
.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}
If i understand you correctly you want to create a responsive dropdown menu and you want the arrows to change when the menu appear/disappear, if this is the case a one way to do it would be to attach event listeners to the menu items that would show/hide the submenus on click, using css and javascript you can do the following:
.media_choice > h2:after {
display: inline-block;
content: '▼';
}
.media_choice.dropped > h2:after {
content: '▲';
}
.media_choice > ul {
display: none;
}
.media_choice.dropped > ul {
display: block;
}
And with javascript add the event listeners:
$(document).ready (function()
{
$('.media_choice').on ('click', function()
{
$(this).toggleClass ('dropped');
});
});
JSFiddle
Here it is using checkboxes and no JS.
nav {
width: 80%;
margin: 20px auto;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: none;
/* to contain the floats */
}
nav li {
padding: 0;
margin: 0;
width: 25%;
float: left;
position: relative;
white-space: nowrap;
}
nav input {
display: none;
}
nav label {
display: block;
border: 1px solid black;
padding: 10px;
cursor: pointer;
}
nav label:hover {
background: #ccc;
}
nav a {
display: block;
padding: 10px;
}
nav a:hover {
background: #ccc;
}
nav label:after {
content: '▼';
font-size: 10px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
border: 1px solid red;
box-sizing: border-box;
background: #fff;
width: 100%;
}
nav ul ul li {
width: 100%;
float: none;
}
nav input:checked ~ ul {
display: block;
}
nav input:checked ~ label:after {
content: '▲';
}
<!-- http://codepen.io/allicarn/pen/gPPmZZ -->
<nav>
<ul>
<li>
<input type="checkbox" id="navitem1" name="navinputs" />
<label for="navitem1">Menu Item #1</label>
<ul>
<li>Sub Menu Item #1a</li>
<li>Sub Menu Item #1b</li>
<li>Sub Menu Item #1c</li>
<li>Sub Menu Item #1d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem2" name="navinputs" />
<label for="navitem2">Menu Item #2</label>
<ul>
<li>Sub Menu Item #2a</li>
<li>Sub Menu Item #2b</li>
<li>Sub Menu Item #2c</li>
<li>Sub Menu Item #2d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem3" name="navinputs" />
<label for="navitem3">Menu Item #3</label>
<ul>
<li>Sub Menu Item #3a</li>
<li>Sub Menu Item #3b</li>
<li>Sub Menu Item #3c</li>
<li>Sub Menu Item #3d</li>
</ul>
</li>
<li>
<input type="checkbox" id="navitem4" name="navinputs" />
<label for="navitem4">Menu Item #4</label>
<ul>
<li>Sub Menu Item #4a</li>
<li>Sub Menu Item #4b</li>
<li>Sub Menu Item #4c</li>
<li>Sub Menu Item #4d</li>
</ul>
</li>
</ul>
</nav>
I am trying to make a menu that has some links in two levels.
What I am trying to do is to make it so that when you click on the top level then level 2 opens.
Right now my problem is that I want to have two columns but I want level two to be one full width column.
See my codepen here: http://codepen.io/mathiasha/pen/KdzmBL
I don't know if it's easiest to make it in CSS or jQuery.
I dont have control of the HTML.
<div class="block block-menu-block">
<ul class="menu">
<li>
1
</li>
<li>
2
<ul class="menu">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
</ul>
</li>
<li>
3
<ul class="menu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
<ul class="menu">
<li>6.1</li>
</ul>
</li>
</ul>
</div>
See the CSS below:
.block-menu-block {
width: 100%;
border: 5px solid red;
overflow: hidden;
}
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
font-weight: bold;
}
ul.menu li {
display: block;
width: 50%;
border: 1px solid #000;
margin: -1px;
float: left;
text-align: center;
}
ul.menu li a {
display: block;
padding: 20px;
text-decoration: none;
}
li a ~ ul a {
color: green;
}
As long as first level LIs are set to be width:50%, children are bounded. Setting sub-level absolutely positionned could have been a solution, but in your case, it breaks the desired effect.
So a "dirty" solution that I can give you is to use this :
.block-menu-block ul li ul{ width:200%; margin-left:-100%; }
.block-menu-block ul li ul li{ width:100%; background:#fff;}
Sub-level UL width will be multiplied by two, and then has the same width as the menu. Used negative margin to make a translation, otherwise, it will start under the parent LI and will expend out of the menu boundaries.
And finally, reset the sub LIs width to 100% (background is used to hide parent borders).
Updated Codepen
I have a top menu with various links. On hover, each should show a dropdown with additional menu items. I have tried attached onmouseover and onmouseleave events to the menu item to hide/show the sub menu; however, when transitioning off of the menu item and into the sub menu, the onmouseleave fires and hides the sub menu and the user doesn't have a chance to actually interact with the sub menu.
<nav>
<div class="container-fluid">
<ul class="">
<li>
<a ui-sref="home.person" ng-init="showPersonSubMenu=false" ng-mouseenter="showPersonSubMenu=true" ng-mouseleave="showPersonSubMenu=false">People</a>
<ul class="person-sub-menu" ng-show="showPersonSubMenu">
<li>Add Person</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
<li><a ui-sref="home.job">Jobs</a></li>
<li><a ui-sref="home.report">Reports</a></li>
</ul>
</div>
</nav>
How can I show the sub menu on hover, and hide it on leaving... whilst still allowing the user to actually access the sub menu so it doesn't hide before they can interact with it.
You were on the right track.
Make sure there is no space between your menu item and your absolute sub-menu. To ensure that there is no space, make the menu item bigger (using height or line-height), or add a padding to it...
Here's a working example:
http://codepen.io/jlowcs/pen/QwJwJZ
HTML:
<ul class="menu">
<li>
<a>People</a>
<ul class="sub-menu">
<li>Add Person</li>
<li>Action 2</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
background: lightblue;
height: 30px;
padding: 0 10px;
}
.menu > li {
display: inline-block;
width: 100px;
line-height: 30px;
}
.sub-menu {
position: absolute;
display: none;
background-color: lightgreen;
padding: 5px;
}
.sub-menu > li {
display: block;
cursor: pointer;
}
li:hover .sub-menu {
display: block;
}
EDIT: if you want your submenu to float lightly lower, here's a way of doing that:
http://codepen.io/jlowcs/pen/dPQPxW
Just add the following CSS:
.sub-menu {
margin-top: 10px;
}
.menu > li:hover {
padding-bottom: 10px;
}
I am coding a multilevel drop down menu in which when the parent is hovered, the submenu drops down with JQuery fadeIn(). But the effect is getting propagated to the child elements. They are also having fadeIn() when hovered on. The code is
HTML
<nav>
<ul id="headnav">
<li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
<li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
<li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a>
<ul>
<li> Papers </li>
<li> Articles </li>
<li> PhD Students </li>
<li> Presentations </li>
</ul>
</li>
</ul>
</nav>
JQuery
$(document).ready(function() {
$('nav > ul > li > ul').hide();
$('nav > ul > li').hover(function() {
$(this).find('ul').fadeIn(400);
},function() {
$(this).find('ul').fadeOut(400);
});
});
CSS
nav {
position: absolute;
min-width:30%;
float:right;
right:12%;
top: 16%;
}
nav ul li {
display: inline-block;
min-width: 20px;
text-transform: uppercase;
}
nav ul li a{
float: left;
padding: 0px 10px 0px 10px;
}
nav ul li ul {
display: inline-block;
position: absolute;
width: auto;
margin-left:-35%;
margin-top:7%;
}
nav ul li ul li {
display: inline-block;
min-width:10px;
}
nav ul li ul li a {
color:#7f8c8d;
}
When you hover your mouse over the child elements, they again fadeIn(). I tried e.stopPropagation() and e.preventDefault() but none of them are working.
Please help
Show the submenu on hovering over the outer li, but hide it on leaving the inner ul:
$('nav > ul > li').mouseenter(function(e) {
$(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
$(this).fadeOut(400);
});
http://jsfiddle.net/mava7btt/3/
I have my HTML & CSS below.
I have a div with a span inside. Everything is lined up under the default home.
I want when I move the mouse over About(id=Hover2) it moves the div (id=divHolder) to the correct background position listed below. Also if I click About.
The correct background position of that div is active.
Thanks!
HTML:
<div id="nav">
<div id="divHolder">
<span id="highlight"></span>
</div>
<ul class="clearfix">
<li><a id="Hover1" href="Default.aspx">Home</a> </li>
<li><a id="Hover2" href="About.aspx">About</a> </li>
<li><a id="Hover3" href="">Profile</a> </li>
<li><a id="Hover4" href="">News</a> </li>
<li><a id="Hover5" href="">Contact</a> </li>
</ul>
</div>
CSS:
#divHolder {
height: 62px;
left: 0;
overflow: hidden;
position: absolute;
top: 17px;
width: 505px;
}
#highlight {
background: url("/Styles/background-highlight.png") repeat scroll 0 0 transparent;
display: block;
height: 62px;
left: 0;
position: absolute;
top: 0;
width: 124px;
}
#divHolder.Hover1 {background-position:0px 0px}
#divHolder.Hover2 {background-position:0px 80px}
#divHolder.Hover3 {background-position:0px 160px}
#divHolder.Hover4 {background-position:0px 240px}
#divHolder.Hover5 {background-position:0px 320px}
I got this working for you here:
http://jsfiddle.net/xgkHH/
This is the jQuery I had to use:
$("#nav li").on("mouseenter",function() {
classtoadd = $(this).children("a").attr("id");
$("#highlight").addClass(classtoadd);
});
$("#nav li").on("mouseleave",function() {
// remove all classes.
$("#highlight").removeClass();
});
I didn't have to change your HTML at all, but here's what I did to your CSS:
#highlight.Hover1 {background-position:0px 0px;}
#highlight.Hover2 {background-position:0px 80px;}
#highlight.Hover3 {background-position:0px 160px;}
#highlight.Hover4 {background-position:0px 240px;}
#highlight.Hover5 {background-position:0px 320px;}
Just make sure you can actually hover the element. Using your code, it looks like the span covers some of the links which prevented hovering.
$('#Hover2').hover(
function(){
$('#divHolder').addClass('Hover2');
},
function(){
$('#divHolder').removeClass('Hover2');
}
);
$('#Hover2').on('click', function(){
$('#divHolder').addClass('Hover2');//or whatever you want to do on click
});