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