Menu

From BC$ MobileTV Wiki
Jump to: navigation, search

A Menu is used to present a number of choices to a client (visitor, guest or user).

Types of Menus

Toolbar

[1]

Ribbon

[2] [3] [4] [5] [6] [7]

Dropdown

[8] [9]


Collapsible


Side Nav

Hamburger

[10] [11]

Slide-out

[12] [13] [14]

Fisheye

Fisheye is an innovative new way of presenting lists of content or menus using web-based tools. The Fisheye effect typically mimics Apple's Mac OS X menus.

[15] [16] [17] [18] [19]


External Links

References

  1. Howto - create an "Icon" toolbar: https://www.w3schools.com/howto/howto_css_icon_bar.asp
  2. 22 CSS Ribbons: https://freefrontend.com/css-ribbons/
  3. Full-width ribbon & badge: https://codepen.io/Kerruba/pen/MXNoeG
  4. eMail envelope "ribbon/border" effect: https://codepen.io/Nickolyashka/pen/MryVEW
  5. CSS ribbon example: https://css-tricks.com/snippets/css/ribbon/
  6. CSS3 Ribbon Menu with Hover Effect: https://www.csscodelab.com/css3-ribbon-menu-hover-effect/
  7. CodePen Home SVG icons & CSS Ribbons: https://codepen.io/ohsimtabem/pen/wKrwRN
  8. Solved with CSS! Dropdown Menus: https://css-tricks.com/solved-with-css-dropdown-menus/ | EXAMPLE
  9. CSS only Responsive Drop Down Menu: https://codeconvey.com/css-only-responsive-drop-down-menu/
  10. 2 Steps Simple Responsive Pure CSS Hamburger Menu: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
  11. 20+ Awesome Hamburger Menu Examples You Need To See Today: https://uicookies.com/hamburger-menu-css/
  12. Slide Menu Examples with CSS And Maybe Some JS: https://www.sliderrevolution.com/resources/slide-menu/
  13. 10 Original Ways to Slide Out a Menu in Web Design: https://designmodo.com/slide-out-menu/
  14. Slideout.js: https://slideout.js.org (touch slideout navigation menu for your mobile web apps)
  15. The original "Image Mouseover Effect" that inspired Dojo's Fisheye: http://www.hypergurl.com/expandpic.html
  16. Development Diary - Taming the Fisheye: https://web.archive.org/web/20120223203627/http://blogs.nitobi.com/alexei/?p=37
  17. Marc Grabanski - vanilla JS Fisheye menu: http://marcgrabanski.com/articles/fisheye-javascript-menu | DOWNLOAD
  18. Dojo Toolkit's now infamous Fisheye Demo: http://dojotoolkit.org/demos/fisheye-demo
  19. Mootools Fisheye implementation, directly mimicking Mac OS X menu: http://www.chrisesler.com/mootools/fisheye/index.php

See Also

DHTML | JS | CSS/CSS3 | Forms | Scrolling