![]() ![]() It takes up limited space and can be neatly tucked away into a corner. This circular layout could make for an interesting utility menu. See the Pen Google Nexus Menu by Ahmed Elhanony Form a Semi-Circle Mojtaba Seyedi There’s more that could be done here, such as expanding each menu item with a click or hover. But what if you need more context? Click or tap on the hamburger icon on the upper left of the screen to expand the menu, which includes a search field. Here’s another icon-based vertical menu that does a great job of staying out of the way. See the Pen SVG Kiosk Icon Menu by Chris Gannon Expandable Vertical Navigation by Ahmed Elhanony But an industrious designer could add some text here and utilize this snippet for a microsite or landing page. This icon-based menu was built for a kiosk, and you can definitely see that inspiration. If you’re looking for dead-simple navigation with some super-cool animation, you’ll want to stop right here. See the Pen Simple Icon Navigation by Ganesh Chikhalikar Push Button Icon Menu by Chris Gannon Again, you’ll want to add your own accessibility features here. The menu uses jQuery to create a smooth animation. Click on one of those noir icons, and they’ll turn a bright white with a bright red underline. ![]() And this icon navigation bar is a perfect compliment. See the Pen Vertical Icon Navigation Menu by Saxon Chuang Enter the Dark Mode Icon Menu by Ganesh Chikhalikarĭark design seems to become more popular every day. This particular CSS-only example uses a hover effect to display the menu item’s title. Usually, it makes sense to expand the menu in some way. See the Pen Animated Tab Bar by abxlfazl khxrshidi Vertical Icons with Context by Saxon ChuangĪ vertical navigation bar offers a means to create highly visual navigation that doesn’t take up too much space. The only thing missing here is accessibility, but that could be resolved with some screen reader text. The animated icons also “draw” upon click, making for a more exciting user experience. But this gooey menu kicks it up an extra notch, thanks to its background color-changing effect with each selection. Sure, there are some similarities with the previous example. See the Pen TAB Gooey Icon Navigation Menu Concept Why Not Change the Whole Screen? by Abxlfazl Khxrshidi Larger menus could become a little, well, overwhelming and sticky. That said, it might be most effective in small doses. Combined with clean icons, descriptive text, and bold coloring, it would be perfect for a mobile or web app. The included “gooey” navigation effect on this tabbed menu is both fun and intuitive. See the Pen Sliding Icon Menu by Steve Gardner Also, note that the total width of the container never grows or shrinks – it’s beautifully consistent. Click on an icon, and you’ll witness a slick “sliding” effect that highlights the icon and displays accompanying text (which is also available to screen readers). This navigation is attractive, makes great use of the allotted space, and keeps accessibility in mind.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |