This article illustrates the way jquery implements a dynamic sliding menu that can be used for blogs. Share to everyone for your reference. Specifically as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery Sliding Menu Plugin </title>
<script type= "Text/javascript" src= "Js/jquery1.3.2.js" ></script>
<script type= "Text/javascript" >
(function ($) {
$.fn.extend ({
Tagdrop:function (options) {
var defaults = {
Tagpaddingtop: ' 90px ',
Tagdefaultpaddingtop: ' 30px ',
bgcolor: ' #B1CCED ',
Bgmovercolor: ' #7FB0F0 ',
TextColor: ' #e0e0e0 ',
Textdefaultcolor: ' #fff '
};
var options = $.extend (defaults, options);
Return This.each (function () {
var obj = $ (this);
var Li_items = $ ("li", obj);
$ ("li", obj). css (' Background-color ', options.bgcolor);
Li_items.mouseover (function () {
$ (this). Animate ({PaddingTop:options.tagPaddingTop}, 300);
$ (this). CSS (' Background-color ', options.bgmovercolor);
$ (this). CSS (' color ', options.textcolor);
}). mouseout (function () {
$ (this). Animate ({PaddingTop:options.tagDefaultPaddingTop}, 500);
$ ("Li", $ (this). Parent ()). CSS (' Background-color ', options.bgcolor);
$ ("Li", $ (this). Parent ()). CSS (' color ', options.textdefaultcolor);
});
});
}
});
}) (JQuery);
</script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ('. Menu '). Tagdrop ({tagpaddingtop: ' 60px ', bgcolor: ' #B1CCED ', Bgmovercolor: ' #7FB0F0 ', TextColor: ' #e0e0e0 '});
});
</script>
<style>
Body {
margin:0;
padding:0;
}
#nav li {margin:0; padding:0;display:inline;list-style-type:none;font-size:12px;}
#nav A:link, #nav a:visited {
}
#nav a:hover {color: #fff; Background: #FF6A00;}
#nav a:visited.active, #nav a:link.active {background-color: #fff; color: #FF6A00;}
. menu {
List-style:none;
margin:0;
Float:right;
}
. menu Li {
Float:left;
margin:0 Auto;
Cursor:pointer;
height:30px;
padding:30px 5px 5px 5px;
margin:0px 3px 0px 3px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
-moz-box-shadow:0 1px 3px Rgba (0,0,0,0.5);
-webkit-box-shadow:0 1px 3px Rgba (0,0,0,0.5);
Color: #FFF;
text-shadow:0 -1px 1px rgba (0,0,0,0.25);
font-family: "Lucida Grande", Lucida,verdana,sans-serif;
font-size:13px;
Font-weight:bold;
Text-transform:uppercase;
}
</style>
<body>
<ul class= "Menu" >
<li>about us</li>
<li>Contacts</li>
<li>Others</li>
<li>Products</li>
<li>Portfolio</li>
<li>Testemonies</li>
</ul>
</body>
I hope this article will help you with your jquery programming.
