HTML:
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
CSS:
.selectcontainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
}
.selectcontainer ul li:not(.init){
display:none;
float:left;
}
li.init{cursor:pointer; background:url("../images/arrow-down.png") right no-repeat;}
li.init1 { cursor: pointer; background:url("../images/arrow-up.png") right no-repeat;}
JQuery:
jQuery(document).ready(function () {
$( "ul" ).click(function() {
$(this).closest("ul").children('li:not(.init)').slideToggle(200);
});
$( "li" ).click(function() {
$("li .init").addClass("li .init1");
});
});
Hi I just have to change my image when dropdown is open up arrow and when close down arrow.
This code is not working please help.
Solved:
You were not toggling "init1" class (first <li>) on click of <ul>, so your arrows were not changing on click.
$("ul").click(function () {
$(this).children('li:not(.init)').slideToggle(200);
$(this).find("li.init").toggleClass("init1");
});
Below is the JS fiddle working example, i have used special characters and :after pseudo class for up/down arrows , you can change as it suits you.
http://jsfiddle.net/4C5ND/
SO simple .U could use transform:rotate(180deg); CSS on click.
You could try:
if($(this).hasClass("class1")){
$(this).removeClass("class1").addClass("class2");
}else{
$(this).removeClass("class2").addClass("class1");
}
Related
Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).
$(document).ready(function(){
let list = $('ul li');
let mega = $('.megamenu');
list.click(function(e){
e.preventDefault();
mega.slideDown(400);
if((e.target) == list){
mega.slideUp(400);
}
})
});
li{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.megamenu{
background:green;
padding:5rem;
color:white;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>Page 1
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
<li>Page 2
<div class ='megamenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
Could you change like this for click to li to dropdown and click li slideup again
$(document).ready(function(){
let list = $('.menu');
let mega = $('.submenu');
list.click(function(e){
e.preventDefault();
var menuDisplay = mega.css('display');
if(menuDisplay == 'block') {
mega.slideUp(400);
} else {
mega.slideDown(400);
}
})
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class='menu'>Page 1
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
<li class='menu'>Page 2
<div class ='submenu'><h1>Mega menu</h1></div>
</li>
</ul>
</div>
CSS
.menu{
list-style:none;
display:inline-block;
padding-right: 5rem;
}
.submenu{
background:green;
padding:5rem;
color:white;
display:none;
}
And click Page1 or Page2 to see slideUp and slideDown
my codes are working correctly but in the change of requirement.
i need to keep current active class active which is removed again i mouseover at active <li>
i am not good in JQuery so can somebody help doing this??
(function($){
$(document).ready(function(){
$('a.form').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('active');
$(this).parent().toggleClass('active');
});
});
})(jQuery);
li.active .btncss, .btncss:hover {
color: #FFAE00;
background: #ffffff;
border: 2px solid;
text-decoration: none;
}
li{display:inline}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active">With In City</li>
<li class="">Full Day Hire</li>
<li class="">Half Day Hire</li>
<li class="">InterCity Hire</li>
</ul>
Use addClass instead of toggleClass.
.toggleClass Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
.addClass() Adds the specified class(es) to each element in the set of matched elements.
It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.
Try this:
(function($) {
$(document).ready(function() {
$('a.form').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('active');
$(this).parent().addClass('active');
});
});
})(jQuery);
li.active .btncss,
.btncss:hover {
color: #FFAE00;
background: #ffffff;
border: 2px solid;
text-decoration: none;
}
li {
display: inline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active">With In City
</li>
<li class="">Full Day Hire
</li>
<li class="">Half Day Hire
</li>
<li class="">InterCity Hire
</li>
</ul>
It's a little hard to understand your question -- do you want the <li> that is originally active to be reset as active on mouseout? To do this, you need to record what was originally active and add a mouseout handler:
(function($){
$(document).ready(function(){
var originally_active = $('li.active');
$('a.form').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('active');
$(this).parent().toggleClass('active');
});
$('a.form').on('mouseout', function() {
$(this).parent().removeClass('active');
originally_active.toggleClass('active');
});
});
})(jQuery);
li.active .btncss, .btncss:hover {
color: #FFAE00;
background: #ffffff;
border: 2px solid;
text-decoration: none;
}
li{display:inline}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active">With In City</li>
<li class="">Full Day Hire</li>
<li class="">Half Day Hire</li>
<li class="">InterCity Hire</li>
</ul>
In our menu, I have a parent menu item and its children turn orange on :hover. I am also using JS to add a toggle to a collapse/expand menu, but since the span element is positioned on top of the parent list item, hovering on the toggle triggers the color change. I am trying to figure out a way (either with Compass or jQuery) to override the hover style on the list if the toggle is hovered on.
We're using Drupal, so the HTML is quite convoluted, but here's a pared down version:
<li class="menu__item is-expanded last-expanded">
<span class="menu__link nolink">About</span>
<span class="menu__link nolink expand"> </span> <!--put here by jQuery for the collapse and expand icon -->
<ul class="menu">
<li>Mission</li>
<li>Team</li>
</ul>
</li>
Here's the jQuery:
jQuery(document).ready(function(){
$(".not-front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand'> </span>");
$(".front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand collapse'> </span>");
$("#block-menu-block-1 ul li li").css({ display: "block" });
$(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
$('#block-menu-block-1 .menu__link.nolink').click(function(){
$('#block-menu-block-1 ul li li').toggle('fast');
$( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
});
});
And here's the Sass:
.menu__item:hover a,
.menu__item:hover span {
color: $orange;
}
Edit: Sorry! I wanted to post a Sassmeister earlier, but their site was down. Had a link to the dev site, but removed once answered.
Edit: I thought something like this would work, but it's not:
jQuery(".menu__item span.expand").mouseover(function(e) {
jQuery("menu__item:hover a, .menu__item:hover span").toggleClass( "stay-gray" );
});
along with this is the sass:
.menu__item:hover a,
.menu__item:hover span {
color: $orange;
border-color: $orange;
&.stay-gray {
color: $darkGray;
border-color: $darkGray;
}
}
Maybe you could try stop propagating the event on the span.expand elements:
$("span.expand").mouseover(function(e) {
e.stopPropagation();
});
EDIT: stopPropagating didn't work. So, retaking the idea proposed by the OP, we figured out this solution:
Add two new CSS rules:
.stay-gray a.menu__link {
border-bottom-color: #474E51 !important;
}
.stay-gray, .stay-gray a.menu__link {
color: #474E51 !important;
}
And then add this lines at the end of the jQuery(document).ready(function(){ ...:
toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);
This way:
jQuery(document).ready(function(){
jQuery(".not-front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand'> </span>");
jQuery(".front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand collapse'> </span>");
jQuery("#block-menu-block-1 ul li li").css({ display: "block" });
jQuery(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
jQuery('#block-menu-block-1 .menu__item.is-expanded').click(function(){
jQuery('#block-menu-block-1 ul li li').toggle('fast');
jQuery( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
});
toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);
});
This way, when you hover over the span.expand element, the stay-gray class is toggled on at its siblings, and the new styles are applied on them and its a.menu__link descendants. When the mouse is out, the stay-gray class is toggled off.
HTML
<div id="gadget">
<span id="nav_up">UP</span>
<ul>
<li>LIST1
<ul>
<li>Child1.1</li>
<li>Child1.2</li>
</ul>
</li>
<li>LIST2
<ul>
<li>>Child2.1</li>
</ul>
</li>
<li>LIST3
<ul>
<li>>Child3.1</li>
</ul>
</li>
</ul>
<span id="nav_down">Down</span>
</div>
CSS
#gadget{width:75px; height: 100%;}
#gadget ul{height:450px; width:100%; overflow:hidden;}
#gadget ul li ul{display:none;}
#gadget ul li:hover ul{display:block;}
JS
$('#nav_down').click(
function () {
$('#gadget ul').animate({scrollTop: '100px'}, 800);
}
);
$('#nav_up').click(
function () {
$('#gadget ul').animate({scrollTop: '0px'}, 800);
}
);
Here on click <span> up and down the gadget <ul> moves up and down according to the overflow.
But when overflow:hidden is applied the child <ul> is not showing. And when I remove it child <ul> shows but the <span> scroll dosenot work. How can i solve this?
I believe the problem is all of your ULs are height:450px, would applying the height to only the top element solve the problems?
#gadget > ul{height:450px; width:100%; overflow:hidden;}
Your nested ul needs to be absolutely positioned and for proper scrolling grab the body element and apply the animate method http://jsfiddle.net/PJ3gp/
#gadget ul li ul{display:none;position:absolute;}
Add position:absolute to child elements
I want to do this(photoshop image) on my page:
On hover(over the ACTORS link) I want the yellow drop down list(where Fotis J.Colakides etc is) to show up slowly. From up till down.
I don't know what is the best way to do this on my page.
Of course I have to use an unorder list() like this:
<ul id="showInfoNav">
<li><a class="slideBtn" href="#">MEDIA</a>
<ul class="slideShow">
<li>assa</li>
</ul>
</li>
<li><a class="slideBtn" href="#">ACTORS</a>
<ul class="slideShow">
<li>ACTOR1</li>
<li>ACTOR2</li>
</ul>
</li>
</ul>
[Update]
Util now I have done this: (http://jsfiddle.net/bMGhC/)
But I am doing it from css. I have the left:-9999px; and on hover I am doing it left:0px;
I want to do it slideDown. But it is not working.
here is my css:
ul#showInfoNav
{
list-style:none;
float:left;
width:100%;
}
ul#showInfoNav li
{
float:left;
margin-right:50px;
position:relative;
}
ul#showInfoNav a.slideBtn
{
padding:5px;
display:block;
text-decoration:none;
}
ul#showInfoNav ul a:hover{
color:#898989;
}
/*--- DROPDOWN ---*/
ul#showInfoNav ul
{
background-color:#F4F9B6;
padding:50px 10px 10px 10px;
list-style:none;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
position: absolute;
top:-20px;
/*z-index:-1;*/
}
ul#showInfoNav ul li
{
float:none;
}
ul#showInfoNav ul a{
white-space:nowrap;
}
ul#showInfoNav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
I have also this z-index problem. If I set it -1 it is hidden behind the image too.
Check out jQuery UI effects, specifically slide():
http://docs.jquery.com/UI/Effects/Slide
You could also look into the slideToggle() method that jQuery supplies.
See an example here.
Similar functions would be slideUp(), slideDown() and the more general, animate()
Take a look at .hover(), and .slideUp/Down(). You can also replace .hover with .toggle in the following code, if you'd like a more 'permanent' state. The key to both is utilizing their callback functions.
HTML
Click to see a list
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
jQuery
$('ul').hide(); // doing this rather than via CSS for a fail-safe for JS
$('a').hover(function() {
$('ul').slideDown('fast');
}, function() {
$('ul').slideUp('slow')
})
When using jQuery fadeIn() you can specify the duration too.
Some simple sample would be:
Give the li's some id or class ( <li id="actor1">soemthing</li>)
In the JS file or script tag use:
$("#actor1).hover(function(){ $(this).slideDown('slow')}, function(){ $(this).slideUp('slow') });
EDIT: I see that you want a sliding effect so, I changed fadeIn() and fadeOut() to slideDown() and slideUp(). You can read their documentation here
This is the solution I found, I used this because I didn't want the <ul> to slideUp when I was navigating among his <li> tags.
$('ul.slideShow').hide();
$("#showInfoNav li").click(function () {
$(this).find('ul.slideShow').slideDown('fast').show();
$(this).hover(function () { // PARENT
}, function () {
$(this).parent().find("ul.slideShow").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
});