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

Alright, this time, nosotros are going to brand a fashionable together with uncomplicated jQuery driblet downward menu. The original objective is to arrive every bit uncomplicated every bit possible, amongst but about piddling jQuery termination together with slowly to customize/ apply dissimilar mode on it. To mode it into your ain design, yous but bring to modify the a tag CSS style. You tin alter colors or seat background images, or the size together with color of text.

How to Add jQuery Drop-Down carte du jour inwards Blogger

Step 1. Log inwards to your Blogger concern human relationship together with become to Template - Edit HTML

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

Step 3. Type or glue this tag within the search box together with hitting Enter to abide by it:

]]></b:skin>

Step 4. Add the next CSS but higher upward ]]></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;
role jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
role jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
role jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
role 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 to salve 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 inwards 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 together with supervene upon the # symbol amongst the URL address of each of your links

Step 11. Click the "Save" button.

Important:
- if your carte du jour is on the sidebar, or footer, but drag it to your page header together with click Save again.
- if driblet downward links are non showing, create the following:

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