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
Related
I have this snippet of html
ul { display:none }
test 1
test 2
test 3
<ul class="hh-ul-1 mm-listitem">
sub 1
</ul>
Test 4
<ul class="hh-ul-1 mm-listitem">
sub 2
</ul>
By default ul elements are hidden.
I'm trying to achieve when the a element is hovered to show only ul element which is the next sibling.
For example, if test 3 link has hovered, the ul element with sub 1 link needs to show up and to stay while the a and ul are hovered.
I'm not so experienced, so any help would be appreciated.
Have a look at adjacent sibling combinator
I add focus so you can keep the UL open
Also the a in the UL should be in an li. That makes it somewhat harder to make a sub-sub menu
ul { display:none; position: absolute; top:50px }
a:hover + ul { display: block }
a:focus + ul { display: block }
test 1
test 2
test 3
<ul class="hh-ul-1 mm-listitem">
<li>sub 1</li>
</ul>
Test 4
<ul class="hh-ul-1 mm-listitem">
<li>sub 2</li>
</ul>
When I load my page when it is over 860px wide the script works the way I want it to. It does not have the .open class on the child ul tag of li.parent class. It also adds that class when I make the page smaller.
However, I noticed when I go from the page being smaller to larger, the .open class still hangs around. And if I click on the li.parent, it throws off the script and it no longer works when the page is smaller.
Here is my script.
$(window).resize(function (){
if ( $(window).width() < 860 ) {
$(document).ready(function(){
$('li.parent').click(function(){
$(this).find('ul').toggleClass('open');
});
});
}
else {
$('ul#primary-nav').removeAttr('style');
$('li.parent').find('ul').removeClass('open');
}
});
Other scripts in the same document. Maybe they are causing a conflict?
// Mobile Menu Slide Toggle
jQuery(document).ready(function() {
jQuery('.show_nav').click(function(e) {
e.preventDefault();
jQuery('#primary-nav').slideToggle();
});
});
// For Menu Caret
jQuery(document).ready(function() {
jQuery('ul#primary-nav li').has('ul').addClass('parent');
});
Some of the CSS
ul#primary-nav li.parent ul {display: none;}
ul#primary-nav li.parent ul.open {display: block;}
Some of the HTML
<img src="images/hamburger-lines-white.svg" alt="Menu" width="25" height="25">
<ul id="primary-nav">
<li>About
<ul>
<li>History</li>
<li>Facilities</li>
</ul>
</li>
<li>Tennis</li>
<li>Classes</li>
<li>Calendar</li>
<li>Newsletter</li>
<li>Home Owners
<ul>
<li>Board of Directors</li>
<li>Architectural Committee</li>
<li>Documents and Forms</li>
</ul>
</li>
<li>Contact</li>
</ul>
Been trying to figure this out for a while and looked all over this site. Could really use some help.
Forget the jQuery and use a media query.
ul#primary-nav li.parent ul {display: none;}
#media only screen and (min-width: 860px) {
ul#primary-nav li.parent ul {display: block;}
}
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
});
});
I am trying to create a menu system where when a list anchor is clicked, a div below the ul list is shown. but the system is not working and i can't control if the user is over the displayed div.
Here below is the code where
I created UL list to create tabs
I created DIVs as pages to be displayed
I created jquery mouseenter event to display the div with same class as of the link's ID
I used mouseleave function to hide the displayed div.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; display:inline; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear:both; position:absolute; }
.tab_pages div{display:none;width:200px; height:200px; background- color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseenter(function(e) {
var tid=this.id;
$(".tab_pages div").hide();
$(".tab_pages ."+tid).show();
});
$(".tabs_button a").mouseleave(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).hide();
});
});
</script>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
Here the main part i am having problem is to keep div showing if the user is hovering over the div.
Edit: Fiddle
I have created complete code bin for above issue on http://codebins.com/bin/4ldqpam
So, Try on it.
To Solve this follow below steps:
1) Include latest jQuery.js javascript file on html header tag first.
2) HTML (Little bit Changes)
<div class="tabs_button">
<ul>
<li id="page1">
<a href="#">
Cars
</a>
</li>
<li id="page2">
<a href="#">
Price & Offers
</a>
</li>
<li id="page3">
<a href="#">
Chevy Experience
</a>
</li>
<li id="page4">
<a href="#">
Service
</a>
</li>
<li id="page5">
<a href="#">
Contact Us
</a>
</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
3) CSS (Add Few More Styles):
body{
background-color:#000;
}
.tabs_button{
width:950px;
}
.tabs_button ul {
list-style:none;
margin:0px;
padding:0px;
}
.tabs_button ul li {
width:120px;
float:left;
display:inline;
margin-left:10px;
margin-right:10px;
text-align:center:
}
.tabs_button ul li:hover a{
color:#FFC222;
}
.tabs_button ul li:hover{
background-color:#445566;
}
.tabs_button ul li a{
color:#FFF;
text-decoration:none;
}
.tabs_button ul li a:hover{
color:#FFC222;
}
.tabs_button ul li.selected a{
color:#FFC222;
}
.tabs_button ul li.selected{
background-color:#445566;
}
.tab_pages{
clear:both;
position:absolute;
}
.tab_pages div{
display:none;
width:120px;
height:200px;
color:#fff;
background-color:#445566;
margin-top:27px;
position:absolute;
}
4) JQuery for Menu Navigation:
$(".tabs_button li,.tab_pages div").mouseenter(function() {
var className = $(this).attr('id');
$(".tabs_button #" + className).removeClass("selected");
if (typeof(className) == "undefined" || className == null) {
className = $(this).attr('class');
$(".tabs_button li").removeClass("selected");
$(".tabs_button #" + className).addClass("selected");
}
$(".tab_pages div").hide();
var offset = $(".tabs_button li#" + className).offset();
$(".tab_pages ." + className).css({
'left': offset.left - 8
});
$(".tab_pages ." + className).show();
});
Try using the mousover event instead, like:
$(".tabs_button a,.tab_pages").mouseover(function() {
});
Remove the (".tab_pages div").hide(); from your mouseenter() event. Also, in the .tab_pages style, change position:absolute to float:left. If you were to use absolute positioning, you would need to specify either a top or bottom position and a left or right position, for example - top:0px; left:0px. But since you are specifying a top-margin of 30px, use float - absolutely positioned divs cannot have margins added to them. Lastly, in your .tabs_button ul li style, the display:inline does not do anything - calling float:left changes the li to a block element - which is what you want. I have copied the code with the changes below - should work for you.
<style>
.tabs_button ul {list-style:none; margin:0px; padding:0px;}
.tabs_button ul li {float:left; margin-right:50px;}
.tabs_button ul li a{color:#FFF; text-decoration:none;}
.tabs_button ul li a:hover{color:#FFC222;}
.tab_pages{clear: both; float: left; }
.tab_pages div{display:none;width:200px; height:200px; background-color:#CCC;margin-top:30px;}
</style>
<script>
$(document).ready(function(e) {
$(".tabs_button a").mouseover(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().show();
});
$(".tabs_button a").mouseout(function(e) {
var tid=this.id;
$(".tab_pages ."+tid).stop().hide();
});
});
</script>
<body>
<div class="tabs_button">
<ul>
<li>Cars</li>
<li>Price & Offers</li>
<li>Chevy Experience</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab_pages">
<div class="page1">
Cars Display Page
</div>
<div class="page2">
Offers Display Page
</div>
<div class="page3">
Chevy Exp Page
</div>
<div class="page4">
Service Display Page
</div>
<div class="page5">
Contact us Display Page
</div>
</div>
I have placed my code in http://jsfiddle.net/ChvjL/4/
While the mouse pointer is upon Link1 then the sub links link1a, link1b, link1c should appear.
Similarly for Link2 also.
Can anyone help me in resolving this
Thanks in advance
Amith
Here is an idea how it should be in your case:
html
<ul>
<li>Link1
<ul>
<li>Link1a</li>
<li>Link1b</li>
<li>Link1c</li>
</ul>
</li>
<li>Link2
<ul>
<li>Link2a</li>
<li>Link2b</li>
<li>Link2c</li>
</ul>
</li>
</ul>
Css
ul > li { width:100px; float:left; }
ul > li > ul { display:none; }
ul > li:hover > ul { display:block; }
ul > li > ul { padding-left:10px; }
Code http://jsfiddle.net/ChvjL/10/
Are you trying to say that when a person hovers at the link given, another link will be shown?
You can refer to this example. It's similar. You just need change the content:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/