Hello,

 

I want to create a word press menu like this one http://manos.malihu.gr/tuts/jquery_css3_simple_menu.html.

 

Anyone know a plugin that could do this for me?

The link goes to a 404 page - is that right?

 

I went into the site and there is a menu on the right that lights up when the mouse hovers over it - To achieve that, all the content is probably in a div that is set to a lower opacity and it goes to full opacity when the mouse hovers over it.

 

It probably involves css and or jquery.

woops have a dot at the end http://manos.malihu....imple_menu.html

 

Yeah is there a way that i could make it like that? For word press? Is there any plugins the default css doesn't allow me to copy and paste the code in then it works.

This might work if for some reason the "editor" function isn't working (don't know why it shouldnt). FTP into your site, locate the right CSS file in whatever themes folder your using, (make a backup of it so if you muck it up you just need to upload the original ) open with your normal HTML editor, paste in the CSS3 code (as thats all it is, css3 transition effect), Upload the file and that should be it.

What do you mean?

I dont think there is a plugin for this - i just had a very brief look and couldn't find anything.

 

I guess you dont know much css/html ? If you do try this:

 

Like what kree8or said if you look at the code and find the area that your menu is in then put a div around the whole thing:

 

<div id='menu_holder'> menu code inside here </div>

 

then in the css file :

 

#menu_holder {

opacity: 0.7;

}

 

#menu_holder:hover {

opacity: 1;

}

 

and thats a brief idea of all the code you need to achive the hover effect - not including any sizing though.

What do you mean?

Are you comfatable with things like FTP? (this is the way people can upload files from their local machine to the web server).

Because if you are , all you need to do is add this to the CSS rule that governs the hover state in the nav. Something like .nav hover or #nav hover

-webkit-transition: all 750ms ;
 -moz-transition: all 750ms ;
    -ms-transition: all 750ms ;
    -o-transition: all 750ms ;
 transition: all 750ms ;

this is what ever is in the menu code <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

 

If i add the css what do i do with the divs?

That generates the menu in wordpress:

 

try this - it includes kree8ors code too:

 

add the div tag around the wp_nav_menu

 

 

<div id='menu_holder'>

 

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

 

</div>

 

then in the css file add this:

 

 

#menu_holder {

opacity: 0.6;

-webkit-transition: all 750ms ;

-moz-transition: all 750ms ;

-ms-transition: all 750ms ;

-o-transition: all 750ms ;

transition: all 750ms ;

}

 

#menu_holder:hover {

opacity: 1;

}

 

and save both files (after making backups) and if should work for you.

Okay i'll have a go. As this has jquery will it work? I just add the route into the header etc.

 

http://manos.malihu.gr/simple-navigation-with-css3-and-jquery/