Submit your widget

Swing slide menu with jQuery

Created 12 years ago   Views 16851   downloads 3567    Author carefordesign
Swing slide menu with jQuery
View DemoDownload
Share |

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.

<div class="item">
    01. <a href="#" title="+ d'infos">Menu item</a>
    <div class="subitem" style="display:none;">Contenu masqué - <a href="#" title="Care for design">c4d</a></div>

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.

<script type="text/javascript">
		$('.subitem', this).show();
	}, function(){
		$('.subitem', this).hide();

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 {
    margin:2px 0 2px 0;

.subitem {

The article source: