V tem besedilu boste videli, kako lahko ustvarite navigacijski meni v slogu aplikacije, torej enakega videza in oblike, kot jo uporabljajo različne mobilne aplikacije ali npr. kot Instagram kaj uporablja. Takšen meni bomo izdelali na odzivni različici strani za mobilne naprave s pomočjo Elementorja.

Navigacijski meni

Prva stvar, ki jo morate narediti, je, da dodate navaden razdelek. Nato nad naslovom dodajte naslov in ikono ter ju centrirajte. Da bi na mobilniku izgledalo dobro, je treba s predhodnim eksperimentiranjem nastaviti velikost ikone na 25 in naslova na 11, konkretno v tem primeru, ter glede na temo spremeniti barvo, da se bo skladala z ostalo stranjo. Nato prilagodite razdaljo med ikono in besedilom, da ne bo prevelika, to je v razdelku pod možnostjo Prostor za pripomočke (px) v opcijski kodi je treba nastaviti 0 Širina stolpca (%) nastavite 20, če boste imeli 5 elementov menija.

Po tem lahko razdelek kopirate 5-krat ali tolikokrat, kot želite, nato pa samo spremenite ikone in besedilo pod ikono, odvisno od vašega menija. Izberete lahko ikone iz knjižnice ali dodate svoje, lahko se igrate z njimi in meni bi moral na tej točki izgledati takole.

In tam ste ustvarili navigacijski meni, podoben aplikacijam, zdaj ga morate samo spustiti na dno spletnega mesta in popraviti na tem mestu, da se ne premika. Če želite popraviti meni na vrhu strani in ga videti ves čas med listanjem po strani, morate narediti naslednje. Pri nastavitvi odseka vklopite stikalo Učinki drsenja in po izbiri Lepljivo pustite ga vklopljenega samo za mobilne naprave, če je to vaš cilj.

Če želite popraviti navigacijski meni na dnu spletnega mesta, tega ne morete storiti tako, ampak na naslednji način. Dodati morate 2 vrstici kode pod razdelek Custom CSS, ki ga boste videli na spodnji sliki, in preden to storite, morate povečati Z-index na recimo 10, da vaš meni ne izgine. Prav tako je potrebno razdelek razširiti tako, da je meni celotna širina strani, kar dosežemo z vklopom stikala na opciji Postavitev pod imenom Raztegljiv odsek. Kot boste videli na spodnji sliki, se je meni premaknil na dno strani.

Upam, da je bilo to besedilo koristno za vas in da ste izvedeli kaj novega, če vas zanima več nasvetov za samostojno delo, si jih lahko ogledate na naši blog, v primeru, da se želite posvetovati s strokovnjaki, kliknite na tole povezava.

Vir: youtube