|
|||
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> |
Sponsored Links |
|
||||
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? |
Sponsored Links |
|
|||
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |