Menu
From BC$ MobileTV Wiki
A Menu is used to present a number of choices to a client (visitor, guest or user).
Contents
Types of Menus
Toolbar
- Create a Vertical or Horizontal CSS Navigation Bar Easily: https://www.bitdegree.org/learn/css-navigation-bar
Ribbon
- Ribbon menu: https://www.metroui.org.ua/ribbon-menu.html
Dropdown
- How to Build a Dropdown Menu with CSS Grid: https://www.joomlashack.com/blog/tutorials/build-a-dropdown-menu-in-css-grid/
Collapsible
- How to make a collapsible menu using only CSS: https://codeburst.io/how-to-make-a-collapsible-menu-using-only-css-a1cd805b1390
- Side Nav menus: https://www.w3schools.com/howto/howto_js_sidenav.asp
Hamburger
- How TO - Mobile Navigation Menu: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
Slide-out
- W3C - Sliding Menu example: https://www.w3.org/Style/Examples/007/sliding.en.html
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.
- CSS Dock (Fisheye) Menu: http://www.ndesign-studio.com/blog/design/css-dock-menu/
- Fisheye Menu (JavaScript/CSS): http://marcgrabanski.com/code/fisheye-menu/
- Fisheye AJAX: http://www.ajaxdaddy.com/demo-interface-fisheye.html
External Links
- Cut & Paste Dolphin Tabs Menu: http://www.javascriptkit.com/script/script2/tabset/index.shtml
- Milonic Features a free (for GPL Developers) DHTML Menu suite: http://www.milonic.com/
- CSS (only) Horizontal hover menu: http://www.dynamicdrive.com/dynamicindex1/hover.htm
- Advanced CSS Menu: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
- Creating an attractive Hover Menu using CSS & JavaScript: http://www.javascriptkit.com/javatutors/crossmenu.shtml
- PHPmotion comes with a slick menu in the V2 default package: http://phpmotion.com
- DynamixDrive -- Slide-In Menu Bars: http://www.dynamicdrive.com/dynamicindex1/
- Dynamic-FX Slide-In Menu (v 6.5): http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm
- Slide In Menus: http://www.downloadjavascripts.com/Slide_In_Menus.aspx
- OmniSlide: http://www.dynamicdrive.com/dynamicindex1/omnislide/demo.htm
- Slide-in menu script : http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_54.html
References
- ↑ Howto - create an "Icon" toolbar: https://www.w3schools.com/howto/howto_css_icon_bar.asp
- ↑ 22 CSS Ribbons: https://freefrontend.com/css-ribbons/
- ↑ Full-width ribbon & badge: https://codepen.io/Kerruba/pen/MXNoeG
- ↑ eMail envelope "ribbon/border" effect: https://codepen.io/Nickolyashka/pen/MryVEW
- ↑ CSS ribbon example: https://css-tricks.com/snippets/css/ribbon/
- ↑ CSS3 Ribbon Menu with Hover Effect: https://www.csscodelab.com/css3-ribbon-menu-hover-effect/
- ↑ CodePen Home SVG icons & CSS Ribbons: https://codepen.io/ohsimtabem/pen/wKrwRN
- ↑ Solved with CSS! Dropdown Menus: https://css-tricks.com/solved-with-css-dropdown-menus/ | EXAMPLE
- ↑ CSS only Responsive Drop Down Menu: https://codeconvey.com/css-only-responsive-drop-down-menu/
- ↑ 2 Steps Simple Responsive Pure CSS Hamburger Menu: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
- ↑ 20+ Awesome Hamburger Menu Examples You Need To See Today: https://uicookies.com/hamburger-menu-css/
- ↑ Slide Menu Examples with CSS And Maybe Some JS: https://www.sliderrevolution.com/resources/slide-menu/
- ↑ 10 Original Ways to Slide Out a Menu in Web Design: https://designmodo.com/slide-out-menu/
- ↑ Slideout.js: https://slideout.js.org (touch slideout navigation menu for your mobile web apps)
- ↑ The original "Image Mouseover Effect" that inspired Dojo's Fisheye: http://www.hypergurl.com/expandpic.html
- ↑ Development Diary - Taming the Fisheye: https://web.archive.org/web/20120223203627/http://blogs.nitobi.com/alexei/?p=37
- ↑ Marc Grabanski - vanilla JS Fisheye menu: http://marcgrabanski.com/articles/fisheye-javascript-menu | DOWNLOAD
- ↑ Dojo Toolkit's now infamous Fisheye Demo: http://dojotoolkit.org/demos/fisheye-demo
- ↑ Mootools Fisheye implementation, directly mimicking Mac OS X menu: http://www.chrisesler.com/mootools/fisheye/index.php
