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;
}
Related
How to remove these two inline style beside the .dropdwon menu, I tried the remove attribute [ jQuery('.dropdown-menu').removeAttr('style'); ] unfortunately it doesn't remove the inline style. Every time I hover the nav the inline style change to display block and when it hover out the inline style is set to display:none
<ul role="menu" class=" dropdown-menu" style="display: none;">
<ul role="menu" class=" dropdown-menu" style="display: block;">
Here's my code. I'm trying to remove this on size 767 or mediaquery max-width(767)
jQuery(window).resize(function() {
var width = jQuery(window).width();
if( width < 767 ) {
jQuery('.dropdown-menu').removeAttr("style");
}
});
jQuery(document).resize(function() {
var width = jQuery(document).width();
if( width < 767 ) {
jQuery('.dropdown-menu').removeAttr("style");
}
});
please see the two attached image for better visualization
When I hover the nav(About) the subpage show(ul.dropdown-menu) and the inline style will set to display block
When I hover out the nav(About) the subpage (ul.dropdown-menu) inline style will set to display none
Please help me get rid these two inline style the style="display:none"; and style="display:block";
Try with show()
jQuery('.dropdown-menu').show()
or css()
jQuery('.dropdown-menu').css('display','block')
Drag the output window of the fiddle .They will show the menu on resize
Demo Fiddle
There is a JavaScript somewhere that is adding those styles. I guess you are using some framework or template you found in the Internet. Now you either have to remove the not-needed code that adds the styles (recommended!) or bind over it to be removed each time, something like what you have written but in different event:
jQuery('.dropdown-menu').hover(function() {
jQuery('.dropdown-menu').removeAttr("style");
}, function() {
jQuery('.dropdown-menu').removeAttr("style");
});
Ensuring this is after the piece of code that does the style adding at first place.
Or you can try totally removing the behaviour for the menu and write your own:
jQuery('.dropdown-menu').unbind();
Try to append at the end of your main css file a rule-set declaration on .dropdown-menu selector with the property display:none for media-query < 767:
#media screen and (max-width: 766px) {
.dropdown-menu {
display:none;
}
}
You can use click instead of hover for mobile, and display: none; by default, set in CSS. Then add a media queries for PC (here > 767px) to force display: block;. The good thing is that you limit the use of JS.
This is a working example of what can be done.
EDIT
I updated the snippet with an example which is, I think, closer to your code.
$('.menu-item').click(function() {
$(this).toggleClass("active");
});
.menu-item .dropdown-menu {
display: none;
}
.menu-item.active .dropdown-menu {
display: block !important;
}
#media only screen and (min-width: 767px) {
.menu-item .dropdown-menu {
display: block !important;
}
}
<ul role="menu" class="menu">
<li class="menu-item">Menu 1</li>
<li class="menu-item">
Menu 2
<ul role="menu" class="dropdown-menu" style="display: none;">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I've an unordered list.
<div class="categories-list">
<ul class="display_categories">
<li>
<a class="title"><span><b>1</b></span></a>
<ul class="display_subcategories">
<li><a>22</a></li>
<li><a>22</a></li>
</ul>
</li>
<li>
<a class="title"><span><b>1</b></span></a>
<ul class="display_subcategories">
<li><a>22</a></li>
<li><a>22</a></li>
</ul>
</li>
</ul>
</div>
I want that when a user clicks on any category, its sub-category should slidedown and whenever the same category is clicked, nothing should happen. Here's my jQuery
$('.display_subcategories').hide()
$('.title').click(function(){
$('.display_categories').children().children('ul').slideUp('fast');
$(this).next().slideDown('fast');
})
but what happens is that upon clicking on the already slideDown category, it again slides up and then slides down.
Here is the jsFiddle link
You can slideDown the current submenu, then use not() to slideUp() all except the current, like this:
$('.display_subcategories').hide()
$('.title').click(function() {
var $submenu = $(this).next().slideDown('fast');
$('.display_categories').find('> li > ul').not($submenu).slideUp('fast');
});
Updated fiddle
Note also the use of find() with the descendant selector over chained children() calls.
Try this
$('.display_subcategories').hide();
$('.title').click(function(){
if(!$(this).hasClass('down')){
$('.title').removeClass('down');
$('.display_categories').children().children('ul').slideUp('fast');
$(this).next().slideDown('fast');
$(this).addClass('down');
}
})
Updated JS Fiddle
I would suggest letting CSS manage your animations by triggering or disabling classes. A simple example would be adding the .active class to an open <ul>, and the following CSS:
.display_subcategories { max-height: 0; overflow: hidden; transition: all 300ms; }
.display_subcategories.active { max-height: 50px; }
Here is a modified JSFiddle with my suggestion.
I have a question: is it possible to hide some images and make the same visible in another list? Here is the code:
<section>
<ul class="portfolio_filters">
<li>show all</li>
<li>New Logos</li>
<!--lightbox2-->
<li>Black & White</li>
<!--lightbox3-->
<li>Industrial</li>
<!--lightbox3-->
<li>Mix</li>
<!--lightbox4-->
</ul>
</section>
i want some images not to show in the "SHOW ALL" list, but if I click (for example) on the black and white list the same image needs to be visible.
thanks for the answers here is for example a linked image
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item"> <a href="images/portfolio/stimson.jpg" class="lightbox"> <img src="images/portfolio/stimson.jpg" alt="Wedding photograph">
<div class="overlay">
<div class="desc">
<h4>Stimson</h4>
<span class="cross"></span> </div>
</div>
</a> </div>
</div>
how to make this visible only in the " NEW LOGOS " list and not in the "SHOW All" list?
You could try something like this:
$("img").hide();
$("li a").click(function(event){
event.preventDefault();
$("img").hide();
filter = $(this).data("filter");
if(filter=="*")
$("img:not(.black)").show();
else
$(filter).show();
});
Demo JsFiddle
Add a class like .hidefromall to the images you want to hide, and use a :not() selector:
<li>show all</li>
It's kinda hard with not all of the code. I assume that all the lists are build the same, and have the same HTML structure.
Most simple is to add a class to the specific list in which you want to hide the 'Show all', lets call that class dontShowAll. In your CSS you can then use:
.portfolio_filters.dontShowAll li:first-child { /*note that the classes a written without a space!! */
display: none;
}
If you aren't able to change the HTML structure you can use child selectors:
section:first-child ul li:first-child { /* only from the first list */
section:nth-child(odd) ul li:first-child { /* from all the odd lists */
section:nth-child(3n) ul li:first-child { /* every third */
section:nth-child(4) ul li:first-child { /* only the fourth */
section:nth-child(n + 5) ul li:first-child { /* the fifth and all that follow */
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();
}) ;
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');
});
});