30 nádherných a univerzálních nabídek CSS
Navigační nabídka může být někdy jednou z nejzložitějších částí procesu návrhu. Tato jediná oblast může nastavit tón pro použitelnost celého webu.
Dnes se podíváme na 30 inspirativních příkladů dobrého designu menu. Ačkoli mnoho z nich je čistě CSS, jiné přidávají některé obrázky a / nebo JavaScript, aby zvýšily estetiku a funkčnost.
Delving Deeper
Vždy je užitečnější získat cit pro proces vývoje, než jen vidět obrázek, takže v této sekci si krátce probereme estetiku každého menu a jak vývojář dosáhl účinku. Tímto způsobem můžete získat inspiraci k tomu, jak pomocí nových metod vytvořit vlastní jedinečné nabídky.
Hedvábný příliv
Toto je jedno z nejmenších nabídek na seznamu. Jde v podstatě o prostý text s rozšířeným převrácením modré pole, ale je to opravdu snadné implementovat a výsledkem je pěkný efekt.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus.jpg)
Glenn Sorrentino
Tento příklad používá ohraničení CSS v horní a dolní části nabídky, které se zvětšuje, když na ně umístíte kurzor.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-2.jpg)
Strutta
Pokud máte texturou pozadí, zvažte použití transparentnosti v nabídce pro zvýšení estetiky. To lze snadno provést pomocí RGBa v CSS3.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-3.jpg)
Elbow Park
Další příklad průhlednosti v navigační oblasti. Toto používá podobný efekt jako v prvním příkladu, přičemž výběrové pole se rozšiřuje až na horní část stránky. To zvyšuje viditelnost a zajišťuje hladší design.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-4.jpg)
Myšlenka
Při převrácení těchto tlačítek se pozadí změní na jasnější červené. To v kombinaci s lesklým vzhledem (s průhledným PNG) vytváří iluzi rozsvícení oblasti.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-5.jpg)
Toffee Nut Design
Tento krásný příklad používá pro navigaci skřítky CSS. Celá nabídka je jeden PNG zobrazující každou kartu ve třech stavech: vypnuto, zapnuto a zapnuto + vybrané.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-6.jpg)
Safarista
Zde vidíme každou část navigace jako hybrid obrázku a textu. Ikona, přechod a menší pozadí vytvářejí obraz každé sekce, zatímco větší text je ve stylu HTML s efektem podtržení kurzoru.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-7.jpg)
David Jonsson
Další jednoduchý efekt přechodu, který krvácí na vrchol. Tato ikona měla skryté ikony, které se zobrazují pouze při přejetí myší. Pěkný efekt!
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-8.jpg)
Asvalia
Moc se mi líbí barvy a křivý text v této nabídce. Zářící převrácení jsou perfektní.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-9.jpg)
Bonsai Studios
Toto je velmi jednoduché vertikální menu s průhledností a ztmavením vznášedlem. Splní to práci, vypadá skvěle a lze ji postavit během několika minut.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-10.jpg)
Církev velkých očekávání
Další vertikální navigační nabídka. Tento implementuje některé základní, ale atraktivní ikony a pozadí GIF s přechodem na vznášení.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-11.jpg)
Ryan Couser
Tento používá několik jednoduchých skřítků k dosažení vznášení. Každá ikona je obrázek se zapnutým i vypnutým stavem.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-12.jpg)
Kk Media
Zde vidíme vertikální menu s podrobnějšími ikonami. Každý odkaz je položka seznamu HTML s jednoduchým obrázkem na pozadí použitým v CSS.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-13.jpg)
Bite Club
Tento navigační panel jsem opravdu miloval. Jas opravdu upoutá vaši pozornost a obrácení barev dělá perfektní převrácení. To také používá sprite pro každou položku nabídky, každá se třemi stavy.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-14.jpg)
Společnost hlavního města vybavení
I když v tomhle domě byl výběr navigace ve tvaru domu chytrý. Text v každém odkazu je součástí obrázku, pokud replikujete něco podobného, bylo by jednoduché místo toho použít živý text na pozadí.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-15.jpg)
Strawberry Leisure
Toto rozbalovací menu používá malé opakující se průhledné PNG k vyvolání efektu snížené krytí. Opět se můžeme těšit na to, že to bude v blízké budoucnosti s RGBa mnohem jednodušší, když se na palubu dostane více prohlížečů.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-16.jpg)
Umělé studio
Jo, uhodli jste to, více obrazových skřítků (vnímáte zde trend?). Velká tlačítka a vynikající přechody vytvářejí nádhernou navigační oblast.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-17.jpg)
Cognigen
To byl zdaleka jeden z nejoriginálnějších konceptů, s nimiž jsem při svém hledání narazil. Chcete-li vytáhnout jedinečný 3D efekt, návrhář použil monstrózní čtyři stavy pro každé tlačítko, které se mění v závislosti na tom, zda je tlačítko vybráno, umístěné nad ním nebo má sousední výběr.
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-18.jpg)
Více CSS Menu Goodness
Nyní, když jsme diskutovali o několika skvělých příkladech, je zde několik dalších k odhlášení. Pomocí funkce prohlédnout v prohlížeči zkontrolujte kód a obrázky za tím, co se vám líbí!
Manndible Cafe
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-19.jpg)
Kód Greene
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-20.jpg)
Operní
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-21.jpg)
Mac Rabbit
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-22.jpg)
Stavitelé Clarku
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-23.jpg)
Pan B a přátelé
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-24.jpg)
Subvert
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-25.jpg)
The Swish Life
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-26.jpg)
Mystery Tin
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-27.jpg)
LiveResto
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-28.jpg)
FeelSocial
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-29.jpg)
Gowalla
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-30.jpg)
Festival NZ
![](http://computer06.com/img/css/546/30-gorgeous-versatile-css-menus-31.jpg)
Stáhnout předdefinované nabídky!
Potřebujete dobrý výchozí bod pro vlastní nabídky CSS? Podívejte se na tyto skvělé zdroje zdarma.
- 13 stylů: Nabídky jsou založeny na seznamu, velmi nízké hmotnosti, snadno implementovatelné a kompatibilní s různými prohlížeči.
- CSS Menu Maker
- CSS Play: Nabídky
- Nabídky CSS
- Volný křížový prohlížeč CSS
Ukažte nám své
Máte menu CSS, na které jste obzvláště hrdí? Použijte komentáře níže a zanechejte odkaz, abychom viděli. Také nám dejte vědět, který z výše uvedených příkladů se vám líbil nejlépe.