jQuery Dropdown keeps closing when hovering from div to div - javascript

I've made a dropdown from two different divs. One is the trigger and one the submenu.
If the mouse hovers from the trigger to the submenu, the submenu closes. How can I keep it open even when the mouse switches between the two divs?
Also I can't move the submenu-container inside the dropdown-trigger. They need to be two separate divs.
$('.dropdown-trigger,.submenu-container').hover(
function(){$('.submenu-container').css('display', 'block')},
function(){$('.submenu-container').css('display', 'none')},
);
Thank you so much in advance!

You may not need jquery. you can do by css. Similar way u can do in jquery
.dropdown {
max-width: 200px;
list-style: none;
padding: 10px;
position: relative;
}
.item {
display: none;
padding: 10px 20px;
border: 1px solid #000;
}
.item.default {
display: flex;
justify-content: space-between;
}
.dropdown:hover .item {
display: block;
}
.dropdown:hover .item.default {
display: flex;
}
<ul class="dropdown">
<li class="item default">Select <span>V</span></li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
</ul>

Related

Shrink div elements while adding new ones

I'll try to explain it as best as I can. I want to apply this principle to my own.
Tab Add Example
As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.
It should also behave the same on window resize.
Window Resize Example
Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.
HTML I want to apply:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
</ul>
</div>
</div>
When I add new tab it adds this
<li class="contentTab"></li>
JSFiddle
Any suggestions?
You can do this with Flexbox, you just need to set flex-basis
$(".add").click(function() {
$(".tabs").append('<li class="tab">Lorem ipsum</li>');
})
$('.remove').click(function() {
$('.tab').last().remove();
})
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
border: 1px solid black;
flex-basis: 200px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>
You can use display: table and display: table-cell for this:
$("#add").click(function() {
$("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});
$("#del").click(function() {
$(".tab").last().remove();
});
.tabs {
display: table;
border-collapse: collapse;
padding: 0;
}
.tab {
display: table-cell;
width: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button id="add">Add Tab</button>
<button id="del">Remove Tab</button>
$('.tab-add').click(function() {
$('.tab-add').html('+');
var lastCount = $('#myTab1 li:last-child').html();
var plusOne = parseInt(lastCount) + 1;
$('#myTab1').append('<li class="contentTab">' + plusOne + '</li>');
});
* {
margin: 0; padding: 0;
}
.l_tabs {
width: 100%;
background-color: red;
}
#myTab1 {
display: flex;
list-style-type: none;
}
#myTab1 li {
display: flex;
justify-content: center;
flex: 1;
line-height: 50px;
color: white;
background-color: hsla(0, 0%, 20%, 1);
}
#myTab1 li:nth-child(even) {
background-color: hsla(0, 0%, 40%, 1);
}
.tab-add:hover {
background-color: hsl(0, 55%, 55%)!important;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add">click to add</li>
<li class="contentTab">1</li>
<li class="contentTab">2</li>
<li class="contentTab">3</li>
<li class="contentTab">4</li>
</ul>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/mx2mxgg1/2/
You can use flexbox to do exactly what you want
ul {
display: -webkit-box;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
min-width: 60px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}

How to make CSS drop down menu appear/change on click

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>

Give submenu full column width using jQuery or CSS?

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

AngularJS top menu submenu dropdowns on hover (persist showing whilst moving to submenu)

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;
}

dropdown menu for asp.net website

I need a drop down menu for my asp.net website where I can have menu items as well as images. I need one like http://www.petcarerx.com/. If I keep mouse on any of menu item on blue bar ( Dogs, Cats, Other Pets, A drop down menu opens with menu items and some images. I want it to expand to full length horizontally. Please suggest me which control should I use?
Regards,
Asif Hameed
I have had good experiences with the Kendo UI menu by Telerik.
searching a little google, i stumbled upon this website:http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/
have a great tutorial for a great kind of jquery drop down menu
I use Superfish for this purpose.Multilevel and Image supported when slightly customize it.
use telerik menu control...
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
A quick example for you:
HTML:
<ul id="menu">
<li>Home</li>
<li>
about
<div class="submenu">
<div class="col1 border-right">
<ul>
<li>about link 1</li>
<li>about link 2</li>
<li>about link 3</li>
<li>about link 4</li>
</ul>
</div>
<div class="col2 border-right">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
<div class="col3">
<img src="http://www.funnycutepics.com/wp/wp-content/uploads/2011/03/fan-pet-karma.jpg" / width="100" />
</div>
</div>
</li>
...
...
...
</ul>
jQuery:
$("ul#menu li").hover(function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(300);
}, function(){
$(this).find('a').next('.submenu').stop(true, true).slideToggle(200);
})​
CSS:
ul#menu {
width: 100%;
position: relative;
height: 30px;
background:#ccc;
border-bottom: 1px solid #666;
}
ul#menu li {
display: block;
float: left;
height: 30px;
line-height: 30px;
}
ul#menu li a { display: block; padding: 0 20px; }
.submenu {
position: absolute;
width: 100%;
left: 0px;
display: none;
border-bottom: 1px solid #ccc;
}
ul#menu li div.submenu ul li {
float: none;
}
.col1, .col2, .col3 {
width: 33%;
background: #f4f4f4;
float: left;
}
.col2, .col3 {
text-align: center;
}
.border-right { border-right:1px solid #ccc; }
DEMO
​

Categories

Resources