Complete Dropdown Menue Snapshot
Complete Dropdown Menue Code:(Below)
For Blogger: Place this code in the Blogger Gadget.( Insert a gadget of from the gadgets to Enter HTML/Javascript)
<div id='mbtnavbar'>
<ul id="suckerfishnav" class="sf-menu">
<li>
<a href='http://hotseat2011.blogspot.com/'>Home
Page</a>
</li>
<li>
<a href='http://vcaps.wordpress.com/about/'>About</a>
</li>
<li>
<a href='http://hotseat2011.wordpress.com/about/contact/'>Contact
Us</a>
</li>
<li>
<a href='http://digicom007.blogspot.com'>Digital 007</a>
<ul>
<li><a href='http:// '>Music</a></li>
<li><a
href='http:// ‘>Pictures</a></li>
<li><a href='http:// '>Poetry</a></li>
</ul>
</li>
<li><a href="http:// ">Menu 1</a></li>
<ul>
<li><a href="http:// ">Submenu -2</a></li>
<li><a
href="http://vcaps.wordpress.com/sahih-bukhari-shafeef-in-urdu-vol-1/sahih-bukhari-shafeef-in-urdu-vol-3/"
title="Sub -3"> Sub Menu-3</a></li>
</ul></ul>
</div><br
/><br /><br /><br /><br /><br /><br />
Ø The CSS CODE for Dropdown Menu :
Enter this CSS code before:
]]></b:skin>
div#container
{ width:740px; position:absolute; left:50%;
margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B;
font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0;
vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ padding:4px 0; display:block;
text-align:center; text-decoration:none; background:#b9121b; color:#ffffff;
width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center;
text-decoration:none; background:#ec454e; color:#ffffff; width:146px;
height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none;
display:none; background:#ffffff; width:146px; position:absolute; top:21px;
left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px
0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative;
z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px
0; width:146px; border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3
{ display:none; margin:0; padding:0;
list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0
1px; border:1px solid #b9121b; border-left:1px solid #b9121b;
background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover
ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px;
font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a
span,
ul#navigation-1 li ul.navigation-2 li a:hover
span
{ position:absolute; top:0; left:132px;
font-size:12pt; color:#ffffff; }
div#container
{ width:740px; position:absolute; left:50%;
margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B;
font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0;
vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none;
width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid
#b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block;
float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block;
text-align:center; text-decoration:none; background:#b9121b; color:#ffffff;
width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block;
text-align:center; text-decoration:none; background:#ec454e; color:#ffffff;
width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid
#ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none;
display:none; background:#ffffff; width:146px; position:absolute; top:21px;
left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px
0; width:146px; border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px
0; width:146px; border:none; border-bottom:1px solid #ffffff;
position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-
{ display:none; margin:0; padding:0;
list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0
1px; border:1px solid #b9121b; border-left:1px solid #b9121b;
background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover
ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li
ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px;
font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a
span,
ul#navigation-1 li ul.navigation-2 li a:hover
span
{ position:absolute; top:0; left:132px;
font-size:12pt; color:#ffffff; }
Ø <!-- My menue bar setting for IE -->
Enter This code for IE
before ]]></b:skin>
#suckerfishnav
li:hover, #suckerfishnav li.hover {
position:static;
Ø Then Enter the code given below Before: </b:template-skin>
#suckerfishnav
{
background:#6E9F1F
url("../multi-level-navigation-plugin/images/suckerfish_green.png")
repeat-x;
font-size:18px;
font-family:verdana,sans-serif;
font-weight:bold;
width:100%;
}
#suckerfishnav,
#suckerfishnav ul {
float:left;
list-style:none;
line-height:40px;
padding:0;
border:1px solid #aaa;
margin:0;
width:100%;
}
#suckerfishnav
a {
display:block;
color:#dddddd;
text-decoration:none;
padding:0px 10px;
}
#suckerfishnav
li {
float:left;
padding:0;
}
#suckerfishnav
ul {
position:absolute;
left:-999em;
height:auto;
width:151px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #666666;
}
#suckerfishnav
li li {
width:149px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
font-weight:bold;
font-family:verdana,sans-serif;
}
#suckerfishnav
li li a {
padding:4px 10px;
width:130px;
font-size:12px;
color:#dddddd;
}
#suckerfishnav
li ul ul {
margin:-21px 0 0 150px;
}
#suckerfishnav
li li:hover {
background:#6E9F1F;
}
#suckerfishnav
li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li
li li:hover a, #suckerfishnav li ul li li li:hover a {
color:#dddddd;
}
#suckerfishnav
li:hover a, #suckerfishnav li.sfhover a {
color:#dddddd;
}
#suckerfishnav
li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover
li a, #suckerfishnav li li li li:hover li a {
color:#dddddd;
}
#suckerfishnav
li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul
ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul,
#suckerfishnav li.sfhover ul ul ul ul {
left:-999em;
}
#suckerfishnav
li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul,
#suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul,
#suckerfishnav li li li li.sfhover ul {
left:auto;
background:#444444;
}
#suckerfishnav
li:hover, #suckerfishnav li.sfhover {
background:#9DDD35;
}
Ø Then Enter the Below code for Dropdown Menue Before:
</head>
<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>
<script
src='suckerfish_keyboard.js' type='text/javascript'/>
<!--[if
lte IE 7]>
<script
type="text/javascript"
src="suckerfish_ie.js"></script>
<![endif]-->
No comments:
Post a Comment
“You can't change the past, but you can ruin the present by worrying about the future”