Create a menu code for the effect navigation of the jquery Mask Layer

Create a menu code for the effect navigation of the jquery Mask Layer

We will create a simple jquery menu. As long as we hover over the navigation bar area, we will display the screen: Bright menus stand out in a dark background image.

Jquery navigation is an essential module for a website. When a user browses the navigation bar of a website for a specific purpose, highlighting the navigation bar is a top priority. Therefore, you must use the jquery mask layer. Highlight the operations of the current user using the effect of light and shade.

 

The Code is as follows:

$ (Function (){

Var $ oe_menu = $ ('# oe_menu ');

Var $ oe_menu_items = $ oe_menu.children

('Lil ');

Var $ oe_overlay = $ ('# oe_overlay ');

$ Oe_menu_items.bind ('mouseenter', function (){

Var $ this = $ (this );

$ This. addClass ('slided selected ');

Export this.children('div'mirror.css ('z-

Index', '100'). stop (true, true). slideDown (9999, function (){

$ Oe_menu_items.not

('. Slided'). children ('div'). hide ();

$ This. removeClass ('slided ');

});

}). Bind ('mouseleave ', function (){

Var $ this = $ (this );

$ This. removeClass ('selected'). children

('Div').css ('z-Index', '1 ');

});

$ Oe_menu.bind ('mouseenter', function (){

Var $ this = $ (this );

$ Oe_overlay.stop (true, true). fadeTo (200,

0.6 );

$ This. addClass ('hovered ');

}). Bind ('mouseleave ', function (){

Var $ this = $ (this );

$ This. removeClass ('hovered ');

$ Oe_overlay.stop (true, true). fadeTo (200,

0 );

$ Oe_menu_items.children ('div '). hide ();

})

});