Wir haben einen guten Anfang beim responsiven Design gemacht. Das Menü bricht bei den kleinsten Bildschirmgrößen in ein 2×4-Raster zusammen. Es passt gut auf den Bildschirm, aber zwischen dem und dem Branding nimmt es sehr viel Platz ein. Wir öffnen es im iOS-Simulator und sehen, dass in einigen Fällen überhaupt kein eigentlicher Inhalt sichtbar ist.
Wir schauen uns einige Ressourcen zur Navigation an, wie den Artikel von Brad Frost Responsive Navigation Patterns und Jason Weavers Off Canvas. Wir schauen uns auch eine coole Demo auf MDN namens Paperfold an.
Wir fügen der Navigation einen zusätzlichen Link hinzu, den wir schließlich „Navigation 'n' Search“ nennen, der als Button zum Anzeigen der mobilen Navigation beim Antippen dient. Über Media Query Breakpoints blenden wir diesen Button nach Bedarf ein und aus.
Das Umschalten der Navigation werden wir hauptsächlich mit JavaScript handhaben. Ein wenig riskant, da es diejenigen auf kleinen Bildschirmen mit deaktiviertem JavaScript verärgert – aber ich mache es trotzdem. Diese Zahl ist so klein (kleiner als Desktop ohne JavaScript, was sicherlich weniger als 1% ist), dass ich einfach ein Idiot bin und damit weitermache.
Alles, was wir mit JavaScript wirklich tun, ist das Umschalten eines Klassennamens. Das ist es, was ich als zustandsgesteuerte CSS-Entwicklung bezeichne. Die gesamte Steuerung, was wann und wie angezeigt wird, wird mit CSS gehandhabt. JavaScript setzt nur eine Klasse, um den aktuellen Zustand zu deklarieren.
Wir verbringen viel Zeit damit, das „Paperfold“-CSS hinzuzufügen, es richtig zum Laufen zu bringen und dann die Suche in eine Lücke zu platzieren, die wir über dem Hauptinhalt durch etwas Padding schaffen.
Schließlich wird die Größe und Position angepasst, um noch besser zu passen, und ein kleiner Schließen-Button wird hinzugefügt. Ich spiele in meinem Kopf mit der Bereitstellung von UI zum Umschalten von Zuständen bei Dingen wie diesen. Einerseits, jetzt wo der Benutzer die Navigation angezeigt hat, warum sollte er sie schließen müssen? Er hat sie bereits gesehen. Wenn er sie nicht benutzen will, kann er einfach daran vorbeiwischen. Andererseits finde ich es ziemlich nervig, wenn ich Zustände bei anderen Apps (aus irgendeinem Grund) nicht so umschalten kann, daher neige ich dazu, einen Mechanismus dafür bereitzustellen.
Hallo Chris,
Ich benutze eine leicht andere Methode, um das Menü ein-/auszublenden.
Mein JavaScript ist
jQuery(document).ready(function($){ /* toggle nav */ $("#menutoggle").on("click", function(){ $("#nav").slideToggle(1000); $(this).toggleClass("active"); }); });Und mein HTML
<div id="navtoggle" class="cf"> <div class="section"> <a href="#" id="menutoggle">Menu</a></div> </div> <div id="nav" class="cf"> <ul class="menu"> <li class="item-102"><a href="/basecamp/index.php/themes" >Themes</a></li><li class="item-103"><a href="/basecamp/index.php/icons" >Icons</a></li><li class="item-104"><a href="/basecamp/index.php/logos" >Logos</a></li><li class="item-105"><a href="/basecamp/index.php/support" >Support</a></li><li class="item-109"><a href="#" >Blog</a></li><li class="item-110"><a href="#" >Contact</a></li></ul> </div>Es funktioniert perfekt, aber nachdem ich den Toggle ausgewählt habe, um das Menü auszublenden, bleibt es ausgeblendet, wenn ich die Größe des Browserfensters ändere! Ich brauche im Grunde, dass der Toggle zurückgesetzt wird, um das Menü anzuzeigen, wenn ich das Browserfenster über den Breakpoint hinaus strecke.
Irgendwelche Vorschläge bitte?
Ich glaube, ich habe eine Lösung mit einer Min-Breiten-Media-Abfrage gefunden und füge hinzu
Ist die Verwendung von !important in Ordnung?
Hallo Chris,
Entschuldigung für die Störung, aber ich bin diesem Video gefolgt, aber irgendwie bekomme ich die Navigation nicht dazu, etwas anzuzeigen, wenn ich darauf klicke. Ich habe alles doppelt überprüft, aber ich kann nichts daraus machen. Würden Sie sich kurz ansehen, was ich habe, und sehen, ob etwas auffällt?
Mein CSS
nav {
background-color: rgb(92,107,127); // Ältere Browser
@include filter-gradient(#5c6b7f, #40536f, vertical); // IE6-8
// IE9 SVG, benötigt bedingte Überschreibung von 'filter' zu 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(92,107,127,1) 0%,rgba(64,83,111,1) 100%));
-webkit-box-shadow: 1px 5px 6px -6px black;
-moz-box-shadow: 1px 5px 6px -6px black;
box-shadow: 1px 5px 6px -6px black;
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;
// Stile für einzelne Links im Menü
a {
display: inline-block;
width: (100%/6);
text-align: center;
padding: 15px 30px 15px 30px;
color: $white;
@include font-stack-mainfont;
font-weight: 700;
font-size: 17px;
border-right: solid 1px #445368;
@include text-shadow(rgba(black, 0.1) 1px 1px 0, rgba(black, 0.1) 1px 1px 0, rgba(black, 0.1) 1px 1px 0);
@include breakpoint(iphone) {
width: (100%/1);
border-bottom: solid 1px #445368;
}
}
.show-hide-navigation {
display: none;
}
@include breakpoint(iphone) {
a:not(.show-hide-navigation) {
display: none;
body.show-nav & {
display: inline-block;
}
}
.show-hide-navigation {
display: inline-block;
width: 100%;
}
Mein JS
$(“#show-hide-navigation”).on(“click”,function() { $(“body”).toggleclass(“show-nav”); });
danke
Auch wenn ich das Element in Chrome inspiziere, wie du es getan hast, klicke ich auf meine Navigation und es kommt ein Fehler
„Uncaught TypeError: Object [object Object] hat keine Methode „toggleclass““
und der Code, der hervorgehoben wird, ist der von Fitvids
Ryan, dein Problem liegt vielleicht daran, wie jQuery geladen wird. Ich hatte ein ähnliches Problem, weil ich Chris Wort für Wort gefolgt bin. Aber weil er CodeKit verwendet und ich nicht, musste ich die Dinge anders machen. In diesem Fall musste Chris das Skript nicht mit dieser Zeile in der index.php-Datei nach der Einführung von global.js einführen. Wenn alles andere fehlschlägt, kannst du immer den IRC-Kanal #jquery aufsuchen. Dort sind sie sehr hilfsbereit.
Es gibt auch ein Problem mit dem $ -Zeichen, also zeige ich dir, was für mich funktioniert. (Eigentlich funktioniert bei mir alles außer dem X-Button, der das Suchfeld schließen und es wieder zum Suchsymbol machen soll. Aber hier ist es trotzdem