Acrobatic + CSS Horizontal Menu With jQuery ~ YourBloggerTipz

Acrobatic HORIZONTAL MENU

Once before I explain about the Light Horizontal Hover Menu , now I will give you another new tips that make a horizontal menu at sisipi effect jQuery.

That is, when the mouse cursor highlight of this menu, then one of these menus will be tucked away or turned upside down.
And also I made this post is actually at the request of one of my blogger friends:

The following stages make acrobatic HORIZONTAL MENU:

1. Login to your Blogger
2. Select Plan ---> EDIT HTML
3. Save the following CSS code above ]]></ b: skin>

ul # topnav { margin: 10px 0 20px; padding: 0; list-style: none; font-size: 1.1em; clear: both; float: left; width: 100%; } ul # topnav li { margin: 0; padding: 0; overflow: hidden; float: left; height: 40px; } ul # topnav a, ul # topnav span { padding: 10px 20px; float: left; text-decoration: none; color: # fff; text-transform: uppercase; clear: both; height: 20px; line-height: 20px; background: # 1d1d1d; } ul # topnav a {color: # 7bc441;} ul # topnav span { display: none; } span {ul # topnav.v2background: url (http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top; } ul # topnav.v2 a { color: # 555; background: url (http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom; }

4. Then find the following code

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> </ B: section> </ Div>

Notes:

To store this menu, you are not required / required to keep it just below the above code, you can keep them in place to suit your template.

5. Save the following code right after the above code (optional)

<ul class='v2' id='topnav'> <a href='/' title='HOME'> HOME </ a> </ li> <a href='#' title='MENU 1'> MENU 1 </ a> </ li> <a href='#' title='MENU 2'> MENU 2 </ a> </ li> <a href='#' title='MENU 3'> MENU 3 </ a> </ li> <a href='#' title='MENU 4'> MENU 4 </ a> </ li> <a href='#' title='MENU 5'> MENU 5 </ a> </ li> <a href='#' title='MENU 6'> MENU 6 </ a> </ li> </ Ul>

6. Now you save the following script above </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag $("#topnav li").each(function() { //For each list item... var linkText = $(this).find("a").html(); //Find the text inside of the a tag $(this).find("span").show().html(linkText); //Add the text in the span tag }); $("#topnav li").hover(function() { //On hover... $(this).find("span").stop().animate({ marginTop: "-40" //Find the span tag and move it up 40 pixels }, 250); } , function() { //On hover out... $(this).find("span").stop().animate({ marginTop: "0" //Move the span back to its original state (0px) }, 250); }); }); </script>

7. Save your Template

^ ^ Additional:
Menus I described above is the appearance when the mouse to highlight a back somersault + Background is writing it, if you just want the writing is turned upside down, Please Use the code below:

<ul id='topnav'> <a href='/' title='HOME'> HOME </ a> </ li> <a href='#' title='MENU 1'> MENU 1 </ a> </ li> <a href='#' title='MENU 2'> MENU 2 </ a> </ li> <a href='#' title='MENU 3'> MENU 3 </ a> </ li> <a href='#' title='MENU 4'> MENU 4 </ a> </ li> <a href='#' title='MENU 5'> MENU 5 </ a> </ li> <a href='#' title='MENU 6'> MENU 6 </ a> </ li> </ Ul>