So erstellen Sie eine Größenänderungsmenüleiste

In letzter Zeit einige Websites, wie Das ist die Brigade und Alles Sie , haben begonnen, ein dynamisches und animiertes Menü zu verwenden, das beim Scrollen nach unten skaliert. Minimierung der Hauptnavigation, um mehr Platz für den Inhalt zu bieten. In diesem Tutorial werde ich erklären, wie Sie dieses Menü selbst mit HTML5, CSS3 und nur ein bisschen jQuery erstellen können.

Diese Art von Menü ist ideal, wenn Sie Ihren Content auf der gesamten Website besonders konzentrieren möchten. Außerdem können Sie so beim ersten Besuch einer Website auf einer Website eine größere und effektivere Navigation erstellen. Sie können Ihre Web site Marke oder Logo besser zeigen, groß für die oben genannte Ansicht; und nachdem der Benutzer an einem Besuch teilnimmt, verbirgt sich eine kleinere und minimierte Version auf subtile Weise, damit sich der Benutzer hauptsächlich auf Ihren Inhalt konzentrieren kann.

Es gibt mehrere Möglichkeiten, dies zu tun. In diesem Tutorial werde ich erklären, wie man eine feste Menüleiste in voller Breite erstellt, die sich in der Höhe mit dem Logo ändert, wodurch eine einfache, minimierte Version des ursprünglichen erstellt wird. Wenn Sie es vorziehen, können Sie das Logo auch durch eine andere Variante Ihres Logos ersetzen, z. B. Initialen oder ein Symbol. Beachten Sie jedoch, dass Konsistenz hier wichtig ist, damit der Benutzer versteht, wie sich das Element verändert hat ist immer noch das Original; Navigieren auf der Website.

Bevor wir anfangen, können Sie Beende die Demo oder Lade die Quelle von hier herunter .

Erstellen der Grundstruktur in HTML

Wir beginnen mit der Erstellung des grundlegenden HTML-Codes, den wir benötigen. Wir bleiben bei einer wirklich einfachen HTML5-Struktur für den Startpunkt.

 How to create a dynamic top bar | Webdesigner Depot

Jetzt, wo unser anfänglicher HTML-Code fertig ist, fügen wir den Code für das Menü sowie einige andere Details auf dem Kopf unserer HTML-Datei hinzu.

  How to create a resizing menu bar | Webdesigner Depot#">  Beiträge
Super Freebies
  Lass uns das Menü klein machen! 
  Ende der Zeile.

In our : Wir haben das Meta-Tag für den Autor hinzugefügt, um den Ersteller der Datei zu identifizieren. Danach haben wir Eric Meyers berühmte reset.css hinzugefügt, die fast jedes Element in Ihrer HTML-Datei zurücksetzt und Ihnen ein saubereres und einfacheres Dokument zur Bearbeitung gibt. Und da wir später jQuery verwenden werden, importieren wir es in der letzten Zeile unseres head-Elements über das jQuery-CDN.

Ich habe die meisten Dateien verknüpft, um das Dokument so einfach wie möglich zu halten, aber bedenken Sie, dass Sie die neuesten Versionen all dieser Dateien herunterladen und lokal in Ihrer HTML-Datei verwenden können, um mögliche Probleme mit der Versionskompatibilität zu vermeiden Änderungen in diesen Dateien in der Zukunft.

In unserer Tag verwendeten wir den Standard HTML5

Element. Unser

wird die volle Breite und wird für die Änderungen zwischen großen und kleinen Versionen des Menüs verantwortlich sein. Wir geben unsere

eine Klasse namens "large", damit wir bestimmte Eigenschaften im CSS ändern können, um unser Menü in die kleinere Version zu verwandeln. Das

ist unser Menü-Container, der unser Website-Logo-Bild und ein einfaches ungeordnetes Listenmenü mit drei Links für unsere Website enthält.

Da wir hier eigentlich keinen Inhalt haben, ist der

wird verwendet, um die Seite zu dehnen, um die Schriftrolle zu erzwingen, so dass wir das Menü sehen können.

Und das ist es über HTML. Von jetzt an müssen wir nur unsere Elemente mit CSS stylen und das Menü dynamisieren.

Styling des Menüs und der Seite

Um diesen Code in einer einzigen Datei zu speichern, erstelle ich das CSS in der Element. Also wird unser gesamtes CSS vor unserem Closing kommen Etikett.

Hier beenden wir unser grundlegendes Header-Styling. Das

dient als unser Menübehälter. Es wird unsere enthalten

Element und wird das Element, wo wir die Hintergrundfarbe, die Menühöhe, Menüverknüpfungen Stile und andere definieren. Es passt sich an die Breite des Bildschirms mit der Eigenschaftsbreite an: 100% und bleibt über die anderen Elemente auf der Website fixiert. Es ist wichtig, dass Sie daran denken, den Z-Index zu setzen, um sicherzustellen, dass dieses Element den Rest der Seite überlappen wird, und position: fixed, um das DIV an der Spitze zu fixieren, so dass es während des Benutzers an derselben Position bleibt scrollt durch die Website. Wie Sie sehen können, setzen wir neben den Stilen für den Header auch einige spezifische Stile für die Klasse "large" mit header.large. Der Anfangszustand unseres Menüs wird groß sein, und deshalb definieren wir hier nur die Stile, die benötigt werden, damit es so aussieht, wie wir es wollen, sobald der Benutzer die Seite betritt.

Dynamisches Ändern der Größe des Menüs

Wir haben unser Menü fertig und gestylt, aber wir wollen es immer noch minimieren. Um diesen anderen Status zu erstellen, erstellen wir eine neue Klasse für die

in der CSS mit dem Namen "klein, das wird verantwortlich sein für die Änderung der Eigenschaften, die wir ändern müssen. Wir haben bereits das größere Menü definiert, also müssen wir jetzt nur unser Menü kürzer machen, unser Bild proportional kleiner machen und das Rand-Top, das wir in unserem verwenden

Elemente müssen ebenfalls reduziert werden, damit sie mit der neuen Menühöhe vertikal zentriert bleiben:

/* Sizes for the smaller menu */header.small{ height: 50px; }header.small img{ width: 287px; height: 69px; margin-top: -10px; }header.small li{ margin-top: 17px; }

Wie Sie sehen können, sind diese Stile fast identisch mit denen des größeren Menüs, wir haben nur die Klasse "groß" in "klein" geändert und die Werte, die wir verwendeten, zu kleineren geändert. Wir verwenden ein negatives Rand-Top auf dem Bild, um es im Container zu zentrieren, da das Bild einen subtilen Schatten hat und höher als die Typografie ist, um es aufzunehmen. Jetzt haben wir alle notwendigen Stile, um das Menü zu ändern, und wenn Sie versuchen, in Ihrem HTML zu ändern

Sie werden im Browser sehen, dass das Menü kleiner wird. Aber wir brauchen das dynamisch.

Ändern unserer Menü-Klasse mit jQuery

Da alle unsere Stile vorhanden sind, müssen wir nur ein wenig JavaScript hinzufügen, um zwischen den Klassen "groß" und "klein" zu wechseln. Da wir dies anhand des Scrollens des Benutzers ändern möchten, verwenden wir die Funktion .scrollTop () in jQuery. Mit dieser Funktion können wir die Position der Bildlaufleiste in Pixeln erhalten oder festlegen. Die Bildlaufposition ist die Anzahl der Pixel, die bereits aus der Browseransicht gescrollt wurden. In diesem Fall müssen wir nur wissen, wie viele Pixel der Benutzer gescrollt hat, damit wir unseren Code auslösen und die Klassen wechseln können:

Dies ist das JavaScript, das benötigt wird, um festzustellen, wann der Benutzer gescrollt hat. Wenn der Benutzer mehr als 100 Pixel gescrollt hat, entfernt er die von uns erstellte Klasse "large" und fügt unsere neue Klasse "small" hinzu. Auf diese Weise ändert sich das Menü in die Dimensionen, die wir zuvor im CSS definiert haben. Versuchen Sie es, jetzt sollte es schon funktionieren, aber Sie könnten es zu hart finden, von einem Zustand zum anderen zu wechseln.

`CSS-Übergänge animieren das Menü`

Um den Wechsel zwischen den Klassen auf unserem Menü zu erleichtern, verwenden wir CSS-Übergänge. Verwenden Sie dieses Codeelement neben dem Rest Ihres CSS.

header,nav, a, img, li{transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari and Chrome */-o-transition: all 1s; /* Opera */}

Hier definieren wir Übergänge für alle CSS-Eigenschaften für die

  ,   und   Elemente, im Grunde alle Elemente, die wir verändern.  Dieser Code animiert die Änderungen zwischen beiden Klassen mit CSS-Übergängen für 1 Sekunde.  Testen Sie es jetzt, das Ergebnis sollte viel glatter sein. 
  Du bist jetzt dran 
  Nachdem Sie nun gesehen haben, wie einfach dieser Effekt erzielt werden kann, können Sie eine eigene Version einer Menüleiste für die Größenänderung erstellen.  Sie können auch kreativer als ich werden und noch mehr Eigenschaften wie Hintergrundfarbe, Textfarbe und sogar Größe und Position des Menüs ändern und sogar mit verschiedenen Arten von CSS-Übergängen testen, aber denken Sie daran, dass Ihre Benutzer mithalten sollten mit den Änderungen im Menü.  Das Menü und das Logo der Website sind in der Regel eines der am besten identifizierbaren und erwarteten Elemente, und wenn Sie es drastisch ändern, können Sie den Benutzer verwirren. Achten Sie also darauf, dass beide Versionen konsistent sind und testen Sie es immer mit einigen Benutzern. 
  Haben Sie ein solches Menü aufgebaut?  Bevorzugen Sie eine andere Technik?  Lassen Sie es uns in den Kommentaren wissen. 
  Ausgewähltes Bild / Vorschaubild,   Akkordeon Bild  über Shutterstock. 


        
                        alles was du menü hast 
                        veränderbares Menü 
                        Größe ändern auf Blättern 
                        Das ist das Brigadenmenü



    
        
            
            ← Über Blogging hinaus: WordPress als Plattform            
            Was ist neu für Designer, März 2013 →


                
                                        
    
         Spätestens 
         Das Beste 
    

    
    
        
            
                          
                
                    
                        4 Spitzentechnologien zur Beschleunigung Ihrer Websites
                    
                
            
                          
                
                    
                        9 Gründe Hand-Coding schlägt immer Site-Builder
                    
                
            
                          
                
                    
                        Zurb startet neue @Mention Engine, Tribute.Js
                    
                
            
                          
                
                    
                        So stellen Sie sicher, dass MailChimp-E-Mails tatsächlich Ihre Nutzer erreichen
                    
                
            
                    
        
            
                              
                    
                        
                            Der ultimative Leitfaden für den Einstieg in Foundation
                        
                    
                
                              
                    
                        
                            Mit dem Rapid Prototyping-Workflow können Sie Websites schnell erstellen
                        
                    
                
                              
                    
                        
                            Erstaunliche animierte Geschichte des iPhone in reinem CSS
                        
                    
                
                              
                    
                        
                            Wie Sie Ihren Code mit Living Style Guides leicht pflegen können