11 menus madauwari a CSS da HTML don bin tsarin ƙirar gidan yanar gizo na yanzu

Muna ci gaba da wani babban jerin menu madauwari duka a cikin CSS kamar yadda yake a HTML don haka zaku iya daidaita su don bukatun gidan yanar gizon ku. Waɗannan menus na madauwari galibi suna ƙoƙari su ba menu na hamburger ɗin salo da rayarwa waɗanda ke kewaye da madauwari; kamar yadda ba zai iya zama in ba haka ba.

Akwai bambance bambancen da kuma cikakke wanda shine iya bayar da mayar da hankali zuwa takamaiman jigo. Motsi da ƙaramin gani na iya ba da sigina ga baƙo don su san cewa muna da kyakkyawar ido don ba da ingancin gidan yanar gizon mu a cikin ƙirar gidan yanar gizo. Bari mu yi shi tare da menus madauwari 11, ba tare da fara hana kanmu haɗawa ba zuwa wani jerin menu na CSS.

Madauwari menu kewayawa

Wannan menu mai kewaya yana samuwa a cikin CSS da HTML, don haka aiwatarwarsa mai sauƙi ne idan ana amfani da ku don aiki tare da lambar. Haifaka da babban tashin hankali da ƙaramin salo wanda ke sanya shi cikin mafi kyau a jerin.

Shawagi madauwari menu

Wannan menu mai zagayawa yana shiga cikin JavaScript, da HTML da CSS. Wani menu tare da jerin raye-raye waɗanda ke sanya shi cikin mafi kyau akan wannan jerin. Na inganci ba tare da wata shakka ba.

Madauwari maɓallin kewayawa

Wannan sandar madauwari an yi wahayi zuwa da Yaren tsara Google da ake kira Design Design. Idan kuna neman wasu daga cikin yaren, ya riga yana ɗaukar lokaci don haɗa shi cikin gidan yanar gizonku.

Madauwari Material menu

Wani menu madauwari don Tsarin Kayan abu da wancan ya fita daga sauran don wannan jerin gumakan da suka bayyana a tsaye. Bugun aiki da cikakken kammalawa; ba dadi bane, amma yayi kyau.

Madauwari menu

Wannan menu an sanye shi da rayayye wanda fadada maɓallin hamburger don nuna bangarori daban-daban da zaku iya zuwa akan gidan yanar gizon inda aka haɗa shi.

Jerin radial a cikin CSS

Wannan menu na radial ana yin sa ne a cikin CSS da HTML. Shin sosai na gani madauwari menu don wannan jerin hotunan wannan yana bayyana yayin danna gunkin hamburger. Ana rarrabe shi da kanta kawai ta wannan bangaren.

Radial menu

Ofaya daga cikin menu masu kirkirar madauwari akan jerin, halin halin a tashin hankali yayi aiki sosai. Ba kwa buƙatar danna don ganin sassan menu daban-daban akan gidan yanar gizon ku.

CSS Gooey Menu

Wannan menu yana yin biyayya ga wannan nau'in tashin hankali ake kira Gooey wanda ke sanya sassa daban-daban gudana daga maɓallin hamburger. Tsarin madauwari daban da sauran a cikin CSS, saboda haka kuna da shi a shirye don haɗa shi cikin gidan yanar gizon. Motsi mai motsa rai da daukar hankali shine ainihin abin da ke sa ya fice daga taron.

Yanayin radial mai rai

Wannan menu mai madaidaici yana da sauki, amma baya rasa rayayyar motsi don zama mai inganci. Yana amfani da JavaScript don rakiyar CSS da HTML. Dannawa mai sauƙi akan gunkin hamburger zai buɗe duk sassan don ku iya kewaya zuwa gare su.

Madauwari popout kewayawa

Wani ɗan gajeren latsawa akan gunkin hamburger yana buɗe sassa daban-daban don faɗaɗa da'irar kuma sami damar latsawa a cikin kowane ɗayan. Idan tana da sakamako mai tasiri idan kun riƙe linzamin kwamfuta akan ɗayansu, don haka ya zama mafi ban sha'awa fiye da na baya, wanda yake ɗan ƙarami mahimmanci.

Juya-juya madauwari menu

Wannan shine ɗayan mafi mahimmanci kuma madaidaitan menu a jerin duka. Shin mai zaman kansa sosai kuma zai tunatar da kai waya na tsofaffin da ya kamata mu juya yatsa don yin kira tare da kowane lambobin. Rawar motsa jiki don menu madauwari wanda yayi fice daga saura a cikin ɗaukar cikin. Haƙiƙa motsi ne wanda yake cimma duk wannan tasirin, don haka idan kuna neman menu mai ban sha'awa da ban sha'awa don takamaiman jigo, kamar cibiyar kira, wannan ya dace da ita.