Swing slide menu with jQuery

With a few lines of jQuery you can do a lot (“write less, do more …“) as a small menu that swing and all that without really getting tired
We start by creating a set of elements of type “block” (which is the class “item”) to contain sub-elements of each menu item. Within a text and a link and another element of type “block” (class SubItems“) that can hold another button, a link, information Note that this block is not visible display: none.

 


01. Menu item

The jQuery code is elementary, it is a simple rollover of the element “item”. The first function provides the appearance of the sub-element SubItems” and the callback to the disappearance of it.


Where does in this case the effect of horizontal translation of the text?
Just the style sheet. Giving a width greater than the content container and apply a centering of the text gives the displacement effect. In fact the text position is recalculated during the events that open and close the sub-element.

Below is the text of SubItems is centered (text-align: center) and width of the container “item” (and by inheritance SubItems“) are set to 250px (for exple) which gives the space text to go.

.item {
width:250px;
padding:4px;
background-color:#252525;
margin:2px 0 2px 0;
}

.subitem {
height:40px;
line-height:40px;
text-align:center;
}

Download: http://www.htmldrive.net/items/download/1024

Be Sociable, Share!

Leave a comment