Skapa Easy Sliding Hamburger Menyer med jQuery Slidebars Framework

UX-designers bicker över användningen av hamburger menyer i webbdesign. De tjäna ett syfte för mobila användare men också har lägre upptäckbarhet.

Jag kan inte säga om de är värda att använda på din webbplats eller inte, men om du letar efter ett enkelt sätt att skapa en skjutmeny sedan Slidebars Framework är en praktisk resurs.

Slidebars är helt gratis och öppen källkod, byggd ovanpå jQuery-biblioteket. Det fungerar precis som du förväntar dig var du klickar på en hamburgareikon för att öppna en skjutmeny och den trycker på skärmen utanför duken att göra rum.

En egenskap som jag särskilt gillar är Klicka för att gömma inställningen där du kan knacka var som helst på sidan till göm omedelbart menyn. Det här är inte inbyggt i varje skärmmeny-plugin, men det är en funktion som förbättrar användarupplevelsen avsevärt.

Denna plugin är helt öppen och koden är tillgänglig gratis på GitHub om du vill poke runt. Repo saknar emellertid en tydlig uppsättning dokumentation som gör installationen hårdare.

Tack och lov kan du hitta det här på huvudsidan med fullständiga användarguider för att få Slidebars upp och springa snabbt.

Den stöder glidande menyer från alla fyra sidor av skärmen, tillsammans med anpassade funktioner för animeringseffekter, färgval och total bredd / höjd på menyn.

Hela glidmenyn fungerar på ett sida utanför sidan, så du behöver det Ställ in kanvasmenyn ordentligt. Detta inkluderar både korrekt HTML och rätt CSS för styling.

Allt detta beskrivs noggrant i dokumentationen, så om du följer sidorna steg för steg borde du få det att fungera bra. Och standardinställningen kräver inga anpassade egenskaper, så om du bara följer de grundläggande stegen har du inga problem.

Slidebars är verkligen en fullständig ram och det har även en anpassad API du kan arbeta över. Det tillåter dig att ringa jQuery-funktioner att lägga till funktioner eller anpassa standardfunktionalitet. Ett utmärkt val för utvecklare som behöver en glid meny men vill inte skapa en från början.

Om du är nyfiken på att lära dig mer kolla in Slidebars hemsida. Det har bokstavligen allt du behöver veta och massor av demoer att gå runt.