Difference between revisions of "Menu"

From BC$ MobileTV Wiki
Jump to: navigation, search
(New page: * Cut & Paste Dolphin Tabs Menu: http://www.javascriptkit.com/script/script2/tabset/index.shtml * PHPmotion comes with a slick menu in the V2 default package: http://phpmotion.com)
 
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
* Cut & Paste Dolphin Tabs Menu:
+
A '''Menu''' is used to present a number of choices to a client (visitor, guest or user).
http://www.javascriptkit.com/script/script2/tabset/index.shtml
+
  
* PHPmotion comes with a slick menu in the V2 default package:
+
== Types of Menus ==
http://phpmotion.com
+
 
 +
=== Toolbar ===
 +
 
 +
* Create a Vertical or Horizontal CSS Navigation Bar Easily: https://www.bitdegree.org/learn/css-navigation-bar
 +
<ref>Howto - create an "Icon" toolbar: https://www.w3schools.com/howto/howto_css_icon_bar.asp</ref>
 +
 
 +
==== Ribbon ====
 +
 
 +
* Ribbon menu: https://www.metroui.org.ua/ribbon-menu.html
 +
<ref>22 CSS Ribbons: https://freefrontend.com/css-ribbons/</ref>
 +
<ref>Full-width ribbon & badge: https://codepen.io/Kerruba/pen/MXNoeG</ref>
 +
<ref>eMail envelope "ribbon/border" effect: https://codepen.io/Nickolyashka/pen/MryVEW</ref>
 +
<ref>CSS ribbon example: https://css-tricks.com/snippets/css/ribbon/</ref>
 +
<ref>CSS3 Ribbon Menu with Hover Effect: https://www.csscodelab.com/css3-ribbon-menu-hover-effect/</ref>
 +
<ref>CodePen Home SVG icons & CSS Ribbons: https://codepen.io/ohsimtabem/pen/wKrwRN</ref>
 +
 
 +
=== Dropdown ===
 +
 
 +
* How to Build a Dropdown Menu with CSS Grid: https://www.joomlashack.com/blog/tutorials/build-a-dropdown-menu-in-css-grid/
 +
<ref>Solved with CSS! Dropdown Menus: https://css-tricks.com/solved-with-css-dropdown-menus/ | [https://codepen.io/una/pen/pVvXmK EXAMPLE]</ref>
 +
<ref>CSS only Responsive Drop Down Menu: https://codeconvey.com/css-only-responsive-drop-down-menu/</ref>
 +
 
 +
 
 +
=== 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 ===
 +
 
 +
* 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
 +
<ref>2 Steps Simple Responsive Pure CSS Hamburger Menu: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/</ref>
 +
<ref>20+ Awesome Hamburger Menu Examples You Need To See Today: https://uicookies.com/hamburger-menu-css/</ref>
 +
 
 +
==== Slide-out ====
 +
 
 +
* W3C - Sliding Menu example: https://www.w3.org/Style/Examples/007/sliding.en.html
 +
<ref>Slide Menu Examples with CSS And Maybe Some JS: https://www.sliderrevolution.com/resources/slide-menu/</ref>
 +
<ref>10 Original Ways to Slide Out a Menu in Web Design: https://designmodo.com/slide-out-menu/</ref>
 +
<ref>'''Slideout.js: https://slideout.js.org''' (touch slideout navigation menu for your mobile web apps)</ref>
 +
 
 +
=== 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
 +
<ref>'''The original "Image Mouseover Effect" that inspired Dojo's Fisheye: http://www.hypergurl.com/expandpic.html'''</ref>
 +
<ref>Development Diary - Taming the Fisheye: https://web.archive.org/web/20120223203627/http://blogs.nitobi.com/alexei/?p=37</ref>
 +
<ref>Marc Grabanski - vanilla JS Fisheye menu: http://marcgrabanski.com/articles/fisheye-javascript-menu | [https://github.com/1Marc/javascript-fisheye-menu/zipball/master DOWNLOAD]</ref>
 +
<ref>Dojo Toolkit's now infamous Fisheye Demo: http://dojotoolkit.org/demos/fisheye-demo</ref>
 +
<ref>Mootools Fisheye implementation, directly mimicking Mac OS X menu: http://www.chrisesler.com/mootools/fisheye/index.php</ref>
 +
 
 +
 
 +
== 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 ==
 +
 
 +
<references />
 +
 
 +
== See Also ==
 +
 
 +
[[DHTML]] | [[JS]] | [[CSS]]/[[CSS3]] | [[Forms]] | [[Scrolling]]

Latest revision as of 10:32, 11 April 2022

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