A Beautiful Jquery Drop-Down Carte Du Jour For Blogger Blogspot

Alright, this time, nosotros are going to brand a fashionable too elementary jQuery drib downwards menu. The principal objective is to larn inward every bit elementary every bit possible, amongst roughly fiddling jQuery number too tardily to customize/ apply dissimilar fashion on it. To fashion it into your ain design, you lot only convey to modify the a tag CSS style. You tin laissez passer on notice alter colors or position background images, or the size too color of text.

How to Add jQuery Drop-Down carte inward Blogger

Step 1. Log inward to your Blogger describe organization human relationship too become to Template - Edit HTML

Step 2. Click anywhere within the code expanse too press the CTRL + F keys to opened upward the search box

Step 3. Type or glue this tag within the search box too hitting Enter to uncovering it:

]]></b:skin>

Step 4. Add the next CSS only inward a higher house ]]></b:skin>

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px company #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px company white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Find this tag:

</head>

Step 6. Add this script correct above/before it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
constituent jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
constituent jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
constituent jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
constituent jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 7. Hit the "Save Template" push clit to relieve the changes.

Step 8. Now let's add together the HTML construction of the menu: Go to Layout > click on "Add a gadget" link

Step 9. Choose HTML/JavaScript from the pop-up window

Step 10. Paste the next code inward the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note : Change the titles too supersede the # symbol amongst the URL address of each of your links

Step 11. Click the "Save" button.

Important:
- if your carte is on the sidebar, or footer, only drag it to your page header too click Save again.
- if drib downwards links are non showing, produce the following:

Go dorsum to Template > Edit HTML too search (CTRL + F) this code: