This Tutorial will show you How To Add Beautiful/Nice vertical fixed Slide Out navigation menu using jQuery and CSS To Blogger. This menu is partial hidden and will be visible only when you hover your mouse over it.
SPECIAL THANX TO ARTSHEORAN TEAM FOR Help..
Demo/Preview Images And Link Given Below:
Steps/procedure To Follow To Add this Widget TO your Blogger:
- Go to Blogger Dashboard --> Design --> Edit HTML
- Backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Find the code shown below using [ctrl+F]
]]></b:skin>
- Now Paste the Code shown below just above/before it
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
background-image: url(http://4.bp.blogspot.com/-ZWHmqKVWw-4/T5adP49ZqUI/AAAAAAAAA4E/QA-Z-pCsoME/s1600/home.png);
}
ul#navigation .about a {
background-image: url(http://2.bp.blogspot.com/-7xv_kHaMWDk/T5adQpDSE0I/AAAAAAAAA4M/OhNkgLEnbvw/s1600/idcard.png);
}
ul#navigation .search a {
background-image: url(http://4.bp.blogspot.com/-yMVKk5O3uWk/T5adUYsvmXI/AAAAAAAAA4s/fUoCnxHVkIk/s1600/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://2.bp.blogspot.com/-xel5YPcktJg/T5adRKXclnI/AAAAAAAAA4Y/I_o3QZZn1wA/s1600/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(http://1.bp.blogspot.com/-MndXeDPjRL8/T5adTrza4vI/AAAAAAAAA4k/UCDeLmrgnZE/s1600/rss.png);
}
ul#navigation .photos a {
background-image: url(http://3.bp.blogspot.com/-LnoSTyruZKM/T5adPPq4FqI/AAAAAAAAA4A/HFNnyG80CBU/s1600/camera.png);
}
ul#navigation .contact a {
background-image: url(http://3.bp.blogspot.com/-3Y6wAMo7Exc/T5adSUyD5bI/AAAAAAAAA4g/TVK9INPVWM0/s1600/mail.png);
}
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
background-image: url(http://4.bp.blogspot.com/-ZWHmqKVWw-4/T5adP49ZqUI/AAAAAAAAA4E/QA-Z-pCsoME/s1600/home.png);
}
ul#navigation .about a {
background-image: url(http://2.bp.blogspot.com/-7xv_kHaMWDk/T5adQpDSE0I/AAAAAAAAA4M/OhNkgLEnbvw/s1600/idcard.png);
}
ul#navigation .search a {
background-image: url(http://4.bp.blogspot.com/-yMVKk5O3uWk/T5adUYsvmXI/AAAAAAAAA4s/fUoCnxHVkIk/s1600/search.png);
}
ul#navigation .podcasts a {
background-image: url(http://2.bp.blogspot.com/-xel5YPcktJg/T5adRKXclnI/AAAAAAAAA4Y/I_o3QZZn1wA/s1600/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(http://1.bp.blogspot.com/-MndXeDPjRL8/T5adTrza4vI/AAAAAAAAA4k/UCDeLmrgnZE/s1600/rss.png);
}
ul#navigation .photos a {
background-image: url(http://3.bp.blogspot.com/-LnoSTyruZKM/T5adPPq4FqI/AAAAAAAAA4A/HFNnyG80CBU/s1600/camera.png);
}
ul#navigation .contact a {
background-image: url(http://3.bp.blogspot.com/-3Y6wAMo7Exc/T5adSUyD5bI/AAAAAAAAA4g/TVK9INPVWM0/s1600/mail.png);
}
- Now Find the code shown below using [ctrl+F]
</head>
<body>
<body>
- Now Replace it with the code shown below
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">
<li class="home"><a href="" title="Home"></a></li>
<li class="about"><a href="" title="About"></a></li>
<li class="search"><a href="" title="Search"></a></li>
<li class="photos"><a href="" title="Photos"></a></li>
<li class="rssfeed"><a href="" title="Rss Feed"></a></li>
<li class="podcasts"><a href="" title="Podcasts"></a></li>
<li class="contact"><a href="" title="Contact"></a></li>
</ul>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">
<li class="home"><a href="" title="Home"></a></li>
<li class="about"><a href="" title="About"></a></li>
<li class="search"><a href="" title="Search"></a></li>
<li class="photos"><a href="" title="Photos"></a></li>
<li class="rssfeed"><a href="" title="Rss Feed"></a></li>
<li class="podcasts"><a href="" title="Podcasts"></a></li>
<li class="contact"><a href="" title="Contact"></a></li>
</ul>
- Now save your template
Keep Visiting for more new tips-tricks and news about blogger.
leave your valuable comments if any problem in installation.or any query/help/suggestion or your views about this post.
0 comments:
Post a Comment