Discover Top Posts Tagged with #menu plugin

Download Now Stunning 3D Off Canvas Menu WordPress Plugin - 3D Menu Awesome - WPCroc.com

Download Now Stunning 3D Off Canvas Menu WordPress Plugin – 3D Menu Awesome – WPCroc.com

[ad_1]

DOWNLOAD FOR FREE

LIVE PREVIEWBUY FOR $12

3D Menu Awesome is an amazing plugin that helps you create a WordPress menu interface element on your WordPress site with custom layouts and effects. 3D Menu Awesome is easy to use with a wide variety of 3D design styles.

Awesome 3D menu features

6 design styles

Custom menu background

2 types of menus

2 types of menu buttons

2 styles of menu…

View On WordPress

#3d menu #menu #menu effect #menu icon #menu plugin #navbar menu #site navigation #vertical menu #wordpress #wordpress menu #wordpress plugins #wordpress themes

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

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.

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

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.

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.

On the other hand you can set all of them using JSON. Bare in mind the JSON has to be properly formatted!

#beautiful navigation #jquery menu #menu plugin #menuitems #navigation #navigation widgets #responsive navigation #Responsive #» Menu & Navigation #› Css / Css3 Plugins & Demos #› HTML / HTML5 Plugins & Demos #› Jquery Plugins & Demos

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/responsive-dropdown-menu-plugin/

Responsive Dropdown Menu Plugin

Download Demo

Responsive Dropdown Menu is A small jQuery plugin which allows you to create various types of menus for mobile devices. You can create a menu which can be toggled with a tap on mobile devices, a mmenu where each submenu can be toggled or a select list menu.

1. INCLUDE CSS AND JS FILES

2. HTML

<div id="cssmenu"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Products</a> <ul> <li><a href="#">Widgets</a></li> <li> <a href="#">Wdigets 2</a> <ul> <li><a href="#">Plugins</a></li> <li><a href="#">Extensions</a></li> <li><a href="#">Modules</a></li> </ul> </li> <li><a href="#">Support</a></li> <li><a href="#">Another Widget</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>

3. JAVASCRIPT

$("#cssmenu").menumaker( title: "Menu", format: "multitoggle" );

4. OPTIONS

$("#cssmenu").menumaker( title: "Menu", // The text of the button which toggles the menu breakpoint: 768, // The breakpoint for switching to the mobile view format: "multitoggle" // It takes three values: dropdown for a simple toggle menu, select for select list menu, multitoggle for a menu where each submenu can be toggled separately );

#Dropdown menu #featured #menu plugin #mobile devices #mobile menus #responsive dropdown menu #select list responsive #submenu #Responsive #» Bootstrap plugins #» Menu & Navigation #› Bootstrap #› Css / Css3 Plugins & Demos #› HTML / HTML5 Plugins & Demos #› Jquery Plugins & Demos

Building jQuery Menus with jQWidgets

jqxMenu is a jQuery plugin that let’s you add a beautiful Menu to your web site. In this post, we will expore how to set up a menu from an existing UL.

Let’s start with a simple ‘DIV’ element with ‘UL’ as a child element.

<div id='jqxMenu'> <ul> <li><a href="#">Home</a></li> <li>About Us <ul> <li><a href="#">History</a></li> <li><a href="#">Our Vision</a></li> <li><a href="#">The Team</a> <ul> <li><a href="#">Brigita</a></li> <li><a href="#">John</a></li> <li><a href="#">Michael</a></li> <li><a href="#">Peter</a></li> <li><a href="#">Sarah</a></li> </ul> </li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Press</a></li> <li><a href="#">FAQs</a></li> </ul> </li> <li>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </li> <li>Products <ul> <li><a href="#">New</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Used</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Featured</a></li> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">Enquiry Form</a></li> <li><a href="#">Map & Driving Directions</a></li> <li><a href="#">Your Feedback</a></li> </ul> </li> </ul> </div>

The next step is to include the required javascript files and CSS styles. We will use the ‘Summer’ visual style, so we need to include the jqx.summer.css file after jqx.base.css.

Now, let’s render the Menu using this script:

$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'summer' });

Here is how the Menu looks after rendering.

#menu #jquery #javascript #menu plugin #jqxmenu #jqwidgets

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

2. HTML

Only the class menuItem is mandatory to apply proper styles:

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.

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

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.

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.

5. DATA ATTRIBUTES

On the other hand you can set all of them using JSON. Bare in mind the JSON has to be properly formatted!

#menu plugin

Trending Tags

Recently Viewed Tags

#menu plugin