10 Replies - 2124 Views - Last Post: 07 September 2013 - 01:57 PM

#1 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

jQuery submenu stay active

Posted 06 September 2013 - 07:16 AM

I am coding one website and I ahve problem with jQuery. I set to slide down submenu but whenever I mouseOut of the list item, submenu slideUP. Here it is: https://mega.co.nz/#...9b4VRiTBYLMPPNs

I want submenu to stay active, how to do it?
Is This A Good Question/Topic? 0
  • +

Replies To: jQuery submenu stay active

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,538
  • Joined: 12-December 12

Re: jQuery submenu stay active

Posted 06 September 2013 - 07:32 AM

That's a download link. Just post the relevant sections of code (a bit of css, jQuery and HTML).
Was This Post Helpful? 0
  • +
  • -

#3 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: jQuery submenu stay active

Posted 06 September 2013 - 07:51 AM

I have fonts included, but ok.

HTML:
<html>
	<head>
			<title>Srpska IT Edukacija</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="jquery.js" type="text/javascript"></script>
		<meta name="author" content="Aleksandar Arsic" />
			<meta name="description" content="" />
				<meta charset="UTF-8" />
		<script>
			$(document).ready(function() {
  $('.open').hover(function() {
    $('.sub').slideDown('slow'); 
}, function() {
    $('.sub').slideUp('slow'); 
});    
});  
		</script>
		<script>

		</script>
	</head>
	<body>
		<div id="header">
			<p class="header">Srpska <span style="color:#828282;">IT</span> Edukacija <span class="copyright">Website copyright &copy; Srpska IT Edukacija 2013</span></p>

		</div>
		<div id="block">
		<div id="navigation">
			<ul class="top">
				<li><a href="">Home Page</a></li>
				<li><a href="">About/Bio</a></li>
				<li class="open"><a href="">Tutorials</a></li>
					<ul class="sub">
                		<li><a href="#">Sub Menu Item 1</a></li>
                		<li><a href="#">Sub Menu Item 2</a></li>
                		<li><a href="#">Sub Menu Item 3</a></li>
                		<li><a href="#">Sub Menu Item 3</a></li>
           			 </ul>
				<li><a href="">Contact</a></li>
			</ul>
		</div>
		<div id="main">
				<div id="navigation2">
					<ul>
						<li><a href="">Tab One</a></li>
						<li><a href="">Tab Two</a></li>
						<li><a href="">Tab Three</a></li>
					</ul>
				</div>
		</div>

</div>
	</body>
</html>

CSS:
* {
	padding:0px;
	margin:0px;
}
@font-face {
	font-family:Header;
	src: url('Fonts/Header.ttf');
}
@font-face {
	font-family:Header Italic;
	src: url('Fonts/HeaderI.ttf');
}
@font-face {
	font-family:Navigation;
	src: url('Fonts/Navigation.ttf');
}
body {
	background-color:#3b3b3b;
}
#header {
	position:relative;
	background-color:#323232;
	position:relative;
	width:100%;
	height:150px;
}
p.header {
	color:#f7f7f7;
	font-family:Header;
	font-size:40px;
	line-height:120px;
	margin-left:20px;
}
.copyright {
	color:#b9b9b9;
	font-family:Header Italic;
	font-size:18px;
	line-height:150px;
	float:right;
	margin-right:100px;
}
#block {
	display:inline-block;
	width:100%;
}
#navigation {
	float:left;
	width:200px;
	background-color:transparent;

}
#navigation li { 
	list-style: none;
}
ul.top {
	background-color:#3b3b3b;
}
ul.top li {
	line-height:30px;
	color:#787878;
	border-bottom:1px solid #323232;
}
ul.top li :hover {
	background-color:#4f4f4f;
}
#navigation a {
	font-family:Navigation;
	font-size:18px;
 	color: #787878;
 	cursor: pointer;
 	display:block;                
 	text-decoration:none;
 	padding-left:20px;
 	padding-bottom:5px;
}
#navigation a:hover{
 	color:#fff;
}

ul li:hover .sub{
    border-bottom: #323232 solid;
    border-width: 1px;
    display: block;
    position: absolute;
    top: 5px;
    color:#fff;
}
ul.sub {
	list-style:none;
	display:none;
}
ul.sub li {
	background-color:#2f2f2f;
    border: none;
    float:left;
    width:200px;
}
ul.sub li :hover {
	background-color:transparent !important;
}
#main {
	margin-left:200px;
	width:auto;
	height:1000px;
	background-color:#fff;
}
#navigation2 {
	flaot:left;
}
#navigation2 li {
	padding:20px;
	list-style: none;
	display:inline-block;
	line-height:30px;
	border-right:1px solid #e3e4df;
	border-bottom:1px solid #e3e4df;
}
#navigation2 li:hover {
	background-color:#87cac3;
}
#navigation2 li a {
	text-decoration:none;
	color:#a5a599;
	font-family:Navigation;
	font-size:18px;
	text-align:center;
}
#navigation2 li a:hover {
	color:#fff;
}

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 400
  • View blog
  • Posts: 1,711
  • Joined: 30-April 10

Re: jQuery submenu stay active

Posted 06 September 2013 - 10:41 AM

You are using a hover event so when you mouse-out it will execute the second function

$('.open').hover(function() {
    $('.sub').slideDown('slow');
}, 
function() { //This function fires when the mouse leaves the element with the class of open
    $('.sub').slideUp('slow');
});



In order to keep it active I would use the jQuery .on() method

$(".open").on("click", function(){
   //slide down $(.sub)
});



This will allow keep it from sliding up when you leave it.

This post has been edited by laytonsdad: 06 September 2013 - 10:43 AM

Was This Post Helpful? 0
  • +
  • -

#5 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: jQuery submenu stay active

Posted 06 September 2013 - 11:10 AM

Well i tried it like this and it doesn't work:
		<script>
			$(document).ready(function() {
$('.open').on("click", function(){
    $('.sub').slideDown('slow');
}, 
function() { 
    $('.sub').slideUp('slow');
});
});  
		</script>

Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 400
  • View blog
  • Posts: 1,711
  • Joined: 30-April 10

Re: jQuery submenu stay active

Posted 06 September 2013 - 11:30 AM

OK, you want the menu to stay open, until when? This will help understand what you really want. I am under the impression you want it to stay open for the duration of the users stay.

Also, when using the click you can only use one function for your event because there is only one event, the mouse click on an element.
The reason the hover has two functions to call is because one is the mouseover event and one is the mouseout event.
Was This Post Helpful? 0
  • +
  • -

#7 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: jQuery submenu stay active

Posted 06 September 2013 - 11:41 AM

I want from user to click on tutorials and the submenu will slide down. After that he can check out that submenu, do whatever he want, but if he want to close it again he will click on tutorials again :D
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 400
  • View blog
  • Posts: 1,711
  • Joined: 30-April 10

Re: jQuery submenu stay active

Posted 06 September 2013 - 11:59 AM

Use an if statement to see if it is down or not and then just do the opposite, inside of a click event handler
Was This Post Helpful? 0
  • +
  • -

#9 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: jQuery submenu stay active

Posted 07 September 2013 - 10:23 AM

I have found something that work on other forum, but I am unable to use that jQuery for my navigation or better to say I don't know how to apply it. Here is live example of navigation sliding down and up with no problems:
http://strata.alianc...dsdasdasdasdada
And this is code:
<html>
<script src="jquery.js"></script>
<head>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
#menu {
margin-top:50px;
margin-left:50px;
border:1px solid #cacaca;
}
#menu, #menu ul {
list-style-type: none;
width:200px;
}
#menu li {
padding:10px;
cursor: pointer;
background: #dddddd;
border-bottom: 1px solid #cacaca;
border-left:3px solid #f12727;
}
#menu li a { text-decoration: none;color:#6b6d8f;font-family:Segoe UI; }
#menu > li > a{
padding: 2px 10px;
font-weight: bold;
}
#menu li li {
cursor: auto;
border: 0;
padding: 0 14px;
width:80%;

}
#menu li li a{
color:#9092b4;
}
</style>
<script>
$(document).ready(function() {
$('#menu > li > ul')
.hide()
.click(function(event) {
event.stopPropagation();
});
$('#menu > li').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Tutorials</a>
<ul class="active">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Premium Gallery</a></li>
<li><a href="#">Open Source Gallery</a></li>
</ul>
</li>
<li><a href="#">Social Networks</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 400
  • View blog
  • Posts: 1,711
  • Joined: 30-April 10

Re: jQuery submenu stay active

Posted 07 September 2013 - 10:47 AM

Take a look at this fiddle and see if this is what you want.

Or this one uses .toggle

This post has been edited by laytonsdad: 07 September 2013 - 10:54 AM

Was This Post Helpful? 1
  • +
  • -

#11 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 24-August 13

Re: jQuery submenu stay active

Posted 07 September 2013 - 01:57 PM

Thank you very much \o/ .
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1