I am trying to create a drop down menu but I am stuck at the first step (I'm learning jquery). Now What I would like is whenever I hover over the "support" menu item the "drop down menu item 1" should appear and also when I hover that (drop down menu item 1) the "drop down menu item 2" should appear in a box that is positioned horizontally next to "drop down menu item 1".
I have provided this fiddle: http://jsfiddle.net/pyrot/84eWr/
Can someone please help me with this. I would really appreciate any assistance at all.
here is the html:
<ul>
<li class="support">support</li>
<li class="support-drop hide">drop menu item 1</li>
<li class="support-drop two hide">drop menu item 2</li>
</ul>
and here is the the code I am struggling with:
$(document).ready(function () {
$(".support").hover(function() {
$(".support-drop").addClass("support-drop.hide");
}, function() {
$(".support-drop").removeClass("support-drop.hide");
});
)}
and here is the css:
ul {color: #000000;}
.support-drop.hide { display: none ;}
.support-drop {
background-color: #000000;
color:#ffffff;
width: 200px;
height: 100px;
}
.support-drop.two {
background-color: #5C5C5C;
color:#ffffff;
width: 200px;
height: 100px;
}
First at all you need to know how the structure of a dropdown works. Is in the way with ul and li tags. Where you get an ul for each level of information and keep it inside the li items, like this:
<ul>
<li class="support">support
<ul>
<li class="support-drop hide">drop menu item 1
<ul>
<li class="support-drop two hide">drop menu item 2</li>
</ul>
</li>
</ul>
</li>
</ul>
With that structure now you can work on the right way. First need the right CSS properties like display:none to hide the submenus and position:absolute to get the desire visual.
You can acomplish the dropdown with just CSS but if you want to do that with Jquery you need the hover() handler to perform actions show and hide. Like this :
$('li').hover(function(){
$(this).children('ul').slideToggle();
})
Check this Fiddle Demo
It should be like this:
you need to add class say "one" to the second element
<li class="support-drop hide *one*">drop menu item 1</li> //html add class say "one"
$(".support").hover(function() {
$(".one").show(); // it already has the class, so no addClass is needed.
}, function() {
$(".one").hide(); // removing class will get you not working next time.
});
/// again for the second drop down to show:
$(".one").hover(function(){
$('.two').show();
}, function(){
$('.two').hide();
}) ;
Related
i have html menu with submenu for ex:
<li id="item-3" class="menu-item has-children-3">
<span>Auto</span>
<ul class="sub-menu fadeOut animated fast" id="cpx" style="">
<li id="menu-item-9" class="menu-item"><span>Reno яхту</span></li>
<li id="menu-item-6" class="menu-item"><span>Audi</span></li>
</ul>
</li>
When i make mouseover on menu Auto, i need to replace for ul fadeOut to fadeIn and add to style="display:block" and after mouseout add to style="display:none" and to class add fadeOut to ul element?
You can try to achieve this only with css and element+element selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
eg:
.sf-with-ul:hover + .sub-menu {
display: block;
opacity: 1;
}
however this might not be the effect you want as the moment you mouse out of anchor element with class sf-with-ul trying to click on some of the sub menu items the whole sub menu will go back to "display:none; state"
maybe better apply this to the whole parent li like
.menu-item.has-children-3:hover .sub-menu {
display: block;
opacity: 1;
}
So I have to implement a Jquery function in which every li Element is executing the :hover pseudo class (which only changes the background color). So if I hover down to the 4th Element ALL previous li Elements (1st, 2nd, 3th) should have the changed background color from the :hover pseudo class!! But if I move up with the mouse again the :hover effect should disappear (normal background color again) up to the point where my mouse is (if it is on 2nd element only 1st and 2nd have the hover effect now) ... I have absolutely no idea how I can create such a method... I did something like
$('ul li').on('mouseenter') {
$(this).addClass('hover'); //alternatively $(this).css('background-color', 'grey');
}
but it does not remove any :hover effect and it makes failures possible like that only the first and the 5th li Element have the :hover effect but all in between remain normal which I don't want... Could you please help me?
Link to working example on jsfiddle.net
So lets start with some sample markup for a list:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Then some css for your 'hover':
.hover {
background-color: red;
}
And some javascript to give the functionality:
$(function(){
// Our list items.
var listItems = $('ul').children();
// An event listener over all list items.
$('li').hover(hoverIn, hoverOut);
// Find the index of the current element
// and set all elements up to this element as hover.
function hoverIn() {
var index = listItems.index(this);
$.each(listItems, function(idx, ele) {
if (idx <= index) {
$(this).addClass('hover');
} else {
$(this).removeClass('hover');
}
});
}
// Remove all hover.
function hoverOut() {
$.each(listItems, function(idx, ele) {
$(this).removeClass('hover');
});
}
});
In fact this could be done entirely with css. No jQuery or JavaScript is required for this. You should consider using some html structure like this:
<ul>
<li><span>Menu item 1</span></li>
<li>
<span>Menu item 2</span>
<ul>
<li><span>Submenu item 1</span></li>
<li>
<span>Submenu item 2</span>
<ul>
<li><span>Subsubmenu item 1</span></li>
<li><span>Subsubmenu item 2</span></li>
<li><span>Subsubmenu item 3</span></li>
</ul>
</li>
<li><span>Submenu item 3</span></li>
</ul>
</li>
</ul>
Then you can use css like this
li:hover > span {
background: #9a0000;
}
See this jsfiddle: https://jsfiddle.net/aey5cusm/
Or if you ment by first, second, thirth of a single list, it can be done with css too.
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul:hover li {
background: #9a0000;
}
li:hover ~ li{
background: none;
}
Just look at this jsfiddle: https://jsfiddle.net/aey5cusm/1/
I have created a <ul> element and what I am trying to do is to highlight the list elements from a certain child and all the way up. However, because of the nested children, when I highlight a parent also all its children are highlighted (while I want to highlight only the text of the parents).
https://jsfiddle.net/zcfvuh6h/3/
In this example, I should get the nodes Four12, Four1 and Four highlighted.
Any suggestions? Thank you.
EDIT:
Okay, so after understanding what the actual problem you are trying to solve is, it took a bit of work, but I got a working solution.
Working DEMO
A few things to note
1. All of your text in your <li>need to be in a container of some sort, a <span> is fine. You had some in spans and some not, so I put them all in spans for you.
2. This cannot be done with background-color on the <li> or <ul> because it spans multiple lines if it has children. You have to use a css pseudo-element in order to get the desired effect.
3. The demo I have posted also dynamically sets the background of the element and parents based on which element you click on. You must click on a list item in order for the backgrounds colors to show up.
4. Your d3 code that you included is all obsolete at this point. It can be done with 7 toal lines of jQuery.
5. Enjoy!
HTML
...
<li id="i6"><span class="listItem">Four</span>
<ul>
<li id="i7" class="listItem"><span class="listItem">Four1</span>
<ul>
<li id="i71" class="listItem"><span class="listItem">Four11</span>
<ul>
<li id="i4111" class="listItem"><span class="listItem">Four111</span></li>
<li id="i4112" class="listItem"><span class="listItem">Four112</span></li>
</ul>
</li>
<li id="i12" class="listItem"><span class="listItem">Four12</span></li>
</ul>
<li class="listItem"><span class="listItem">Five</span></li>
</ul>
</li>
...
Javascript
$(function () {
$(".listItem:not(li)").on("click", function () {
var parentListItem = $(this).parent();
$("#menu1 .highlight").removeClass("highlight");
parentListItem.addClass("highlight").parents("li").addClass("highlight");
});
});
CSS
.highlight {
position: relative;
}
.highlight > * {
position: relative;
z-index: 100;
}
.highlight::before {
content: ' ';
background-color: cyan;
width: 100%;
height: 15px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
In my MVC Razor layout view I am trying to set the background color of my dropdown list on mouse hover:
The list looks like this:
<li class="dropdown">
Partner <b class="caret"></b>
<ul class="dropdown-menu" style="background-color:#080808">
<li class="marv-main-li">#Html.ActionLink("Test1", "Action1", "Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test2","Action2","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test3","Action3","Partner")</li>
<li class="marv-main-li">#Html.ActionLink("Test4","Action4","Partner")</li>
</ul>
</li>}
I tried this css which didnt work:
.dropdown .dropdown-menu .li a:hover {
background-color: #06fa12;
}
How can I change the background color of the text in the dropdown list on mouse hover event?
I am using Twitter bootsrtap 3
Since <li> is not a class, you should remove the dot before the li in your stylesheet.
Something like this
.dropdown .dropdown-menu li a:hover {
background-color: #06fa12;
}
It is impossible to change a parent element by hovering on a child element. Here is a javascript solution with jQuery.
http://jsbin.com/uWupAtE/1/
$(function() {
var ul = $('.Parent'),
li = $('.Child');
li.mouseover(function() {
ul.addClass('hovered');
});
li.mouseout(function() {
ul.removeClass('hovered');
});
});
If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.
http://jamessuske.com/will/
I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.
This is my JavaScript:
<script type="text/javascript">
function showGalleryNav(){
document.getElementById('headerNavGallery').style.display = "";
}
function showInfoNav(){
document.getElementById('headerNavInfo').style.display = "";
}
function hideGalleryNav(){
document.getElementById('headerNavGallery').style.display = "none";
}
function hideInfoNav(){
document.getElementById('headerNavInfo').style.display = "none";
}
</script>
And The HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Info</li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li>William Ruppel</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div><!--headerNavInfo-->
I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with
$('#headerNavGallery").css("display", "");
also didn't work,
Any ideas would be greatly apperiated.
Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.
<ul class="menu">
<li>item 1</li>
<li>
item 2 with sub
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
... so on ..
</ul>
</li>
</ul>
some css
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 30px; /* the height of the root level item */
display: none;
}
.menu li li {
position: static; /* or you could float these for horizontal menu */
}
.menu li:hover ul {
display: block;
}
These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/
Check that typeo, nvm...
Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:
<script>
$(".galleryNavToggle").on("mouseenter mouseleave", function(event){
var headNavGal = $("#headerNavGallery");
if(event.type === "mouseenter"){
headNavGal.show();
}else if(event.type ==="mouseleave" &&
((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
$.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
headNavGal.hide();
}
});
$("#headerNavGallery").on("mouseleave", function(event){
var headNavGal = $(this);
if(event.type ==="mouseleave"){
headNavGal.hide();
}
});
</script>
HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
AND CSS
.headerNav{
border:thin solid black;
float:left;
}
.headerNavGallery{
float:left;
border:thin solid black;
margin-left:-1px;
}
1) Gallery
You don't need to specify javascript:. This is redundant.
2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.
3) You have code for "headerNavInfo" but no matching HTML.