(1) Use the css3 + jquery easing plug-in to create a brilliant menu.

In this tutorial, we will create a unique sliding box navigation. In this way, the box with menus will slide out and a thumbnail will pop up. In some menu items, we also include submenus with further links. The sub-menu slides left or right, depending on how you move your mouse over the menu item.

We will use the jquery easing plug-in and some pretty images provided by tibchris.

 

Mark

In the HTML structure, we will use an unordered list, where each menu item will contain the main link and the DIV element of the sub-menu:

 <  Ul  ID  = "Sdt_menu"  Class  = "Sdt_menu"  > 
 <  Li  > <  A Href  = "#"  > 
 <  IMG  SRC  = "Images/1.jpg"  ALT  = ""   /> 
 <  Span  Class  = "Sdt_active"  > </  Span > <  Span  Class  = "Sdt_wrap"  > <  Span  Class  = "Sdt_link"  > Portfolio </  Span  > 
 <  Span  Class  = "Sdt_descr" > My work </  Span  >   </  Span  > </  A  > 
 <  Div  Class  = "Sdt_box"  > 
 <  A Href  = "#"  > Websites </  A  >   <  A  Href  = "#"  > Illustrations </  A  >   <  A  Href = "#"  > Photography </  A  > 
 </  Div  > 
 </  Li  > 
 </  Ul  > 

If no sub-menu exists, div is simply excluded. The image will not be displayed at the beginning, because we use CSS to set its height and width to 0. Let's look at the style sheet:

Style Sheet

We started to design the unordered list style:

 
Ul. sdt_menu{
Margin:0;
Padding:0;
List-style:None;
Font-family:"Myriad pro", "trebuchet ms", sans-serif;
Font-size:14px;
Width:1020px;
}
 

Normally, we want to clear any default text decoration and outer boxes for links in our menu:

Ul. sdt_menu{
Text-Decoration:None;
Outline:None;
}
 

Our list items will move to the left and are relatively positioned. Because we need to perform absolute positioning on the elements inside.

If we do not do this, the absolute positioning element will be relative to this page.

Ul. sdt_menu Li{
Float:Left;
Width:170px;
Height:85px;
Position:Relative;
Cursor:Pointer;
}
 

We have two spans for the title and description. The style of the main link element is defined as follows:

 Ul. sdt_menu LI> { 
Position : Absolute ; 
Top :0px ; 
Left : 0px ; 
Width : 170px ; 
Height : 85px ; 
Z-Index : 12 ; 
Background : Transparent URL (../images/overlay.png) No-repeat bottom right ; 
-Moz-box-shadow :0px 0px 2px #000 inset ; 
-WebKit-box-shadow : 0px 0px 2px #000 inset ; 
Box-shadow : 0px 0px 2px #000 inset ; 
 }

Note:Z-Index: We will define the stacking order of all important elements so that the correct elements can be left above.

We are using a background image to create a translucent gradient glass effect. When you use some background patterns (such as wood demo), it creates a beautiful effect. Make sure you try different textures-it just looks amazing!

You can also change the shadow value to 2px 2px 6px #000 inset, which will have a very good impact on you.

 Ul. sdt_menu Li a IMG { 
Border : None ;
Position : Absolute ; 
Width : 0px ; 
Height : 0px ; 
Bottom : 0px ; 
Left : 85px ; 
Z-Index : 100 ; 
-Moz-box-shadow :0px 0px 4px #000 ; 
-WebKit-box-shadow : 0px 0px 4px #000 ; 
Box-shadow : 0px 0px 4px #000 ; 
 }

We add an animated effect to the image so that it can be moved from the bottom. That is why I use "bottom" as a reference point. We also add some elegant square shadows. The value of the two front sides is 0, so that the shadows around the image spread evenly. I applied it to the link element. Whenever you want to create a light boundary effect. You can use this trick! Its advantage is that the shadow is not true and you do not need to consider its width or the height of the element. Currently, CSS 3 is not supported in IE.

The span packaging as the title and description will have such a style:

Ul. sdt_menu Li span. sdt_wrap{
Position:Absolute;
Top:25px;
Left:0px;
Width:170px;
Height:60px;
Z-Index:15;
}
 

If you have large texts, you will need to adapt to these values. Make sure that the adaptive value is in the animation value of JavaScript.

 

Next, we define it as a gray box that slides down. We give it a 0 height and position. We only need to increase its height in an animation:

 Ul. sdt_menu Li span. sdt_active {
Position : Absolute ; 
Background : #111 ; 
Top : 85px ; 
Width : 170px ; 
Height : 0px ; 
Left : 0px ; 
Z-Index :14 ; 
-Moz-box-shadow : 0px 0px 4px #000 inset ; 
-WebKit-box-shadow : 0px 0px 4px #000 inset ; 
Box-shadow : 0px 0px 4px #000 inset ; 
 }

The common style of span and link in the box should be defined as follows:

Ul. sdt_menu Li span. sdt_link,
Ul. sdt_menu Li span. sdt_descr,
Ul. sdt_menu Li Div. sdt_box{
Margin-left:15px;
Text-Transform:Uppercase;
Text-shadow:1px 1px 1px #000;
}
 

The title and description are defined as follows:

 Ul. sdt_menu Li span. sdt_link { 
Color : # Fff ; 
Font-size : 24px ;
Float : Left ; 
Clear : Both ; 
 } 
Ul. sdt_menu Li span. sdt_descr { 
Color : # 0b75af ; 
Float : Left ; 
Clear : Both ; 
Width : 155px ; /*  For dumbass IE7  */  
Font-size : 10px ; 
Letter-spacing : 1px ; 
 }

The sub-menu box should be hidden under the gray box during initialization. Later we let him move to the right or left, depending on where we are. For example, if we move the mouse over the last element, we want to give the sub-menu an animation to the left. In other conditions, we want to make it right.

 Ul. sdt_menu Li Div. sdt_box { 
Display : Block ; 
Position : Absolute ; 
Width : 170px ; 
Overflow : Hidden ; 
Height : 170px ; 
Top : 85px ; 
Left : 0px ; 
Display : None ; 
Background : #000 ; 
 } 
Ul. sdt_menu Li Div. sdt_box { 
Float : Left ; 
Clear : Both ; 
Line-height : 30px ; 
Color :# 0b75af ; 
 }

The first link of the sub-menu should have a margin:

 
Ul. sdt_menu Li Div. sdt_box A: First-child{
Margin-top:15px;
}
Ul. sdt_menu Li Div. sdt_box A: hover{
Color:# Fff;
}
 

Javascript

When we move the list element with the mouse, we zoom in the image and display the sdt_active span and sdt_wrap span. If the element has a sub-menu (sdt_box), we will push it to one side. If this element is the last one, we will show it on the left side of the Menu Sub-menu box; otherwise, it will be on the right side:

$ ( Function (){
 /* *
* For each menu element, on mouseenter,
* We enlarge the image, and show both sdt_active span and
* Sdt_wrap span. If the element has a sub menu (sdt_box ),
* Then we slide it-if the element is the last one in the menu
* We slide it to the left, otherwise to the right
  */ 
$ ('# Sdt_menu> li'). BIND ('mouseenter ', Function (){
 VaR $ ELEM = $ ( This );
$ ELEM. Find ('img ')
. Stop ( True )
. Animate ({
'Width': '170px ',
'Height': '170px ',
'Left': '0px'
}, 400, 'easeoutback ')
. Andself ()
. Find ('. sdt_wrap ')
. Stop ( True )
. Animate ({'top': '140px '}, 500, 'easeoutback ')
. Andself ()
. Find ('. sdt_active ')
. Stop (True )
. Animate ({'height': '170px '}, 300, Function (){
 VaR $ Sub_menu = $ ELEM. Find ('. sdt_box ');
 If ($ Sub_menu.length ){
 VaR Left = '170px ';
 If ($ ELEM. Parent (). Children (). Length = $ ELEM. Index () + 1)
Left = '-170px ';
$ Sub_menu.show (). animate ({'left': Left}, 200 );
}
});
}). BIND ('mouseleave ', Function (){
 VaR $ ELEM = $ ( This );
 VaR $ Sub_menu = $ ELEM. Find ('. sdt_box ');
 If ($ Sub_menu.length)
$Sub_menu.hide().css ('left', '0px ');

$ ELEM. Find ('. sdt_active ')
. Stop ( True )
. Animate ({'height': '0px '}, 300)
. Andself (). Find ('img ')
. Stop ( True )
. Animate ({
'Width': '0px ',
'Height': '0px ',
'Left': '85px '}, 400)
. Andself ()
. Find ('. sdt_wrap ')
. Stop ( True )
. Animate ({'top': '25px '}, 500 );
});
});

 

This is done. We hope you like this small menu and can use it properly.

Below is the effect after running. If you cannot see it, please wait a few seconds.

Note: It looks more brilliant on Google Chrome! In versions earlier than ie9, jsfiddle displays the scroll bar.

Reference address

Http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

Source code download

Http://tympanus.net/Tutorials/SlideDownBoxMenu/SlideDownBoxMenu.zip