ShutterPress Design & Code Eine Foto-Portfolio-Site (Tag 3 HTML / CSS)

Heute setzen wir die Tutorial-Reihe für die Erstellung des ShutterPress-Designs fort, indem es mithilfe von HTML und CSS von einer einfachen PSD in eine funktionale Website konvertiert wird. Inzwischen haben wir das anfängliche Design der Website erstellt und die erforderlichen Assets für die Codierung zusammengestellt. Jetzt werden wir es tatsächlich programmieren, damit es in allen gängigen Browsern funktioniert!

Einführung: Tag 3, HTML / CSS-Konvertierung

Heute geht es darum, unser PSD-Design in eine voll funktionsfähige HTML-Site umzuwandeln! Wir führen Sie Schritt für Schritt durch das Markup, bis wir eine Website haben, die auf allen gängigen Browsern gut aussieht. Wir werden uns von einem aus nähern mittlere Wenn Sie also zu schnell an einem der grundlegenden Schritte vorbeikommen, können Sie im Abschnitt „Kommentare“ spezifische Fragen stellen.

Ein besonderer Ruf geht an CodeMyConcept, Der hat den Code und das Tutorial für diesen Tag der Serie in freundlicher Weise zur Verfügung gestellt!

Wenn Sie die letzten zwei Tage dieser Serie verpasst haben, lesen Sie sie hier:

Erster Tag: Design
Tag zwei: Flug vor dem Flug

Ok, mit unseren jetzt klar definierten Zielen beginnen wir!

Schritt 1 Grundlegende Ordnerstruktur und Layout

Zunächst erstellen wir die grundlegende Ordnerstruktur für unser Projekt, die wir auf jeden Fall benötigen, um die Assets gut strukturiert und organisiert zu halten.

In diesem Fall benötigen wir einen "css" -Ordner mit unserer css-Hauptdatei, einem "images" -Ordner und einem "js" (Javascript) -Ordner, sobald der HTML- und CSS-Code abgeschlossen ist, damit wir den Slider "lightbox" hinzufügen können und Akkordeon Plugins. Auch die index.html-Datei im Stammordner

Dann erstellen wir die Basis-HTML-Struktur des Layouts mit den Abschnitten Left und Right. Wir werden ein Wrapper-div verwenden, um alles und unsere Left- und Right-Container innen zu enthalten und zu zentrieren, sowie ein Div am oberen und unteren Rand des Wrappers, um uns mit den abgerundeten Ecken zu helfen und das Layout flexibel zu halten.

    ShutterPress       
   LEFFT-MENÜ HIER 
   RICHTIGER INHALT

Wir bevorzugen es eigentlich, HTML zu erstellen, bevor Sie CSS schreiben, obwohl einige Leute gleichzeitig HTML- und CSS-Abschnitte verwenden und dann zum nächsten Abschnitt übergehen. Wir haben herausgefunden, dass das Durchführen des gesamten HTML-Codes zunächst dazu führt, dass Sie im Voraus an CSS denken und an alles Weitere, z. B. Javascript oder PHP, das benötigt wird. Alles was ich an dieser Stelle hinzufüge, ist mein CSS Reset.

Schritt 2 Linkes Menü HTML

Wir beginnen also mit der Codierung des Menüs auf der linken Seite. Hier benötigen wir ein h1-Tag und einen Link für unser Logo sowie eine ungeordnete Liste für unsere Menüpunkte. Wir müssen auch eine weitere ungeordnete Liste im dritten Tag unseres Untermenüs verschachteln und dasselbe mit einigen Dummy-Elementen im zweiten Tag machen, damit wir unser Javascript-Akkordeon später sehen können.

Außerdem müssen wir den Links und dem Untermenü einige "geöffnete" und "geschlossene" Klassen hinzufügen, damit wir die Symbole und das standardmäßig geöffnete Untermenü sowie die aktive Klasse steuern können, um die gerade angezeigte Seite hervorzuheben.

 ShutterPress
  Zuhause
  Über das Studio  Gegenstand 1
 Punkt 2
 Punkt 3
 
  
  Bildergalerien  4X4 Galerie
 Porträtgalerie
 Slider-Galerie
 
  
 Kontakt

Gleich danach kommen die sozialen Symbole und das Suchfeld in unserem linken Bereich unten. Wir erstellen also ein Container-Div für den unteren Abschnitt und trennen [Divs] für jeden der beiden Teile in diesem Container.

Für die Social-Icons benötigen wir eine Zeitspanne für den Text und eine Liste für die Icons. Jede Klasse enthält eine Klasse, mit der Sie das richtige Symbolbild und den zugehörigen Hover-Status ermitteln können.

Für den Suchbereich erstellen wir ein Formular und divs mit den entsprechenden Eingaben, um sie zu verschieben und Hintergründe und Symbole hinzuzufügen. Wenn Sie dies tun, anstatt die Stile direkt auf die Eingaben anzuwenden, können Sie Cross-Browsing-Probleme mit Zeilenhöhen und Texteinzug vermeiden.

   Sozial:  tumblr
 Picasa
 Vimeo
 flickr
 Twitter
 Facebook
 rss

So sieht es in unserem Browser aus, zusammen mit dem CSS-Reset

Schritt 3 Rechter Inhalts-HTML

Nachdem wir unser linkes Menü abgeschlossen haben, können wir mit dem Codieren des rechten Inhaltsbereichs für die Miniaturbildgalerie beginnen.

Zuerst erstellen wir eine ungeordnete Liste von Bildern innerhalb von Links, damit sie für unser Lightbox-Plugin angeklickt werden können. Anschließend erstellen wir ein Div, das unsere vorherigen und nächsten Schaltflächen enthält.

  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   Vorherige Nächste

An diesem Punkt müssen wir die Miniaturen in Scheiben schneiden und mit ihrem entsprechenden Namen aus dem HTML-Code speichern, damit einige Inline-Bilder angezeigt werden können.

So sollte all unser HTML in Firefox aussehen

Schritt 4 CSS Reset und Wrapper

Für das Styling haben wir nun einige allgemeine Einstellungen für die Schriftarten, Text- und Linkfarben sowie das Hintergrundbild vorgenommen

 / * ------------------------------ * / / * GENERAL RESET * / / * -------- -------------------- * / html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, del, dfn, em, schrift, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, zentrum, dl, dt, dd, ol, ul, li, feldset, formular, beschriftung, legende, tabelle, beschriftung, tbody, tfoot, thead, tr, th, td, hr, button  Marge: 0; Polsterung: 0; Grenze: 0; Umriss: 0; Schriftgröße: 100%; vertikal ausrichten: Grundlinie; Hintergrund: keine;  ol, ul list-style: none; h1, h2, h3, h4, h5, h6, li Zeilenhöhe: 100%; blockquote, q Anführungszeichen: none; q: vor, q: nach content: "; table border-collapse: collapse; border-spacing: 0; Eingabe, Textbereich, select font: 11px Arial, Helvetica, Sans-Serif; vertical-align: middle; Abstand: 0; Rand: 0; Eingabe: Fokus, Textbereich: Fokus Gliederung: Keine; Form, Feldset Rand-Stil: Keine; HTML, Körper Marge: 0; Abstand: 0; Min. Höhe: 100%; / * - --------------------------------*/ /* ALLGEMEINE EINSTELLUNGEN */ /*-------- ----------------------- * / body height: 100%; Schriftart: 12px / 12px "Lucida Sans", "Lucida Grande", serifenlos ; color: # 000; background: url ('? /images/bg.jpg') repeat #fff; a Textdekoration: keine; Farbe: # 000; a: hover Textdekoration: keine; Farbe : # 0285da;

Dann richten wir die Wrapper-Stile ein, damit wir die Basis unseres Layouts aufbauen können. Zu Beginn beginnen wir damit, die Breite des Wrappers zu definieren und ihn mit einem Rand zu zentrieren: 0 auto;

Für die oberen und unteren Divs, die wir zuvor definiert haben, richten wir Hintergrundbilder und die erforderlichen Bemaßungen ein, um die oberen und unteren abgerundeten Ecken zu erstellen, und für den Wrapper richten wir ein Hintergrundbild ein, das in der Y-Achse wiederholt wird und den Inhalt enthält die Trennlinie zwischen dem linken und dem rechten Inhalt.

Für das Wrapper-Bottom div müssen wir ein clear einrichten: beides; denn sobald ich meine rechten und linken Container schwebe, wird der Wrapper zusammenbrechen. Wir müssen dies verhindern, indem wir die Schwimmer löschen.

 / * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top background: url ("? /images/content-top.jpg") no-repeat scroll center top #FFFFFF; Höhe: 18px; Breite: 994px;  #wrapper width: 994px; Überlauf versteckt; Marge: 64px Auto 0; Hintergrund: URL ("? /images/content-bg.jpg") repeat-y Bildlaufmittelpunkt #FFFFFF;  # wrapper-bottom background: url ("? /images/content-bottom.jpg") no-repeat scroll center top #FFFFFF; Höhe: 61px; Breite: 994px; Lösche beide;

Hier ist das Ergebnis in unserem Browser:

Schritt 5 Left Menu CSS

Nun, da wir unseren Wrapper bereit haben, können wir mit dem Inhalt fortfahren: Zuerst stellen wir die Breite des rechten und des linken Containers ein, damit wir sie in die richtige Position bringen können.

 / * -------------------------- * / / * LINKSMENÜ * / / * ------------ ------------ * / / * Hauptmenü * / #left width: 235px; Schwimmer: links;  / * ------------------------------ * / / * RECHTSINHALT * / / * ------- --------------------- * / / * Thumbnail-Galerie-Inhalt * / #right width: 758px; schweben rechts;

Jetzt beginnen wir mit der Gestaltung der Navigation, indem wir ein Sprite-Bild für das Logo, die Schaltflächen und Symbole des Designs erstellen.

Dieses spezielle Layout scheint nicht in der Höhe zu wachsen, aber wir möchten die Dinge trotzdem flexibel halten, nur für den Fall, dass in Zukunft mehr Elemente in die Navigation eingefügt werden müssen.

Wir richten den Left-Container mit einer minimalen Höhe ein, damit der Left-Bottom-Div absolut positioniert werden kann, ohne einen großen Rand zum Herunterdrücken verwenden zu müssen. Auf diese Weise bleiben beim Hinzufügen neuer Elemente die ursprünglichen Abmessungen des Layouts erhalten.

Wir haben auch die Links in der Navigation so eingerichtet, dass sie als Blöcke angezeigt werden, sodass der gesamte Bereich anklickbar ist und nicht nur der Text. Außerdem können Sie die offenen und geschlossenen Hintergründe mithilfe der entsprechenden Klassen hinzufügen und die Position unseres Sprites anpassen.

Das Untermenü mit der Klasse 'closed' ist so eingestellt, dass es angezeigt wird: none; daher wird nur der Standard angezeigt.

 / * -------------------------- * / / * LINKSMENÜ * / / * ------------ ------------ * / / * Hauptmenü * / #left width: 235px; Schwimmer: links; min-Höhe: 615px; Position: relativ;  #left .logo a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; Bildschirmsperre; Höhe: 32px; Marge: 8px Auto 0; Text-Gedankenstrich: -999999px; Breite: 190px;  #left .menu width: 100%; Border-Top: 1px fest #eaeaea; Rand oben: 30px;  #left .menu li a display: block; Höhe: 35px; Zeilenhöhe: 35px; Polsterung links: 22px; Rahmen unten: 1px fest #eaeaea;  #left .menu li a.active color: # 0285DA; Rahmen rechts: 1px fest #fff;  #left .menu li a.closed background: url ("? /images/sprite.png") no-repeat scroll 46px -231px transparent;  #left .menu li a.opened background: URL ("? /images/sprite.png") no-repeat scroll 46px -257px transparent;  #left .menu li .sub-menü a padding-left: 38px;  #left .menu .sub-menu.closed display: none;  # left-bottom position: absolut; unten: 0; Breite: 100%;

Für die unteren sozialen Symbole richten wir die Bilder mit der jeweiligen Klassifizierung und die Hintergrundbilder mit Positionen ein. Dies gilt auch für den Hover-Status.

 / * Social * / # left-bottom .social overflow: hidden; Höhe: 34px; Border-Top: 1px fest #eaeaea; Rahmen unten: 1px fest #eaeaea; Polsterung links: 25px;  # left-bottom .social span float: left; Zeilenhöhe: 34px;  # left-bottom .social ul float: left; Marge: 9px 0 0 10px;  # left-bottom .social ul li float: left; Höhe: 34px;  # left-bottom .social ul li a background: url ("? /images/sprite.png") no-repeat scroll -5px -50px transparent; Bildschirmsperre; Höhe: 16px; Breite: 16px; Marge: 0 5px 0 0; Text-Gedankenstrich: -999999px;  # left-bottom .social ul li a: hover hintergrundposition: -5px -80px;  # left-bottom .social ul li a.picasa background-position: -26px -50px;  # left-bottom .social ul li a.picasa: hover Hintergrundposition: -26px -80px;  # left-bottom .social ul li a.vimeo background-position: -47px -50px;  # left-bottom .social ul li a.vimeo: hover Hintergrundposition: -47px -80px;

Und für den Suchteil verschieben wir im Wesentlichen die Eingabebehälter-Divs und setzen die Syles auf sie anstatt auf die Eingabe.

 / * Search * / # left-bottom .search overflow: hidden; Rand oben: 12px;  # left-bottom .search .left background: url ("? /images/sprite.png") no-repeat scroll -5px -203px transparent; Schwimmer: links; Höhe: 27px; Rand links: 20px; Auffüllen: 6px 0 0 10px; Breite: 158px;  # left-bottom .search .left input border: none; Hintergrund: transparent; Breite: 100%;  # left-bottom .search .right background: url ("? /images/sprite.png") no-repeat scroll -173px -203px transparent; Schwimmer: links; Höhe: 27px;  # left-bottom .search .rere Eingabe Hintergrund: keine Wiederholung Blättern 0 0 transparent; Grenze: mittel keine; Cursor: Zeiger; Höhe: 27px; Breite: 27px;

Also hier ist was wir gerade in Firefox haben

Schritt 6 Right Content CSS

Hier verschieben wir nur die Listenelemente, um eine Rasteranzeige zu erhalten. Wir fügen Auffüllung, Hintergrundfarbe und Ränder hinzu, um einen Rahmen für jedes Miniaturbild zu erhalten und Ränder für die Trennung hinzuzufügen.

Endlich. Wir haben unsere Buttons mit einem zentrierten Container div und beide Links sind schwebend.

 / * ------------------------------ * / / * RECHTSINHALT * / / * -------- -------------------- * / / * Inhalt der Thumbnail-Galerie * / #right width: 758px; schweben rechts;  #right .thumbnails overflow: hidden; Auffüllen: 10px 0 0 32px;  #right .thumbnails li float: left; Marge: 0 21px 18px 0;  #right .thumbnails li a border: 1px solid #eaeaea; Polsterung: 2px; Hintergrund: # f2f2f2; Bildschirmsperre;  #right .navigation margin: -10px auto 0; Überlauf versteckt; Breite: 50px;  #right .navigation a background: url ("? /images/sprite.png") no-repeat scroll 0 0 transparent; Bildschirmsperre; Schwimmer: links; Höhe: 21px; Text-Gedankenstrich: -999999px; Breite: 21px;  #right .navigation .prev Hintergrundposition: -159px -75px; Marge: 0 8px 0 0;  #right .navigation .next Hintergrundposition: -186px -75px;

Hier war unsere erste Seite in Firefox!

Schritt 7 Zweite Seite HTML

Um auf unsere Unterseite zu gelangen, duplizieren wir unsere index.html und nennen sie so etwas wie subpage.html oder inner.html. Dann nehmen wir den gesamten Inhalt unseres #Right-Containers heraus und beginnen, die für unsere Slider-Galerie benötigte HTML-Datei zu erstellen und die 3 Module unten.

Wir benötigen ein div, um das gesamte Markup für meine Diashow zu speichern, eine Liste von Bildern, die als Folien verwendet werden, und wir werden auch drei verschiedene Versionen der Bilder verwenden, so dass wir später etwas mit dem jQuery Cycle-Plugin sehen können.

Wir setzen auch ein leeres div, das absolut auf den Bildern positioniert wird, um als Rahmen zu dienen, falls dieses Layout jemals in ein CMS implementiert werden muss, um dynamischen Inhalt zu erhalten. In diesem Fall können wir einfach jedes Bild hinzufügen, ohne die abgerundeten Ecken und Schatten vorher bearbeiten zu müssen.

Und schließlich müssen wir für die Diashow ein Navigationsdiv mit einigen Links für unsere "Vorherige" und "Nächste" Galerie-Navigation erstellen.

   
 
 
 
  
  Vorherige Nächste

Unser letzter Inhaltsblock enthält unsere 3 Module in einem eigenen Container. Jedes Modul ist ein div für sich, das ich schweben werde, sodass sie nebeneinander liegen. Ich habe innen und h2 Tag für den Titel und einen Absatz für den Text.

   Modul eins
 Am Abend Vestibulum auctor sitzen. Cras rhoncus diam und sem gravida sagittis. Ut zeit sapien in neque ultrices varius. Lorem ipsum Text.
 
  Modul zwei
 Pellentesque Lacinia, Aug Vel Velenen Commodo, Ante neque tempor augue, Semper Rhoncus Diam Justo in Ante. Aliquam in ultrices bester libero, in Sitzen amen Consectetur Velit Quis.
 
  Modul drei
 Suspendisse porta sem vel enim belästigung suscipit elementum leo porta. Cras Lorem Lectus, Viverra sitzen in Semper Quis, Fahrzeug Quis Velit.

Schritt 8 Zweite Seite CSS

In diesem speziellen Design war es ein bisschen schwierig, den Rahmen für die Folien zu erhalten. Deshalb haben wir Folgendes getan:

Wir haben die Ebene "Shape 90" genommen und die Füllung auf 0% reduziert. Klicken Sie dann mit der rechten Maustaste auf die Ebene "1720729_high", wählen Sie die Freigabemaskenmaske aus und verbergen Sie die Ebene.

Zurück zur Ebene "Shape 90" und legen Sie die Deckkraft auf 50% fest. Mit der rechten Maustaste auf die Ebene geklickt und ein Duplikat erstellt, beide "Shape 90" -Layer ausgewählt und zusammengefügt.

Jetzt können Sie den Rahmen als separate transparente .png-Datei speichern und in den Ecken einfach weißen Hintergrund hinzufügen, damit die Bilder auf der Rückseite bedeckt werden.

Wir haben die Abmessungen für die Module festgelegt und sie geschwommen, um sie inline zu erhalten. Danach legen wir die Stile zusammen mit dem Sprite als Hintergrundbild für die Symbole fest.

Wir setzen die Listenelemente aus dem Schieberegler auf eine Position: absolut; In Bezug auf die ul, so dass sie zusammenfallen und wie ein Bild aussehen, damit wir das Layout des Layouts richtig sehen können, werden wir die Funktionalität hinzufügen, sobald das Ganze fertig ist.

Die Schaltflächen "Vorherige" und "Nächste" sind ebenfalls absolut positioniert.

 / * Inhalt der Diashow-Galerie * / # Galerieinhaber position: relative; Breite: 719px; Marge: 20px Auto 0; Höhe: 442px;  # gallery-holder .slideshow-frame background: url ("? /images/slideshow-frame.png") no-repeat scroll 0 0 transparent; Höhe: 442px; Position: absolut; oben: 0; links: 0; Breite: 719px; z-Index: 10;  # gallery-holder .slideshow li height: 442px; Position: absolut; oben: 0; Breite: 719px # Galeriehalter .navigation a height: 92px; links: 0; Rand oben: -44px; Position: absolut; Spitze: 50%; Breite: 47px; z-Index: 15;  # gallery-holder .navigation a.prev background-position: -6px -103px; Rand oben: -44px;  # gallery-holder .navigation a.next background-position: -65px -103px; links: auto; rechts: 0;  # modules-holder overflow: versteckt; Rand oben: 24px; Rand links: 20px;  # modules-holder .module float: left; Breite: 204px; Rand rechts: 40px;  # modules-holder .module h2 font-size: 18px; Schriftgewicht: normal; Rand unten: 5px; Polsterung links: 25px;  # modules-holder .module h2.module-one background: url ("? /images/sprite.png") no-repeat scroll -128px -170px transparent;  # modules-holder .module h2.module-two background: url ("? /images/sprite.png") no-repeat scroll -128px -140px transparent;  # modules-holder .module h2.module-three background: url ("? /images/sprite.png") no-repeat scroll -128px -110px transparent;  # module-holder .module p color: # 6a6a6a; Zeilenhöhe: 15px;

Nach all dem können wir sehen, dass die Modultitel eine Museo-Schrift haben, die keine web-sichere Schrift ist. Daher müssen wir diese mit @ font-face einrichten. Also haben wir die Schrift durch Font Squirrel (http://www.fontsquirrel.com/fontface/generator) laufen lassen, die Schriftarten in einem eigenen Zeichensatzordner im Stammverzeichnis unseres Projekts abgelegt und die CSS in unseren allgemeinen Einstellungen mithilfe der rechten Seite eingerichtet Pfade für die Schriftarten.

 /*---------------------------------*/ /* ALLGEMEINE EINSTELLUNGEN */ /*----- -------------------------- * / body height: 100%; Schrift: 12px / 12px "Lucida Sans", "Lucida Grande", serifenlos; Farbe: # 000; Hintergrund: URL ('? /images/bg.jpg') repeat #fff;  eine Textdekoration: keine; color: # 000; a: hover Textdekoration: keine; color: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') format ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') Format ('woff.) '), URL ('? /fonts/museo700-regular-webfont.ttf ') Format (' Truetyp '), URL ('? /fonts/museo700-regular-webfont.svg#Museo700 ') Format (' svg ') ; Schriftgewicht: normal; font-style: normal;

Jetzt müssen wir nur noch die Schriftfamilie auf unsere h2-Tags setzen und jetzt ist unsere zweite Seite fertig.

 # module-holder .module h2 font-family: 'Museo700'; Schriftgröße: 18px; Schriftgewicht: normal; Rand unten: 5px; Polsterung links: 25px;

Schritt 9 jQuery Magic

Um dem Projekt nun einige Funktionen und Animationen hinzuzufügen, werden wir zwei Plugins verwenden: jQuery Cycle für unsere Diashow (http://jquery.malsup.com/cycle/) und prettyPhoto für unsere Lightbox-Galerie (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) und dann erstellen wir eine benutzerdefinierte Funktion für unser Menü-Akkordeon.

Stellen Sie sicher, dass Sie das prettyPhoto-Plugin herunterladen und die erforderlichen Assets in die entsprechenden Ordner kopieren (Javascript im Ordner "js", Stylesheets im Ordner "css" usw.). Das Zyklus-Plugin kann über Github und jQuery verknüpft werden von Google APIs.

Wir erstellen auch eine main.js-Datei in unserem JS-Ordner, in der wir unsere benutzerdefinierte Funktion und Plugin-Konfiguration ablegen können.

Wir verweisen also auf unser Stylesheet im Header der HTML-Dateien

    ShutterPress

Wir verweisen auch auf unsere Javascript-Dateien am unteren Rand unseres Dokuments kurz vor dem schließenden HTML-Tag.

Nun kehren wir zu unserer Miniaturbildliste zurück und richten die Links mit dem rel-Attribut für unsere Lightbox-Galerie ein. Wir haben auch die Links, die auf ein 500 x 500 großes Platzhalterbild zeigen, damit wir etwas auf unserer Lightbox anzeigen können

Zum Schluss gehen wir zu unserer main.js-Datei und beginnen mit der Konfiguration unserer Plugins. Stellen Sie sicher, dass Sie die Dokumentation der Plugins lesen, damit Sie genau herausfinden können, wie sie funktionieren und welche Möglichkeiten Sie haben, um sie anzupassen.

Für unser Akkordeon müssen wir eine Klick-Funktion einrichten, die überprüft, ob der Link eine Klasse von "geöffnet" oder "geschlossen" hat. Wenn es "geschlossen" ist, wird das entsprechende Untermenü geöffnet, alle anderen werden reduziert und die Klasse der Verknüpfungen wird so geändert, dass das rechte Symbol angezeigt wird. Wenn die angeklickte Klasse eine Klasse "open" hat, wird sie einfach geschlossen und das Symbol geändert.

 $ (document) .ready (function () // prettyPhoto LIGHTBOX $ ("a [rel ^ = 'prettyPhoto']"). prettyPhoto (); // MENU ACCORDION $ ('# left .menu li a'). click (function () if ($ (this) .hasClass ('closed')) $ (this) .toggleClass ('closed closed'); $ (this) .parent (). siblings (). find (' .Untermenü '). slideUp (); $ (this) .parent (). siblings (). find (' a.opened '). toggleClass (' closed closed '); $ (this) .next (). slideDown (); return false; else if ($ (this) .hasClass ('closed')) $ (this) .toggleClass ('closed closed'); $ (this) .next (). slideUp (); return false;) // SLIDER GALLERY $ ('. slideshow'). cycle (fx: 'fade') weiter: '# gallery-holder .navigation a.next', prev: '# gallery-holder .navigation a.prev '););

Ende von Tag 3: Rückblick

Und jetzt haben wir ein 100% fertiges Projekt mit Arbeitsgalerien und Untermenüanimationen. Genießen!

Am letzten Tag unserer Tutorialserie zeigen wir Ihnen, wie Sie mit Hilfe einiger schneller Änderungen Ihre eigenen benutzerdefinierten Variationen dieser Vorlage erstellen. Von dunklen, grungigen Styles bis hin zu modernen Metallic-Effekten möchten Sie den letzten Tag nicht verpassen!

Oh! Wir haben dies am ersten Tag des Tutorials erwähnt, aber wenn Sie daran interessiert sind, eine WordPress-Version dieser Vorlage bei ThemeForest verfügbar zu machen, lassen Sie es mich im Kommentarbereich wissen!

Coding Credits

Das Coding und das Tutorial für diese Phase der Serie wurden alle von CodeMyConcept bereitgestellt, das eine Vielzahl von Codierungsservices für Designer bietet - von PSD> HTML-Konvertierungen über E-Mail-Vorlagen und WordPress-Theme-Konvertierungen. Schauen Sie sich ihre Website an CodeMyConcept.com!

Web-Design