Opprett Easy Sliding Hamburger Menus med jQuery Slidebars Framework
UX designere bicker over bruken av hamburger menyer i webdesign. De tjene en hensikt for mobile brukere men også har lavere oppdagbarhet.
Jeg kan ikke si om de er verdt å bruke på nettstedet ditt eller ikke, men hvis du leter etter en enkel måte å Sett opp en skyvemeny og så Slidebars Framework er en nyttig ressurs.
Slidebars er helt gratis og åpen kildekode, bygget på toppen av jQuery-biblioteket. Det fungerer akkurat som du forventer hvor du klikker på et hamburgerikon for å åpne en skyvemeny og den skyver skjermen uten lerret å gjøre rom.
En funksjon jeg spesielt liker er Trykk for å skjule oppsettet hvor du kan trykke hvor som helst på siden til skjul straks menyen. Dette er ikke bygd inn i hver skyvemeny-plugin, men det er en funksjon som forbedrer brukeropplevelsen sterkt.
Denne plugin er helt åpen og koden er tilgjengelig gratis på GitHub hvis du vil poke rundt. Imidlertid mangler repo et klart sett med dokumentasjon som gjør oppsettet tøffere.
Heldigvis kan du finne dette på hovedstedet med full bruk guider for å få Slidebars opp og kjører raskt.
Den støtter glidende menyer fra alle fire sider av skjermen, sammen med tilpassede funksjoner for animasjonseffekter, fargevalg og total bredde / høyde på menyen.
Hele skyvemenyen Fungerer på et off-side-element, så du må sett opp av lerretmenyen riktig. Dette inkluderer både riktig HTML og riktig CSS for styling.
Alt dette er detaljert grundig i dokumentasjonen, så hvis du følger sidene trinn for trinn, bør du få det til å fungere helt fint. Og standardoppsettet Krever ikke noen egendefinerte egenskaper, så hvis du bare følger de grunnleggende trinnene, har du ingen problemer.
Slidebars er virkelig en fullt rammeverk og det har til og med en tilpasset API du kan jobbe over. Det tillater deg å ring jQuery-funksjoner for å legge til funksjoner eller tilpasse standardfunksjonalitet. Et utmerket valg for utviklere som trenger en glidende meny, men ikke ønsker å lage en fra grunnen.
Hvis du er nysgjerrig på å lære mer, sjekk ut Slidebars nettsiden. Det har bokstavelig talt alt du trenger å vite og mange demoer å gå rundt.
