Magpapatuloy kami sa isa na namang magandang listahan ng mga pabilog na menu sa parehong CSS at HTML para maiangkop mo sa mga pangangailangan ng iyong website. Ang mga pabilog na menu na ito ay pangunahing naglalayong bigyan ang hamburger menu ng istilo at mga animation na umiikot sa pabilog na hugis; gaya ng iyong inaasahan.
Mayroong iba't ibang uri ng mga ito, tulad ng perpekto na maaaring magbigay ng kinakailangang pokus sa isang partikular na tema. Ang animation at isang minimalistang biswal na istilo ay maaaring magpahiwatig sa bisita na mayroon tayong mahusay na mata para bigyan ang ating website ng kalidad sa disenyo ng web. Simulan natin sa 11 pabilog na menu, ngunit una, ili-link ka namin sa isa pang listahan ng mga CSS menu.
Menu ng bilog na nabigasyon
Ang pabilog na menu ng nabigasyon na ito ay makukuha sa CSS at HTML, kaya ang pagpapatupad nito ay medyo simple kung sanay kang gumamit ng code. Nagtatampok ito ng mahusay na animation at minimalistang istilo na naglalagay dito sa pinakamahusay sa listahan.
Lumulutang na pabilog na menu
Ang lumulutang na pabilog na menu na ito ay talagang puspos ng JavaScript , pati na rin ng HTML at CSS. Isa na namang menu na may serye ng mga animation na naglalagay dito sa pinakamahusay sa listahang ito. Walang duda na may mataas na kalidad.
Circular navigation bar
Ang pabilog na bar na ito ay hango sa lengguwahe ng disenyo ng Google na tinatawag na Material Design . Kung naghahanap ka ng isang bagay na may ganitong istilo, dapat mo itong isama agad sa iyong website.
Menu ng Circular Material
Isa na namang pabilog na menu na dinisenyo para sa Material Design, na naiiba sa iba dahil sa patayong hanay ng mga icon. Nakakabighani at may makintab na pagtatapos; hindi man katangi-tangi, ngunit napakahusay ng pagkakagawa.
Circular menu
Nagtatampok ang menu na ito ng animation na nagpapalawak sa hamburger button upang ipakita ang iba't ibang seksyon na maaari mong puntahan sa website kung saan ito naka-integrate.
Radial menu sa CSS
Ang radial menu na ito ay ginawa gamit ang CSS at HTML. Isa itong kaakit-akit na pabilog na menu dahil sa serye ng mga larawang lumalabas kapag pinindot mo ang hamburger icon. Ang hitsura pa lamang nito ay nagpapatingkad na rito.
Radial menu
Isa sa mga pinaka-malikhaing pabilog na menu sa listahan, na nailalarawan sa pamamagitan ng maganda nitong pagkakagawa ng animation . Hindi mo na kakailanganing mag-click para makita ang iba't ibang seksyon ng menu sa iyong website.
CSS Gooey Menu
Gumagamit ang menu na ito ng isang uri ng animation na tinatawag na Gooey, na nagpapadaloy sa iba't ibang seksyon mula sa hamburger button. Ito ay isang natatanging pabilog na menu na ginawa gamit ang CSS, kaya handa na itong isama sa iyong website. Ang masigla at kapansin-pansing animation nito ang tunay na nagpapatangi dito.
Animated na radial menu
Medyo simple lang ang pabilog na menu na ito, ngunit mayroon itong tamang dami ng animation para gawin itong isang de-kalidad na menu. Gumagamit ito ng JavaScript kasama ng CSS at HTML. Isang simpleng pag-click sa hamburger icon ay magbubukas sa lahat ng seksyon para makapag-navigate ka sa mga ito.
Popout ng pag-navigate sa bilog
Isang mabilis na pag-click sa hamburger icon ang bubukas nang buo sa iba't ibang seksyon, na nagpapalaki sa bilog para ma-click mo ang bawat isa. Mayroon din itong hover effect kapag pinindot mo nang matagal ang button ng mouse sa alinman sa mga ito, na ginagawa itong mas kawili-wili kaysa sa nauna, na medyo mas basic na bersyon.
Paikot na menu ng paikot
Isa ito sa mga pinaka-orihinal at malikhaing pabilog na menu sa listahan. Napakadaling i-customize nito at magpapaalala sa iyo ng isang makalumang rotary dial phone kung saan kailangan mong paikutin ang iyong daliri para i-dial ang bawat numero. Isang nakakatuwang animation para sa isang pabilog na menu na namumukod-tangi sa iba sa disenyo nito. Ang animation talaga ang lumilikha ng epekto, kaya kung naghahanap ka ng masaya at kakaibang menu para sa isang partikular na tema, tulad ng isang call center, perpekto ito.