zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden anmiertes Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.12.2013, 07:11
GN GN ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.11.2004
Beiträge: 182
GN befindet sich auf einem aufstrebenden Ast
Standard anmiertes Menü

Hallo,

ich möchte gern eine Navigation erstellen die animiert werden soll.
Die Menüpunkte sollen "im" Button verschwinden und von dort aus auch wieder eingeblendet werden. So wie ich es jetzt habe schießt die Sachen etwas über das Ziel und beim einblenden summiert sich das irgendwie hoch

HTML-Code:
<style>
	* { margin: 0; padding: 0; }
	body { position: relative; }
	nav { background: #efefef; position: absolute; top: 50px; left: 150px; height: 52px; }
	nav ul { list-style: none; }
	nav ul li { float: left; font-size: 1em; line-height: 2em; margin: 10px; padding: 5px 10px; }
	nav ul li input[type="button"] { background: #00cccc; width: 52px; height: 52px; border: 0; }
</style>

	<nav>
		<ul>
			<li><input type="button" value="GO" /></li>
			<li>home</li>
			<li>about</li>
			<li>contact</li>
		</ul>
	</nav>
Code:
<script>
	jQuery(document).ready(function() {
		if (jQuery('body > nav').length) {
			// Breite der Elemente (ohne das Erste) die ausgeblendet werden ermitteln und in Variable speichern
			var menuWidth = jQuery('nav li').filter(':not(:first)').width();
			// bei Seitenaufruf alle Elemente anzeigen und bis auf das Erste alle ausblenden
			jQuery('nav li').filter(':not(:first)').delay(1000).animate({'margin-left': '-100%', opacity: '0', filter:'alpha(opacity=0)'}, 1000, function() {
				// Click-Event Elemente zum ein- bzw. ausblenden
				jQuery('nav li :button').on('click', function() {
					// Elemente die ein- bzw. ausblendet werden in Variable speichern
					var slideMenu = jQuery('nav li').filter(':not(:first)');
					if (slideMenu.css('margin-left') == menuWidth + 'px' && !slideMenu.is(':animated')) {
						slideMenu.animate({'margin-left': '-=' + menuWidth, opacity: '0', filter:'alpha(opacity=0)'});
					} else {
						if (!slideMenu.is(':animated')) {
							slideMenu.animate({'margin-left': '+=' + menuWidth, opacity: '1', filter:'alpha(opacity=100)'});;
						}
					}
				});
			});
		}
	});
</script>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.12.2013, 18:14
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ist heute in meinem RSS-Feed aufgetaucht, sowas in der Art?

Line Menu Icon... That Is A Menu | CSS-Tricks
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.12.2013, 23:12
GN GN ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 21.11.2004
Beiträge: 182
GN befindet sich auf einem aufstrebenden Ast
Standard

Hi Thielo, das Menü hatte ich schon bei CodePen gesehen... ist aber halt nicht so wie ich es bräuchte.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr Ceres82 (X)HTML 3 23.08.2013 22:00
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Vertikale Navigation: IE6 - Whitespace-Bug? b.erry CSS 6 12.02.2009 17:46
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 12:26
Navigation - Menü T.S. CSS 6 18.02.2006 19:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:05 Uhr.