Latest Dropdown Menu for blogger with Jquery. 5

| | , ,

Latest Dropdown Menu for blogger with Jquery.
















Follow simple and easy step to adding this menu to your blogger blog--->>>

* First go to your blogger dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Copy below code and paste before </head>

<script src='http://blogger9.googlecode.com/files/menujquery.js' type='text/javascript'></script>
<link type='text/css' rel='stylesheet' href='https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/stylesheet.css' />
<script type="text/javascript">
$(document).ready(function () {
 $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
 $('ul.menu_body').slideToggle('medium');
    });
 $('ul.menu_body li a').mouseover(function () {
 $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
 $('ul.menu_body li a').mouseout(function () {
 $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you Are here --->>> Page Element.

* Click in Add Gadget which is at your blogger sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank  box.

<div class="container">
<img src="https://lh5.googleusercontent.com/-i_5DTtHhWVI/TntOtQeMGMI/AAAAAAAAAdc/yRUHNutLB18/h80/navigate.png" width="184" height="32" class="menu_head" />

<ul class="menu_body">
<li><a href="TAB1 URL HERE">TAB1 TITLE HERE</a></li>
<li><a href="TAB2 URL HERE">TAB2 TITLE HERE</a></li>
<li><a href="TAB3 URL HERE">TAB3 TITLE HERE</a></li>
<li><a href="TAB4 URL HERE">TAB4 TITLE HERE</a></li>
<li><a href="TAB5 URL HERE">TAB5 TITLE HERE</a></li>
<li><a href="TAB6 URL HERE">TAB6 TITLE HERE</a></li>
<li><a href="TAB7 URL HERE">TAB7 TITLE HERE</a></li>
</ul>
</div>

NOTE:- Remove Highlighted Text from above code with your own ok.

* Now click to save your HTML/Javascript   and you are done.

CHEERS

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Latest Dropdown Menu for blogger with Jquery. ~ Twitter FaceBook

5 Responses So Far:

Beben Koben said...

nice my friend...but we can do it now with css3

فهد said...

مدونتي نت

css menu said...

Great News about dropdown menu

Social Media Statistics said...

Such a useful Jquery stuff. Good to have a brilliant resourceful blog. Thanks

Logo Design Contest said...

Brilliant resource. Nice to see some useful styles jQuery dropdown menus. Thank you so much for bringing this useful stuff for us. Keep posting.

Categories

Select Your Categories