Responsywne menu

Responsywne menu

Na stronach oglądanych na małych urządzeniach mobilnych konieczne stało się zastosowanie menu, które zajmuje mało miejsca. Menu takie musi się rozwijać na życzenie oglądającego. Widziałam różne przykłady, np. menu wyjeżdzające z lewej strony po kliknięciu. Jednak utarła się moda na praktyczne menu, które na małym ekranie zajmuje miejsce małego paska z ikonką kreseczek. Po kliknięciu na kreseczki menu się rozwija.

Jednym z wielu przykładów jest SlickNav menu, działające przy uzyciu jquery.

Markup tego menu tworzymy jako zwykłą listę wypunktowaną. Skrypt pozwala na utworzenie menu wielopoziomowego, które w wersji mobilnej rozwija się do dołu.

Menu wymaga dodania arkusza stylów css oraz skryptu jquery do pobrania ze strony http://slicknav.com/.

Menu to jest zrobione w ten sposób, że pojawia się dwa razy na stronie, raz w wersji mobilnej na czarnym pasku i drugi raz jako wersja normalna w postaci listy.  Należy dodać dodatkowe reguły css media query (podane na w.w. stronie), które mają za zadanie ukrycie wersji rwd na dużym ekranie i odwrotnie ukrycie wersji dla dużych ekranów na małym. Na szczęście sam kod menu wklejamy na stronie tylko raz, gdyż widywałam strony, gdzie menu jest umieszczone dwa razy.

Domyślnie menu rwd przykleja się do górnej krawędzi strony czyli do znacznika body. Jeśli chcemy to zmienić i umieścić menu gdzieś w treści strony musimy dodać opcję:

prependTo:’#menu-rozwijalne’

która przyklei menu rwd do dowolnego boksu na stronie. Będzie to przydatne jeśli   górną krawędź strony zajmuje coś innego, np. inne menu.

Jeśli chcemy, żeby przy rozwijaniu lub zwijaniu menu rwd działała jakaś animacja musimy użyć jquery UI – jquery.easing.min.js

Zastosowanie tego menu można obejrzeć na mojej stronie o biżuterii – http://malarstwo.malgorzata-jasklowska.pl/bizuteria.htm#beading

Manu slicknav jest ostylowane tylko dla wersji rwd. Wersja na duży ekran występuje w postaci zwykłej listy wypunktowanej. Aby jakoś wyglądała musimy sami dodać style css.

 

 

 

 

responsive_wp_728x90


Profesjonalny Hosting


5 Comments
Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *