9 CSS mamenyu ane akanyanya kudavirira dhizaini

Mobile CSS menyu

Isu tinoenderera nekumwe kuburitswa kweavo webhu dhizaini ine runyorwa rwakanaka rweCSS menyu ane inoteerera dhizaini. Akateedzana emamenu eCSS akatsaurirwa chete kune iyo fomati iyo isingawanzo kupfuura 768 inches uye iyo inotibvumidza isu kuti yedu webhusaiti igadzirire vashanyi kuti vapinde kubva kune yavo smartphone.

Ichokwadi ndechekuti yega yemamenyu e9 CSS ane nharembozha yaunowana pazasi ivo vane runako rukuru uye ivo vakapakata nhevedzano yemifananidzo uye dhizaini yemhando yepamusoro uye ruzivo. Usapotsa kana dzino dzakateedzana dzemamiririri akatenderera ane iwo akasarudzika chimiro kuratidza zvikamu zvakasiyana zvewebsite yedu.

Nyore mbozha menyu

Mobile menyu

Menyu yakapusa yefoni yezvakasikwa izvo zvinotitora isu zvakananga kune yazvino chiyero chewebhu dhizaini yemafoni nhare. Iyo yakazara inoteerera menyu uchishandisa Bootstrap 3.x, FontAwesome, CSS flexbox uye CSS BEM Syntax. Menyu yakapusa yakanyatsogadzirwa uye zvichienderana nekureruka kwayo kwekuyemurwa.

Magical mobile mega menyu

Magical mobile menyu

Mega mamenu anotibvumidza isu kuwedzera makoramu, majeti uye zvese izvo zvakateedzana zvezvinhu zvinodiwa kuti yakananga traffic kune yedu saiti Webhu. Iyi inoteerera yepadivi menyu yeiyo smartphone yakapusa uye iwe unowana ese mativi nzvimbo chete iyo nzvimbo iyo yaanoshandisa nenzira.

Navigation yekushandisa

Navigation yekushandisa

Tiri kutarisana nemenyu inopindura iyo yakawanda yepfungwa. Kana iwe uchitsvaga chimwe chinhu zvakasiyana neyazvino chiyero Mumamenyu ekufambisa, iyi menyu inogona kunyatso kukodzera. Kubva pane hamburger icon iwe unogona kuwedzera akateedzana ematebhu aunogona kuwana nawo ese mapeji ewebhusaiti.

Nharembozha yekufambisa mifananidzo

Mifananidzo nhare

Iyi menyu inoteerera inosiyana kubva kune yakasara neimwe inopfuura yakanaka shanduko yemifananidzo sezvo isu tinodzvanya pane hamburger menyu ine diagonal dhizaini. Izvo zvinodhura zvakare yeanopopota mune hover sarudza kuti iwedzere kuwedzera simba. Shandisa iyo GSAP TweenMax uye TimelineMax mifananidzo.

SVG UI yekufambisa pfungwa

Kufambisa pfungwa

SVG uye CSS3 mifananidzo yeiyo chaiyo chaiyo menyu iyo inokutora iwe kuenda kune yakasarudzika shanduko uye inomira kunze kwemamwe mamenyu anoteerera pane ino runyorwa. Zvakare inozivikanwa kune yayo Ruvara rukuru uye nemhedzisiro huru kuti inogona kupa kune yako webhu nzvimbo kana ichionekwa kubva kune mbozhanhare senge piritsi.

Tsanangudzo info uye kufamba

Details info

Yakanyanya kufanana neiyo yapfuura mukugadzirwa uye kushandiswa kwemavara, zvirinani mukuumbwa kwekutanga, asi ino nguva inosiyana ne inopindura denderedzwa menyu iyo iri parutivi rwechidzitiro. Mifananidzo yacho inotsvedzerera uye ndeimwe menyu inoteerera ine bata rakanyanya kuti webhusaiti yedu ibude panharembozha kana piritsi.

Nhare Gooey yekufambisa

Googey

Iyi i «Gooey» mhedzisiro yakanyatso shandiswa kune mobile-style menyu iyo inovimba neCSS uye jQuery shanduko yemifananidzo. Izvo ndezve akateedzana mabhatani anovhura kana iwe ukabaya pane hamburger icon yatinayo pakati chaipo pezasi chikamu cheiyo skrini. Imwe yeaya ane gimmicky anoteerera mamenu ayo achiri achiripo kwazvo.

Frosty Nav «Toggle» maitiro

frosty nav

Iyi menyu inoteerera inoedza kuisa a inotsvedzerera kuchangamuka chete patinodzvanya bhatani hamburger. Mhedzisiro yainoita ndeyekusajeka kuitira kuti kumashure kwechidzitiro kuve kwakasviba uye isu tinokwanisa zviri nani kusiyanisa yega yega yezvikamu kuburikidza nevashanyi vewebhusaiti yedu. Tine mimwe yakapfava yeanopisa kune yega yega yezvikamu pasina yakawanda fanfare, asi nemhedzisiro huru.

Mobile Menyu

Mobile CSS menyu

Isu tapedza iyi nhevedzano ye nhare dzinoteerera mamenyu nemumwe wemhando yepamusoro. Pasina kutanga kukanganwa kuti iwe unogona kupfuura nemimwe nhevedzano yemamenyu kusiyanisa webhusaiti yako, idzi chete mune yakazara skrini.

Mobile Menyu ndeimwe iyo inozivikanwa nejQuery mhedzisiro uye kuti yakarongedzwa mune zvese HTML neCSS. Zviri nyore kwazvo mukuumbwa kwayo, asi zvirokwazvo inokwanisa kupa iyo yekutanga kubata kune yedu webhusaiti.


Siya yako yekutaura

Your kero e havazobvumirwi ichibudiswa. Raida minda anozivikanwa ne *

*

*

  1. Inotarisira iyo data: Miguel Ángel Gatón
  2. Chinangwa cheiyo data: Kudzora SPAM, manejimendi manejimendi.
  3. Legitimation: Kubvuma kwako
  4. Kutaurirana kwedata
  5. Dhata yekuchengetedza: Dhatabhesi inobatwa neOccentus Networks (EU)
  6. Kodzero: Panguva ipi neipi iwe unogona kudzora, kupora uye kudzima ruzivo rwako