menu
Unknown
|
Thứ Bảy, 11 tháng 8, 2012
|
0 comments
1. Add The Menu CSS
Go to your blogger account,
Navigate to Dashboard >> Design >> Edit Html >
And find the following code,
Navigate to Dashboard >> Design >> Edit Html >
And find the following code,
]]></b:skin>
And before it, add the following css code,
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
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 solid #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 solid 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;
}
2. Adding the Java codes
At the same page, find the next code,
</head>
Then add this code exactly 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;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function 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>
Now Click Save Template
3. Adding The Menu To Your Blog
Now Go to your Dashboard >> Design >>
And on your page elements page, click on Add A Gadget any where on the screen,
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,
And on your page elements page, click on Add A Gadget any where on the screen,
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,
<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 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="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 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="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">AllBlogTools</a></li> </li></ul>
And click Save
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again,
Now go to view your blog and enjoy your new blogger drop-down menu.
Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again,
Now go to view your blog and enjoy your new blogger drop-down menu.
Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.
Demo
To view a live demo for this menu, please click here,
All you comments are welcome.
All you comments are welcome.
Filed Under:
0 comments
Trackback URL | Comments RSS Feed