Kontynuując przykłady różnych elementów interfejsu użytkownika, które można wykonać bez JavaScriptu, dzisiaj opiszę, jak stworzyć wysuwane menu przy użyciu czystego CSS.
Kreatywni ludzie mają tu dużą swobodę, ale głównymi parametrami są szerokość i lewa strona. Muszą mieć tę samą wartość, ale lewa jest ujemna. W ten sposób ukrywamy nasze menu po lewej stronie ekranu. Dodałem także animację przejścia: lewe .2s, aby upiększyć proces wychodzenia z ekranu.
Możesz także zaprojektować go według własnego uznania. Zrobiłem prosty szary przycisk z białymi paskami w lewym górnym rogu. Tutaj dodałem także animacje samego przycisku i pasków (tylko dla urody).
Selektory CSS3 pozwalają nam określić stan checkboxa i zastosować w zależności od tego określone właściwości dla sąsiadujących elementów: zaznaczone ~ . W tym przykładzie przy „zaznaczonym” wejściu przesuwamy przycisk menu.hidden-menu-ticker:checked ~ .btn-menu w lewo o 160 pikseli, menu do lewej krawędzi.hidden-menu-ticker:checked ~ .ukryte-menu . Pozostałe style są napisane dla pasków przycisku menu, tak aby po naciśnięciu zamieniały się w krzyżyk i odwrotnie.
W tej chwili za pomocą jQuery możesz zrobić na stronie internetowej wszystko, musisz tylko zdecydować, czy Twoja witryna tego potrzebuje. Wszyscy dokładamy wszelkich starań, aby serwis był jak najbardziej przyjazny dla użytkownika, tak aby poruszanie się po serwisie było dla niego przyjemne i możliwie proste. Menu odgrywa dużą rolę, gdy użytkownik „przechadza się” po Twojej witrynie. W tym samouczku utworzymy przesuwane menu, które można ukryć i wyświetlić, gdy użytkownik tego potrzebuje.
Również ciekawe przesuwane menu:
Przykład można zobaczyć tutaj:
Pobierać
W tym samouczku użyjemy wtyczki jQuery - „jQuery.mmenu.js”. Można go pobrać z linku - pobierz.
Nieco nad menu wstawimy przełącznik, dzięki któremu użytkownik będzie mógł je otworzyć/zamknąć:
Skończyliśmy ze strukturą HTML, teraz przejdźmy do stylów.
Jak Menu nawigacji na stronie, menu profilu użytkownika itp. można ukryć i pojawią się po kliknięciu i najechaniu myszką. Niektórzy mogą powiedzieć, że wpływa to na użyteczność strony. Myślę, że nie, bo strona staje się czystsza, co oznacza, że łatwiej się po niej poruszać. Człowiek nie gubi się w górze linków. Dziś przygotowałam kolekcję panele ślizgowe, które domyślnie są ukryte na stronie. Zadzwonić menu, musisz kliknąć lub najechać kursorem na odpowiednią ikonę. Technika ta zawitała do projektowania stron internetowych z aplikacji mobilnych, gdzie nie da się rozmieścić wielu elementów na jednym ekranie. Z biegiem czasu takie panele przeniosły się na strony internetowe. Kolekcja ta przyda się przede wszystkim programistom mobilnym. Przy niskiej rozdzielczości ekranu wyświetli się następujący komunikat. nawigacja wychodząca, a na normalnych, dużych monitorach możesz stworzyć zwykłe menu, do którego wszyscy są przyzwyczajeni. W ten sposób osoba posiadająca urządzenie mobilne nie będzie się zagubić w Twojej witrynie, ponieważ od dawna jest przyzwyczajona do korzystania z niej panele ślizgowe, bo wszystkie aplikacje na jego smartfonie działają na tej samej zasadzie. Pragnę zauważyć, że w tej kolekcji znajdują się wtyczki, które są ostrzone tylko do witryny mobilne a na szerokich monitorach ich użycie będzie niewłaściwe. Chociaż istnieją również panele uniwersalne, które nadają się do każdej strony internetowej. Obejrzyj demo i wybierz to, co odpowiada Twoim potrzebom. Panele rozwijane działają na . Zaimplementowanie takiego menu na Twojej stronie nie będzie trudne, a strony programistów zawierają szczegółowe instrukcje dotyczące korzystania z ich produktu. Wkrótce planujemy przeprojektowanie strony internetowej Postovoy i skorzystamy z jednego z nich wtyczki jquery które przedstawiono poniżej. Więc. Zwracamy uwagę na kolekcję 20 wtyczek do rozwijanego panelu slajdów jquery dla Twojej witryny. Nie zapomnij zostawić komentarzy.
Przesuwane menu boczne
Ładne przesuwane menu nawigacyjne w jquery w formie slide panelu. Idealny zarówno dla witryny mobilnej, jak i zwykłej.
Przejścia dla nawigacji poza płótnem
Niezwykle potężna wtyczka, która pozwala zorganizować panel slajdów, który będzie wyświetlany z różnymi efektami animacji, w tym 3D. Wtyczka zawiera 14 efektów animacji.
jPanelMenu
Panel nawigacyjny zaprojektowano w stylu aplikacji iOS. Łatwe i szybkie menu, które ułatwi rozwój witryny mobilnej.
Odtwórz menu Google Nexus
Wysuwany panel wykonany jest analogicznie do menu Google Nexus.
bigSlide - pasek nawigacji slajdów w Jquery
Panel slajdów nadaje się zarówno do witryny mobilnej, jak i zwykłej. Aby to wywołać, należy kliknąć ikonę przedstawiającą trzy paski.
Wielopoziomowe menu push
Wtyczka Jqutry działa podobnie do bigSlide. Panel wywoływany jest po kliknięciu na ikonę. Zaletą tego menu jest to, że obsługuje strukturę wielopoziomową.
Menu głównego pudełka
Bardzo piękny suwak nawigacji z efektem 3D.
Animowane menu obramowania
Kliknięcie znaku plusa w rogu ekranu powoduje wyświetlenie małego paska bocznego z ikonami. Aby go ukryć, należy kliknąć ikonę z symbolem „-”.
Snap.js
Panel przesuwny przeznaczony jest dla urządzeń mobilnych. Menu wywołuje się poprzez przeciągnięcie ekranu kursorem myszy lub palcem w przypadku urządzenia mobilnego.
Menu przesuwane i naciskane
|
Meny
Wtyczka Jquery, która pozwala zaimplementować na Twojej stronie fajny pasek nawigacji z efektem 3D.
mb.jquery
W przeciwieństwie do innych paneli, pojawia się on na górze ekranu, zamiast go przesuwać. Możesz umieścić w bloku dowolny kod HTML, tekst lub cokolwiek chcesz.
Stacja dokująca Androida
Panel przeznaczony jest dla witryn mobilnych i znajduje się w dolnej części ekranu. Po kliknięciu pojawiają się ikony, w których można umieścić dowolne linki.
Przesuń panel z zawartością
Fajny panel przesuwny jest zaprojektowany na dwóch poziomach. Pierwszym z nich jest menu. Drugie to treść. Teraz ten efekt jest bardzo popularny wśród projektantów i twórców stron internetowych. Można znaleźć wiele zastosowań. Poczta Microsoftu działa na podobnej zasadzie.
Nie znalazłeś odpowiedzi na swoje pytanie? Spójrz tutaj
Tworzenie przesuwanego menu bocznego przy użyciu czystego CSS
Zaktualizuj framework do najnowszej wersji
Losowa poczta. Generator adresów e-mail. Opcja Gmaila umożliwiająca utworzenie tymczasowego adresu e-mail