z identyfikatorem "zanikania", który będzie naszą czarną okładką, która przyciemnia zawartość po kliknięciu ikony menu.
Na koniec wywołujemy jQuery z Google'a i nasz własny plik skryptowy, w którym będziemy trochę pracować. Ale najpierw przejdźmy przez style.
Stylizacja za pomocą CSS
Nie będziemy więc przechodzić przez wszystkie style CSS (jeśli chcesz, możesz sprawdzić lub "zobaczyć źródło" na demo), ponieważ są one w większości wykorzystywane do ogólnej stylizacji strony, co nie jest celem tego artykułu. Rozbijemy to i spojrzymy na kilka fragmentów kodu, które są ważne dla efektu. Przede wszystkim:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Będziemy kopać rzeczy, upewniając się, że jeśli przeglądarka użytkownika nie ma dostępnego JavaScriptu (to jest ta nazwa klasy na elemencie HTML, który widzieliśmy wcześniej przy użyciu Modernizr), to pokażemy # fallback-nav w nagłówku, i ukryjemy DIV # i ikonę nawigacji. To jest nasze rozwiązanie awaryjne, więc menu awaryjne musi być stylizowane w bardziej tradycyjny sposób. Ukrywamy też to rozwiązanie, jeśli JavaScript jest dostępny, jak widać w ostatnim wierszu.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Więc w tej sekcji stylizujemy ikonę naszego menu w nagłówku, jest to całkiem proste, wystarczy nadać mu względną pozycję i wysoki indeks z-z (który będzie przydatny później, gdy reszta zawartości zostanie wygaszona, pozostanie włączona Top). Zmieniamy także kolor na biały, gdy ma klasę "otwartą", którą dodamy i odbierzemy za pomocą jQuery. Widać też, że pojedynczy element div z identyfikatorem "zanikania" rozciąga się, aby wypełnić cały ekran i wypełniony jest jednolitą czernią z 50% przezroczystością. Jeśli użytkownik nie ma JavaScript, to czarny filtr zostanie ukryty, jeśli nie, ukryjemy go za pomocą jQuery. Teraz spójrzmy na samo menu:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
A więc ostatnie menu główne. Najpierw muszę dodać, że jest to uproszczony kod, który wymagałby kilku prefiksów sprzed dostawców, zanim będzie kompatybilny z różnymi przeglądarkami. Aby to osiągnąć, polecam używanie niesamowitego narzędzia, takiego jak Autoprefixer aby dodać wszystkie poprawne prefiksy dla ciebie.
Mówiąc to, spójrzmy, co to oznacza: po pierwsze ma ustalone położenie u góry tej strony i ujemne 250 pikseli po prawej stronie. Oznacza to, że jest tam "tylko poza ekranem" (ponieważ ma maksymalną szerokość 250 pikseli). Wysokość również wynosi 100%, dzięki czemu wypełnia całe okno od góry do dołu. Menu wymaga również wskaźnika Z pomiędzy 0 a 9 (powyżej czarnego filtra). Wtedy, gdy magia się dzieje, ma wyświetlacz: flex; Właściwość, a także inna połączona własność "flex-direction" (którą ustawiliśmy tutaj jako "kolumnę" zamiast domyślnego "wiersza", co oznacza, że element potomny elementu flex - linki w menu - wypełni całą wysokość jego rodzic w równych częściach).
Tak więc to wszystko było ukierunkowane na uchwyt menu # main-nav, a następnie, gdy stylizujemy linki, dajemy im wartość 1. To sprawia, że linki wypełniają całą wysokość w równym stopniu. Wtedy te linki mają również własną wartość wyświetlaną "flex", co oznacza, że wpłynie to na wszystkie elementy wewnątrz linków. Upewniamy się, że kierunek flex jest nadal "kolumną", a następnie dodajemy właściwość "justify-content: center;". To sprawia, że tekst sam w środku linków również jest wyśrodkowany w pionie (dlatego w środku są divy ![]()
tagi # main-nav, co nie jest dokładnie semantyczne, ale jest bardzo szybkim i łatwym sposobem pionowego wyśrodkowywania elementów.)
Teraz nie widzimy niczego, co właśnie zrobiliśmy, teraz musimy dodać naszą funkcjonalność z naszym własnym plikiem scripts.js, który wcześniej wywoływaliśmy.
Dodawanie funkcjonalności za pomocą jQuery
Scenariusz tego efektu jest bardzo mały i prosty, ale najpierw opiszę to wszystko, a potem wyjaśnię, co się dzieje:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"przepełnienie": "ukryty"}); $ ("# main-nav"). Animate ({right: "0"}, 400); $ (this) .removeClass ("zamknięty" ) .addClass ("open"). html ("x"); $ ("# fade"). fadeIn (); } else if ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"przepełnienie": "przewiń"}); $ ("# main-nav"). Animate ({right: "-250px"}, 400); $ (this) .removeClass ('otwórz ") .addClass (" zamknięty "). html (" ☰ "); $ (" # fade "). fadeOut (); }});});
Przede wszystkim ukrywamy czarny filtr. Następnie wszystko, co robimy, zostanie zawarte w funkcji dołączonej do zdarzenia kliknięcia powiązanego z linkiem ikony menu. Po kliknięciu mamy dwa różne przypadki lub sytuacje; jeden jest wtedy, gdy menu jest już ukryte (jak stan domyślny) lub gdy menu jest wyświetlane. Więc link ikony menu ma zamkniętą nazwę klasy, która została dodana, a my również styl dla otwartych. Nasze pierwsze "jeśli" to stwierdzenie, że jeśli link jest zamknięty (dlatego domyślnie). Jeśli tak, to całość
element animowany jest 250 pikseli po lewej stronie i zatrzymuje przewijanie strony. Dzielenie # main-nav również jest animowane, zmieniamy jego wartość z -250px na 0. Następnie usuwamy klasę "zamkniętą" z linku i dodajemy jeden z "otwartych" oraz zmiana html ze specjalnego znaku trzech linii na "x". W końcu wyblakujemy w naszym czarnym filtrze, aby cała zawartość była ciemna. I to wszystko! To daje nam otwarty stan menu.
Teraz instrukcja "else if" jest kierowana do klasy otwartej w łączu menu. Kiedy to robi, robimy odwrotność wszystkiego, co robiliśmy wcześniej, przesuwając ciało z powrotem na pozycję, a także ponownie przesuwając menu poza ekranem. Usuwanie klasy "otwartych" z ikony menu, dodawanie "zamkniętych" i zmienianie treści z powrotem do ikony, jak również zaniku naszego diva #fade. Jeśli wszystko pójdzie zgodnie z planem, taka funkcja powinna wyglądać tak:
Wniosek
Więc to mamy! To jeden ze sposobów na uzyskanie tego fajnego efektu, który widzimy coraz więcej dzięki stylowi nowoczesnego projektowania stron internetowych, zwłaszcza w przypadku projektów mobilnych. Ten efekt jest miłym i prostym rozwiązaniem, które nie wymaga żadnych wtyczek i może być w pełni dostosowane do potrzeb każdego projektu. Poza tym była to szansa na skorzystanie z flexboksa i kilku innych przydatnych narzędzi. Daj mi znać w komentarzach, czy jest coś, co zrobiłbyś inaczej, lub tylko to, co myślisz!
Wyróżniony obraz / miniatura, zdjęcie drzwi przesuwnych przez Shutterstock.
