New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/menuitems-a-refreshing-approach-to-navigation/
MenuItems - A refreshing approach to navigation
This jquery plugin MenuItems is a dynamic jQuery menu plugin that lets you create beautiful and responsive navigation widgets.
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="menuitems/menuitems.min.css" /> <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script>
Only the class menuItem is mandatory to apply proper styles:
<body> <section|div class="menuItem" data-mi-title="First Content"> <div class="content"> My Content! </div> </section|div> <section|div class="menuItem" data-mi-title="Second Content"> <div class="content"> My Content Too! </div> </section|div> </body>
$(document).ready(function() $('body').menuItems(); );
Then on a specific section, for example when a background needs contrasting text color, do the following.
<section data-mi-theme='green'></section>
And when scrolled over that specific section it will take on the specified theme.
PROPERTY TYPE DEFAULT DESCRIPTION items
Pass an object in the form of:
[ element:$(jq_object), title: 'this is the title of the section' , ...]
listContainer AnimationSpeed
The time the animation takes for the list item container to scroll to the users viewport when it is absolutely positioned. textHoverSpeed
Animation speed of text appearing when user hovers over a menu item. onActivateSpeed
Animation speed of title of menu item popping out when a user scrolls into that specific section. color
Color of the titles of the menu items activeBorderColor
Color of the border of the menu item button when it is active. borderColor
Color of menu item button border when it is not currently active. borderWidth
Width of border in pixels for active and inactive menu item buttons. activeFill
Color fill of the active menu item button. inactiveFill
Color fill of the inactive menu item buttons. inactivePadding
Padding of inactive menu item buttons. (Radius of fill of button.) fontWeight
Font weight of the title of the menu items. showTextOnActive
Should the text bounce out when a specific section is scrolled to? bounceButton
Should the button bounce out when a specific section is scrolled to? themes
"green": activeFill: "green", inactiveBorderColor: "green"
Then on a specific section, for example when a background needs contrasting text color, do the following.
<section data-mi-theme='green'></section>
And when scrolled over that specific section it will take on the specified theme.
[ maxHeight: 99999, minHeight: 0, maxWidth: 99999, minWidth: 800, theme: 'default' , maxHeight: 99999, minHeight: 0, maxWidth: 799, minWidth: 0, theme: 'mobile' ]
The themes ‘default’ and ‘mobile’ are preset and should not be overriden, although it is possible. onAfterScroll
A function that should be executed when a user has clicked on a menu item and the scroll to the linked section is completed. hierarchical
When false, all sections with the menuItem class will be added to the menuItem container. When true, only those on the same depth (i.e. same number of parents) will be added to the menu.
Theme options set on a specific section will override theme options set for screen sizes. First the theme will be set according to screen size, then the specified theme settings will overwrite the default. These options can be set through JavaScript or data attributes on the menu item element. In order to apply different options to different menuitems, you have to set data attributes on the html section or div that the menu item represents.
All data attributes are valid which mach any of the above options. Add the prefix “data-mi-“. You can set data attributes on a time line or one of its children using easily readable seperated parameters as seen below.
<div class='timeline' data-tl-background='rgba(150, 150, 150, 0.5)'></div>
On the other hand you can set all of them using JSON. Bare in mind the JSON has to be properly formatted!
<div class='timeline' data-tl='"background": "rgba(150, 150, 150, 0.5)"'></div>
