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
Download Demo
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>
2. HTML
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>
3. JAVASCRIPT
$(document).ready(function() $('body').menuItems(); );
4. OPTIONS
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
Array
[]
Pass an object in the form of:
[ element:$(jq_object), title: 'this is the title of the section' , ...]
listContainer AnimationSpeed
String
"750ms"
The time the animation takes for the list item container to scroll to the users viewport when it is absolutely positioned. textHoverSpeed
String
"1500ms"
Animation speed of text appearing when user hovers over a menu item. onActivateSpeed
String
"1500ms"
Animation speed of title of menu item popping out when a user scrolls into that specific section. color
String
"white"
Color of the titles of the menu items activeBorderColor
String
"white"
Color of the border of the menu item button when it is active. borderColor
String
"white"
Color of menu item button border when it is not currently active. borderWidth
Integer
1
Width of border in pixels for active and inactive menu item buttons. activeFill
String
"rgba(255, 255, 255, 1)"
Color fill of the active menu item button. inactiveFill
String
"rgba(255, 255, 255, 0)"
Color fill of the inactive menu item buttons. inactivePadding
String
"3px"
Padding of inactive menu item buttons. (Radius of fill of button.) fontWeight
String
"bold"
Font weight of the title of the menu items. showTextOnActive
Boolean
true
Should the text bounce out when a specific section is scrolled to? bounceButton
Boolean
true
Should the button bounce out when a specific section is scrolled to? themes
Object
Example:
"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.
screenSizes
Array
[ 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
Function
function()
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
Boolean
true
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.
5. DATA ATTRIBUTES
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>
