#animation navigation

New Post has been published on http://www.htmluse.com/elite-box-menu/

Elite Box Menu

Download   Demo

If do you need fresh menu for your project – see the EliteBox Drop-Down Menu jQuery plugin, maybe that is it. The EliteBox have to offer you high spectrum of possibilities. It use images on main items, in combination with the dynamic animation – it gives a unique effect, which is more intuitive. In addition, EliteBox can be second-level. You can set custom color for each item. The Drop-Down Menu script is fully Responsive an easy to use.

1. INCLUDE CSS AND JS FILES

<!-- enable RWD --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- jQuery library --> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <!-- start EliteBoxMenu scripts --> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/eliteBoxMenu_min.js"></script> <link rel="stylesheet" type="text/css" href="eliteBoxMenu.css" /> <!-- end EliteBoxMenu scripts -->

The jQuery EliteBox – Drop-Down Menu must have the jQuery 1.7+ library, the jQuery UI (with Effects Core) and init possibility to rensponsive.

2. HTML

The EliteBoxMenu structure is very simple. First, you must create a div with eliteBoxMenu class. Inside the div push <ul> menu list, where each<li> will be have a link and submenus. See the example code.

<!-- Drop-Down Menu STRUCTURE --> <div class="eliteBoxMenu"> <ul> <li><a href="#" data-image="pictures/card18.jpg" data-color="#d21573"><span>About Us</span><span>Bussiness</span></a> <ul> <li><a href="#">Subitem 1</a></li> <li><a href="#">Subitem 2</a></li> </ul> </li> <li><a href="#" data-image="pictures/book01.jpg" data-color="#d215d0"><span>Read the book</span><span>Bestseller</span></a></li> </ul> </div> <!-- end Drop-Down Menu STRUCTURE -->

data-image – link to an image.

data-color – color for item after Hover/Click it. You don’t must set color for each item because you can set default color by plugin settings

3. JAVASCRIPT

you must init the EliteBox Menu jQuery plugin and set propertises. Please open the script.js file where you can find the code

jQuery(document).ready(function ($) //Usage $(".EliteBoxMenu ul").EliteBoxMenu(); );

4. OPTIONS

Speed: 350, mainHeight: 60, mainWidth: 170, hoverColor: '#15b1d2', method: 'mouseenter', rwdFrom: 980

Speed - speed of animations in miliseconds.

mainHeight and mainWidth - size of main items, if you change the values please update it also in EliteBoxMenu.css.

hoverColor - default color for items hover if you don’t set custom color in item attribute.

method - method of use the menu – mouseenter or click. For mobile devices the method always is click.

New Post has been published on http://www.htmluse.com/very-cool-jquery-wheel-menu-button/

Very cool jQuery Wheel Menu Button

Download   Demo

this is a little jQuery plugin that will bring this concept to the web.the “Wheel Menu”, a jQuery plugin that will allow you to add a customizable Path-like menu button to your website. Let’s explore all the options you can use to add this to your own project.

BASIC USAGE

To add this path-like button to your website, simply include jQuery library, jquery.wheelmenu.js and wheelmenu.css to your HTML documents and create a markup as follows:

  HTML Markup

<a href="#wheel" class="wheel-button">

    <span>+</span>

</a>

<ul id="wheel">

<li class="item"><a href="#home">...</a></li>

<li class="item"><a href="#home">...</a></li>

<li class="item"><a href="#home">...</a></li>

….

</ul>

Make sure that the href of the wheel-button matches the id of the list of items we want to show when the wheel-button is clicked. Now for the CSS part.

CSS

.wheel-button

  position: relative;

  .wheel

  margin: 0;

  padding: 0;

  list-style: none;

  width: 200px; /* this will determine the diameter of the circle  */

  height: 200px; /* this will determine the diameter of the circle  */

  visibility: hidden;

  position: relative;

  display: none;

  .wheel li

  overflow: hidden;

  float:left;

  .wheel li a