miércoles, 11 de julio de 2012

PASIÓN POR EL TEATRO MUSICAL

PASIÓN POR EL TEATRO MUSICAL


HOLA REBECCA

Posted: 11 Jul 2012 08:06 AM PDT

En noviembre está programado el arribo al teatro Broadhurst de este musical alemán. El autor es Michael Kunze quien ya ha recibido premios importantes en Europa por los otros tres musicales que ha sacado a la luz.


Hipersonica

Tuts Tuesday: Add Superfish Menu jQuery Plugin To A Theme - Padd Solutions

Tuts Tuesday: Add Superfish Menu jQuery Plugin To A Theme - Padd Solutions


Tuts Tuesday: Add Superfish Menu jQuery Plugin To A Theme

Posted: 10 Jul 2012 05:23 AM PDT


On this article, I would like to share on how to add a Superfish menu jQuery plugin to a theme.

Target Audience

This article is intended to the people who have knowledge in WordPress theme development, HTML, PHP, CSS, and Javascript using jQuery framework.

Requirements

  • jQuery Superfish Plugin. Get this script from this site. Get this file in ZIP format, it contains the examples and the script itself.
  • Any WordPress Theme. Any WordPress theme will do for the modification. I will use Twenty Eleven theme as an example.

Step 1: Directory Changes

Under twentyeleven folder, upload the Superfish jQuery plugin (superfish.js) to js folder (The path is twentyeleven/js).

Next, still under js folder, create a file called menubar.js. We will add the code later on.

Step 2: File Modifications

Open the functions.php file under twentyeleven folder. Insert the following code at the end of the line (after add_filter function to add classes in <body> tag).

function twentyeleven_enqueue() {  	wp_enqueue_script('jquery');  	wp_enqueue_script('jquery-superfish', get_template_directory_uri() . '/js/superfish.js');  	wp_enqueue_script('jquery-menubar', get_template_directory_uri() . '/js/menubar.js');  }  add_action('init', 'twentyeleven_enqueue');

Next, open the menubar.js file under twentyeleven > js folder. Insert the following code.

function tutorial_superfish() {  	jQuery('.menu > ul').superfish({  		delay:       1000,                            // one second delay on mouseout  		animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation  		speed:       'fast',                          // faster animation speed  		autoArrows:  false,                           // disable generation of arrow mark-up  		dropShadows: false                            // disable drop shadows  	});  }  jQuery(document).ready(function() {  	jQuery.noConflict();  	tutorial_superfish();  });

And finally, open the style.css, under twentyeleven folder, and at line 600, replace the line of code from this:

#access li:hover > a,  #access ul ul :hover > a,  #access a:focus {  	background: #efefef;  }  #access li:hover > a,  #access a:focus {  	background: #f9f9f9; /* Show a solid color for older browsers */  	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);  	background: -o-linear-gradient(#f9f9f9, #e5e5e5);  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */  	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);  	color: #373737;  }  #access ul li:hover > ul {  	display: block;  }  #access .current-menu-item > a,  #access .current-menu-ancestor > a,  #access .current_page_item > a,  #access .current_page_ancestor > a {  	font-weight: bold;  }

to this

#access li:hover > a,  #access ul ul :hover > a,  #access li.sfHover,  #access ul ul .sfHover,  #access a:focus {  	background: #efefef;  }  #access li:hover > a,  #access li.sfHover > a,  #access a:focus {  	background: #f9f9f9; /* Show a solid color for older browsers */  	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);  	background: -o-linear-gradient(#f9f9f9, #e5e5e5);  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */  	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);  	color: #373737;  }  #access ul li:hover > ul,  #access ul li.sfHover > ul {  	display: block;  }  #access .current-menu-item > a,  #access .current-menu-ancestor > a,  #access .current_page_item > a,  #access .current_page_ancestor > a {  	font-weight: bold;  }

Basically, you simply add the .sfHover class on hover events to have the Superfish working.

Themes in Action

Almost all WordPress themes made by Padd Solutions uses Superfish Menu jQuery plugin. So if you want to explore how it uses, pick any theme to download.

There are a good number of premium themes which uses Superfish Menu jQuery plugin. They are the following:

 

Tuts Tuesday: Add Superfish Menu jQuery Plugin To A Theme is originally posted at Padd Solutions - leading provider of free and premium quality WordPress themes.