Advanced Search

Return to Snippet

Revision: 57262
at May 23, 2012 03:30 by skeletor1101
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<style>
.main_nav {
	background: #003580;
	color:#fff;
	width:800px;
	height:400px;
	
}
.main_nav_full {
	
	width:1000px;
}
.nav_col {
	float:left;
	width:200px;
}


.toplevelnav li{
	
	list-style-type: none;
	
}

.toplevelnav{
	margin-bottom: -20px;
}

.red{
	background-color: red;
}

.drop-down{
	background-color: #021E2F;
	height: inherit;
	
}

.drop-down ul{
	padding-top: 50px;
}

.main_nav ul{
	list-style-type: none;
	padding-left: 10px;
}

h5{
	font-size: 20px;
	padding-left: 10px;
	border-bottom: 1px solid grey;
	margin: 5px;
	color: #0082D1;
}
.main_nav a{
	text-decoration: none;
	font-size: 14px;
	text-transform: uppercase;
	color: white;
}
.navimage{
 	/*background-image: url("../../navstudents.jpg");*/
	height: inherit;
}
.main_nav li:hover{
	background-color: blue;
}
.main_nav #space{
	
	height:366px;
	width:295px;
	background-image:url('navstudents.jpg');
	background-repeat:no-repeat;
	background-position: bottom right;
	z-index:100;
	margin-left:505px;
	padding-top:35px;
	border:0;
	
	
	
}

.main_nav_full #space{
	
	height:366px;
	width:295px;
	background-image:url('navstudents.jpg');
	background-repeat:no-repeat;
	background-position: bottom right;
	z-index:100;
	margin-left:705px;
	padding-top:35px;
	border:0;
	
	
	
}

</style>
<body>
<div class="toplevelnav">
	<ul><li><span class="showdropnav">HOVER</span></li></ul>
</div>
<div class="main_nav">

  <div class="nav_col">
  <h5>HEADING</h5>
    <ul>
      <a href="#"><li>LINK</li></a>
      <a href="#" class="drop_down_link" dropDownName="drop-down-1"><li>HOVER</li></a>
      <a href="#" class="drop_down_link" dropDownName="drop-down-2"><li>HOVER</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      
    </ul>
  </div>
  <div class="nav_col drop-down drop-down-1">

    <ul>
	<a href="#"><li>LINK</li></a>
	<a href="#"><li>LINK</li></a>
	<a href="#"><li>LINK</li></a>
    </ul>
  </div>
  <div class="nav_col drop-down drop-down-2">
 <ul>
	<a href="#"><li>LINK</li></a>
	<a href="#"><li>LINK</li></a>
    </ul>
  </div>

  <div class="nav_col">
  <h5>HEADING</h5>
    <ul>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      
    </ul>
  </div>
  <div class="nav_col">
  <h5>HEADING</h5>
    <ul>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
      
    </ul>
  </div>
  <div class="nav_col">
    <h5>HEADING</h5>
    
    <ul>
      <a href="#"><li>LINK</li></a>
      <a href="#" class="drop_down_link" dropDownName="drop-down-3"><li>HOVER</li></a>
      <a href="#"><li>LINK</li></a>
    </ul>
    
  </div>
   <div class="nav_col drop-down drop-down-3 third-drop">
    <ul>
      <a href="#"><li>LINK</li></a>
      <a href="#"><li>LINK</li></a>
    </ul>
  </div>
<div id="space"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script>
	$('.drop-down').hide();
	$('.main_nav').hide();
	
	$('.showdropnav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
	$('.main_nav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
	
	$('.drop-down').hover(function(){
		$(this).show();
		if($('a.drop_down_link').hover()){	
			$('div.main_nav').toggleClass("main_nav_full");
		} 
		}, function(){
			$(this).hide();
				if($('a.drop_down_link').hover()){
					$('div.main_nav').toggleClass("main_nav_full");
				} 		
			});
	
	$('a.drop_down_link').hover(function(){
		
		var dropDown = $(this).attr("dropDownName");
		
		
		if($('.drop_down').hover()){
			$('div.main_nav').toggleClass("main_nav_full");
			
			$('div.'+dropDown).stop(false,true,true).toggle(300,function(){});
			
		}
		else{
		
		
		
		}
		
		
		
	
		
		
     
     
     
	});
</script>
</html>
Initial URL 









Initial Description





I am having an issue making the div stay opened when it gets animated









Initial Title





jQuery toggle() issue









Initial Tags





css, javascript, jquery









Initial Language





JavaScript