jQuery Mega Menu Plugin

The Mega Drop Down Menu plugin takes standard HTML nested lists and turns them into horizontal mega menus. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation.

A mega menu has several advantages over standard drop down menus, including:

• All options visible at the same time
• No scrolling and tricky mouse manoeuvres to see sub-menus fly out
• Using standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists.
For vertical mega menus refer to our other plugin jQuery Vertical Mega Menu.
To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:

jQuery(document).ready(function($) {
jQuery('#mega-menu').dcMegaMenu();
});

download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.

Menu Options

The widget has several parameters that can be configured to help cutomise the mega menu:

• Hover/Click - Select the event that activates the sub-menu. Note that if using "Click" the parent menu links will be disabled
• Number Items Per Row - Select the number of sub-menu items to be shown on each row of the mega menu.
• Skin - Several sample skins are available to give examples of css that can be used to style your own mega menu
• Animation Effect - The effect used to display the drop down menu. Options are slide down or fade in
• Animation Speed - The speed at which the dropdown menu will open/close - selecting "No Animation" will immediately show/hide the menu
• Set Sub Menu To Full Width - If checked, the drop down mega sub menu width will be 100%
  
  

See demo

More

Worpress Plugin TimThumb To Your WordPress Theme

TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a WordPress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your WordPress theme.

Using TimThumb will require the use of WP Custom Fields.

01. Setting Up The Script

Lets grab the TimThumb.php source code, and save it to our theme directory.
To keep things organized, lets save it in a scripts directory in our theme.
yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php
Now create a new directory inside of scripts, and name it “cache”
yourdomain.com/wp-content/themes/your-theme/scripts/cache/
Make sure that both directories /scripts/ and /cache/ are set to 755 so they’re writable by the server.

02. Adding The Call To Our Theme Template

Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.
I’m presenting you with 3 options for the call. You can pick which one might suit you best.
Option 01 – Show Image Only

<?php // This will show only the image. Alter the width and height (in both places) to your needs. ?>
 
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
 <div class="postthumb">
  <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
 </div>
<?php } ?>

Option 02 – Show image, and link image to post

<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
 
        <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
 <div class="postthumb">
  <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
 </div>
<?php } ?>

Option 03 – Show image and link image to URL of your choice. Requires additional custom field of “imglink”. Could be used for outgoing links, or linking a thumb to a full version of the image. This option would work best inside of your single.php template.

<?php  // This will show the image and link it to anything you place into another custom field of "imglink".
  // Alter the width and height (in both places) to your needs.
  ?>
 
<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
 <div class="postthumb">
  <a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
 </div>
<?php } ?>

03. Making Use of Custom Fields

1. In your post go ahead and upload your image.
2. In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded.
3. Close the image manager, and open the Custom Fields box down below.
4. For the key enter thumb.
5. For the value, paste in full address of the image we just copied. ie: http://your-domain.com/wp-content/uploads/2008/02/my-image.jpg

More

The content limit function for wordpress

function the_content_limit($max_char, $more_link_text = '(more...)', 

$stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, 

$stripteaser, $more_file);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$content = strip_tags($content);

if (strlen($_GET['p']) > 0) {
echo "";
echo $content;
echo "<a href=""the_permalink();</p> <p> 

     echo "">"."Read More</a>";
echo "";
}

elseif ((strlen($content)>$max_char) &&

 ($espacio = strpos($content, " ", $max_char ))) {
$content = substr($content, 0, $espacio);
$content = $content;
echo "
";
echo $content;
echo "...";
echo " <a href="";echo the_permalink(); 

echo "">".$more_link_text."</a>";
echo "
";
}

else {
echo "
";
echo $content;
echo "<a href="";echo the_permalink();echo "">"."Read More</a>";
echo "";
}
}

More