what I would seem to be

=====

Doesn’t everyone want a vertical slidey (according to my spellchecker, “slidey” is not a word. Really? Weird.) menu?  No?  Ok then, stop here.

If you do want a slidey (I’m just going to keep using the word, that’ll teach ’em) menu and have figured out that the one you want is J Birch’s excellent jQuery plugin Superfish (it is the one you want btw) and have read Kavin’s excellent tutorial but still need a bit of help and want it vertical, then here you go.

Oh damn, I meant to add in that thing that makes code show up properly.  Hang on.  Ah – the Syntax Highlighter plugin by Alex Gorbatchev should work.  It does!  Excellent.

Here are the steps you want to take, in plain-ish English:

1. Download the Superfish plugin.
2. Upload the plugin to your template directory (it needs to be unzipped either before or after upload obvs) – I renamed the folder “Superfish-1.4.8” to “superfish”.
3. In your wp_nav_menu bit (in header.php or wherever), use ‘menu_class’ => ‘sf-menu sf-vertical’ eg:
   wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘menu_class’ => ‘sf-menu sf-vertical’, ‘theme_location’ => ‘primary-menu’ ) );  — this is what needed to be edited. Change ‘theme_location’ to ‘menu’ to get the right menu. Below is correct sample code.

   wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu sf-vertical', 'menu' => 'primary-menu' ) ); 

   I’m using a custom nav menu, ‘primary-menu’ – don’t just copy and paste the above.

4. Make a file with the following – mine is named jqsf.js (taken from this support thread) – and upload to your superfish (or whatever you’ve named it)/js directory

   $(document).ready(function(){
   $("ul.sf-menu").superfish({
   animation: {height:'show'},   // slide-down effect without fade-in
   delay:     1200               // 1.2 second delay on mouseout
   });
   });

   This initialises Superfish and is where you can change the animation options and various bits and bobs.  It’s good fun to play with these.

5. In your template’s style.css file, disable / delete any and all styles relating to the navigation lists – you can add them back later when it’s working.  (Setting a width on the ul caused mine to break which is easy enough to fix but took a while to figure out.)
6. Add the following to your functions.php file – this assumes you’ve named the directories and files the same as I did.  This is, in large part, taken from Kavin’s tutorial mentioned above. He goes through it more thoroughly, so have a look there if you have questions.

   //jQuery Insert From Google - via http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/
   if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
   function my_jquery_enqueue() {
   $scriptdir=get_bloginfo( 'template_url' );
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);// Register the Superfish javascript file
   wp_register_script( 'superfish', $scriptdir.'/superfish/js/superfish.js', false, '1.4.8');// Register the file you made that initialises Superfish
   wp_register_script( 'jqsf', $scriptdir.'/superfish/js/jqsf.js', false);// Now the superfish CSS - you need superfish.css AND superfish-vertical for the vertical menu
   wp_register_style( 'superfish-css', $scriptdir.'/superfish/css/superfish.css', false, '1.4.8');
   wp_register_style( 'superfish-vertical-css', $scriptdir.'/superfish/css/superfish-vertical.css', false);//Put all the scripts and styles in the header where they belong
   wp_enqueue_script('jquery');
   wp_enqueue_script('superfish');
   wp_enqueue_script('jqsf');wp_enqueue_style('superfish-css');
   wp_enqueue_style('superfish-vertical-css');
   }
   

And that’s it.  You should have a working vertical menu.  You’ll need to style it – just edit the superfish.css style.  It’s well annotated, so you shouldn’t have any trouble.  The site I used this on is not yet ready for public consumption, but I will update this post when it is.

This entry was posted on Tuesday, January 24th, 2012 at 9:49 pm and is filed under WordPress, Work. You can follow any comments to this entry through the RSS 2.0 feed. You can skip to the end and leave a comment. Pinging is currently not allowed.