Pop Up Navigation Menu From Bucket Using jQuery In Blogger

DEMO

Login to Blogger>>>Go To LAYOUT>>>Add a Gadget>>>Select HTML and Java>>>Paste the Below Code

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png"/>
<ul id="stack">
<li><a href=""><span>Aperture</span><img alt="Aperature" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/adobeAcrobat.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png"/></a></li>
<li><a href="#"><span>All Examples</span><img alt="Photoshop" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/aperture.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png"/></a></li>
<li><a href="example3.html"><span>Example 3</span><img alt="Safari" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/safari.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png"/></a></li>
<li><a href="example2.html"><span>Example 2</span><img alt="Coda" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/finder.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png"/></a></li>
<li><a href="index.html"><span>Example 1</span><img alt="Finder" src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png"/></a></li>
</ul>
</div><!-- end div .stack -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://files-teckzest.bravehost.com/fisheye-iutil.min.js" type="text/javascript"></script>

Now Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For ]]></b:skin> code:

Copy below code and paste it just before the ]]></b:skin> tag.

.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }