jQuery Navigation Slider

NubPro · Aug 19, 2012

I got pretty interested in JavaScripting so tried a lot of cool stuff and I love it very much

Need some help with my horizontal navigation I tried, basically the subnav slide down when you hover on the 'Point on me', and it slides up when your mouse goes out from the text.

But I couldn't make it, like..erm..when you hover the subnav and the 'Point on me', it will stop there until your mouse got out off the 'Point on me' and subnav.

But the problem is, I can't code both of them coding getting the same argument cause they aren't in the same div, they are separated far away.

DEMO:

You must be registered to see links

Source codes:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(function(){
		$('.nav').slideDown();
	},
	function (){
		$('.nav').slideUp();
	});
			
});
</script>
</body>
</html>

Hope you guys understand my bad english

Please give me a hand..please :*:

EliteGM · Aug 20, 2012

EDIT:
Demo -

You must be registered to see links

I've not tested it but this should work:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.nav').slideDown();
		},
		function (){
			menuTimer = setTimeout("$('.nav').slideUp();", 2000);
		}
	);
	$('.nav').hover(
		function() {
			clearTimeout(menuTimer);
		},
		function() {
			$(this).slideUp();
		}
	);		
});
</script>
</body>
</html>

It will only go up if you take your mouse off of the subnav. If you take your mouse off of .toggle and don't put it on the subnav within 2 seconds, it will auto close to prevent it from being open constantly.

Shibi · Aug 20, 2012

Great ! I really love it

NubPro · Aug 21, 2012

EliteGM said:

EDIT:
Demo -

You must be registered to see links

I've not tested it but this should work:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle me </title>

<style type="text/css">
div {
	float:left;
	padding-left:10px;
}

.nav {
	background:url(subnav.png) no-repeat;
	width:844px;
	height:22px;
	display:none;
}
</style>

</head>
<body>
<div class="toggle" style="cursor:pointer"><b>Point on me</b></div>

<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<div>RANDOM</div>
<br />

<!-- NAV POP OUT -->
<div class="nav"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.nav').slideDown();
		},
		function (){
			menuTimer = setTimeout("$('.nav').slideUp();", 2000);
		}
	);
	$('.nav').hover(
		function() {
			clearTimeout(menuTimer);
		},
		function() {
			$(this).slideUp();
		}
	);		
});
</script>
</body>
</html>

It will only go up if you take your mouse off of the subnav. If you take your mouse off of .toggle and don't put it on the subnav within 2 seconds, it will auto close to prevent it from being open constantly.

Code:

$(document).ready(function() {
    $('.toggle').hover(

    function() {
        $('.nav').slideDown();
    }, function() {
        menuTimer = setTimeout("$('.nav').slideUp();", 200);
    });
    $('.nav').hover(

    function() {
        clearTimeout(menuTimer);
    }, function() {
        $('.nav').slideUp();
    });
});

Hell yea

it works

thanks bro~

btw, is it possible to use if and else statement eg, a=1 blah blah
ps: I replaced 2000 to 200

EliteGM · Aug 21, 2012

NubPro said:
Code:

$(document).ready(function() { $('.toggle').hover( function() { $('.nav').slideDown(); }, function() { menuTimer = setTimeout("$('.nav').slideUp();", 200); }); $('.nav').hover( function() { clearTimeout(menuTimer); }, function() { $('.nav').slideUp(); }); });

Hell yea it works thanks bro~

btw, is it possible to use if and else statement eg, a=1 blah blah
ps: I replaced 2000 to 200

Of course!
JS has if/else, for, while, etc.

2

NubPro · Aug 21, 2012

EliteGM said:
Of course!
JS has if/else, for, while, etc.

2

And shitzzie this doesn't work o.o
I wonder did any statement are wrongly coded?

Code:

//Toggle Sub Navigation
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.dropdown').slideDown();
            a=1;
		},
		function (){
			if(a==1) {
            	$('.dropdown').slideUp();
            }
		}
	);
	$('.dropdown').hover(
		function() {
			a=2;
		},
		function() {
			$(this).slideUp();
		}
	);		
});

EliteGM · Aug 21, 2012

That should work. What are you trying to accomplish here, though?

NubPro · Aug 21, 2012

EliteGM said:
That should work. What are you trying to accomplish here, though?

nah it didn't

so I tried this and it work

Code:

//Toggle Sub Navigation
$(document).ready(function(){
	$('.toggle').hover(
		function(){
			$('.dropdown').slideDown();
		},
		function(){
			a=1;
		});
		
	$('.dropdown').mouseout(
		function() {
			a=1;
		}
	);		
	$('body').hover(function(){
			if(a==1) {
				$('.dropdown').slideUp();
			}
		});
});

But I found it funny when I use this, what can I replace it with?

Code:

	$('body').hover(function(){

pss: top secret XD

foxx · Aug 21, 2012

how about you learn general programming basics before trying to use frameworks

NubPro · Aug 21, 2012

foxx said:
how about you learn general programming basics before trying to use frameworks

what's franeworks?

foxx · Aug 21, 2012

You must be registered to see links

Chris · Aug 21, 2012

Jquery is a framework of Javascript. Before you use Jquery, you should master the fundamentals of Javascript because those same fundamentals carry over to Jquery. Making functions, If/Else statements, etc. These fundamentals exist in most programming languages, and if you're planning on a career with programming, you will deal with them for your entire life.

NubPro · Aug 22, 2012

Chris said:
Jquery is a framework of Javascript. Before you use Jquery, you should master the fundamentals of Javascript because those same fundamentals carry over to Jquery. Making functions, If/Else statements, etc. These fundamentals exist in most programming languages, and if you're planning on a career with programming, you will deal with them for your entire life.

this is going to be hard o.o gonna learn a new programming language...
I wonder where should I start with?

foxx · Aug 22, 2012

new programming language? you know one already? that's kinda hard to believe..

NubPro · Aug 22, 2012

foxx said:
new programming language? you know one already? that's kinda hard to believe..

okay bro *new language

NubPro · Aug 23, 2012

maybe I was stupid lol duck!

Code:

//Toggle Sub Navigation
$(document).ready(function(){					   
	$('.toggle').hover(function(){
		$('.dropdown').slideDown()
	},
	function(){
		$('.dropdown').slideUp();
	});
	
	$('.dropdown').hover(function(){
		$('.dropdown').stop(); //solved all my problem instead of timeout and if/else
	},
	function(){
		$(this).slideUp();
	});
});

LOL duck TOOK ME TWO DAYS!!

EliteGM · Aug 23, 2012

See, a little bit of learning is never bad for you

Artuuro_lv · Sep 2, 2012

This can be done with css easily.. and even wouldn't need bg image.

Welcome!

jQuery Navigation Slider

Hello!

The Gamma..?

Junior Spellweaver

Hello!

The Gamma..?

Hello!

The Gamma..?

Hello!

Hm.

Hello!

Hm.

Developer

Hello!

Hm.

Hello!

Hello!

The Gamma..?

Junior Spellweaver

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor