jquery("Ich stehe auf dem Schlauch") . navigationsanimation

technikfreack

technikfreack

Mitglied
Hi,
ich bin dabei, eine Website zu erstellen. Momentan noch ziehmlich in den Anfangsphasen. Es klappt irgentwie nicht: ich möchte wenn ich über ein SPAN fahre, dass sich ein Menü mit getrennten DIV ausfährt.
Mein aktueller Quelltext:

index.html:
HTML: 
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>TTS 3.0 - Home</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>

</head>

<body onload="load()">
<div class="blackscreen"></div>



<div class="gl_nav" id="gl_nav">
<span class="title">Home | <span class="gl_navnews">News</span> | Technic Area | Feedback | Kontakt</span>
<!-- <span class="action">Anmelden | Registrieren</span> -->
<span class="menue_news">
<ul>
<li>Allgemeines</li>
<li>Technisches</li>
<li>Aus aller Welt</li>
</ul>


</span>


</div>
<div class="main" id="main" style="display:none;"><br><br><br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<br><br><br>
</div>
<tt>
<div class="ttslogo"><img src="ttslogo.png" alt="" ></div>
<div class="top" id="toplink" style="display:none;"><a href="#main">
?<br>
Nach oben
</a><br><br></div>

</body>
</html>


css.css:
Code: 
body{
	background-color: black;
	margin: 0;
	padding: 0;

	
}
* {
	color: white;
	font-family: Ubuntu;
	cursor: default;
}




.ttslogo img{
	width: 160px;
	position: fixed;
	top: 80px;
	left: 2px;

	}

.gl_nav{
	background-image: url(navi.png);
	height: 60px;
	position: fixed;
	width: 100%;
	z-index: 2;
	
	
}
.main{

	height: 100%;
position: absolute;

left: 180px;
right: 180px;

	
}


.top, .bottom{
text-align: center;
	position: fixed;
	bottom: 2px;
	right: 5px;
	text-decoration: none;
	width: 100px;

	}
	.top a, .bottom a{
		text-decoration: none;
	}
	
	.gl_nav .title{
	position: fixed;
	top: 14px;
	left: 10px;	
	font-size: 20px;	
		
	}
	
.gl_nav .title ul li{
	list-style-type: none;
	float: left;
	padding: 0;
	
}
.gl_nav .title .naviklappe{


   margin-top: -10px;
	font-size: 15px;	
		
	}

.end{
left: 180px;
right: 180px;

background-color: red;



	
}

.blackscreen{
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
	background-color: black;
	opacity: 0.75;
	z-index: 5;
	display: none;
	
}

.menue_news ul{
	background-color: red;
	color: green;
	height: 60px;
	position: fixed;
	top: 36px;
	left: 70px;
   padding: 10px !important;
	z-index: 50;
	list-style-type: none;


}
.menue_news{ display: none;}
.gl_navnews{
	background-color: green;
}

js.js:
PHP: 
$(document).ready(function() {
		// Alle internen Links auswählen
		$('a[href*=#]').bind("click", function(event) {
			// Standard Verhalten unterdrücken
			event.preventDefault();
			// Linkziel in Variable schreiben
			var ziel = $(this).attr("href");
			//Scrollen der Seite animieren, body benötigt für Safari
			$('html,body').animate({
				//Zum Ziel scrollen (Variable)
				scrollTop: $(ziel).offset().top
			// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
			}, 1000 , function (){location.hash = ziel;});
	   });
	return false;
	});
	
	function load(){
var toplink = setInterval('hidetoplink()', 200);
main();
}

function main(){
	$(".main").animate({ height: 'show', opacity: 'show' }, 'slow');
	
}


function hidetoplink(){
var posi = window.pageYOffset;
if(posi >= 20){
$("#toplink").animate({ opacity: 'show' }, 'slow');
}
if(posi < 20){
$("#toplink").animate({ opacity: 'hide' }, 'slow');
  }
}

function blackscreen(){
	$(".blackscreen").animate({height: 'show', width: 'show', opacity: 'show' }, 'slow');

}
function noblackscreen(){
	$(".blackscreen").animate({height: 'hide', width: 'hide', opacity: 'hide' }, 'slow');

}











        $(document).ready(function(){
 $(".gl_navnews").hover(function(){

				$(".menue_news").animate({ height: 'show', opacity: 'show' }, 'slow');
 
            }, function(){
         $(".menue_news").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            	
            }) 
 });


/*

	    $('.gl_navnews').hover(
	    	$(".blackscreen").animate({height: 'show', width: 'show', opacity: 'show' }, 'slow');
	    
	    
	    );
*/



Sorry falls euch die Farben irritiern, das waren nur Hilfen für mich ;). Wisst ihr was ich da falsch mache:(?
Danke für Hilfe



(Im Annhabg sind nochmal alle Dateien)
 

Anhänge

Ich bin auch noch blutiger Anfaenger in Javascript und JQuery deswegen gibt es garantiert einen viel schoeneren Weg.

Aber schau dir einmal onmouseover und slideToggle() an.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück