Simple MenuBar - Down List, slides on mouseenter, hides on mouseleave.
JS.js file:
(function ($) {
$.fn.MenuBar = function(options) {
var options = $.extend(variables, options);
var variables = {// default variable
speed : 2000
}
var $this = $(this);
var opts = options;
$this.children("ul").addClass("menudown");
var list = $this.find("ul.menudown");// all div
$this.find("ul.menudown>li:first-child").addClass("firstchild");
var firstchild= list.find(".firstchild");// first child
$this.find("ul.menudown>li").not($this.find("ul.menudown>li:first-child")).addClass("restchildren");
var restchildren = list.find(".restchildren");// rest children
/* If mouse is entered on first child slide rest children, bind mouseleave event for all div*/
firstchild.mouseenter(function() {
restchildren.animate({
height:restchildren.find("ul").height()+8,
},opts.speed, "linear");
$this.bind({
* If mouseleave on rest children hide rest children, unbind mouseout for all div*/
mouseleave: function(event) {
restchildren.animate({
height:0,
},opts.speed, "linear");
$this.unbind(event)
}
});
event.preventDefault();
})
};
})(jQuery);
CSS.css file:
@charset "utf-8";
body {font-family:"Arial Black", Gadget, sans-serif; font-size:14px;width:60%;margin:0 auto;background-color: #CCC;}
#menubar a {font-family:Verdana, Geneva, sans-serif;font-size:100%;font-weight:bold;text-decoration:none;}
#menubar {position: absolute;left:46px;top: 0px;width:150px;height:58px;overflow:visible;opacity:0.7;filter:alpha(opacity=70);}
#menubar .menudown {position:relative;list-style-type:none;display:block;margin:0;padding:0;background:transparent;color:#fff;cursor:pointer;}
#menubar .restchildren ul {width:auto;height:auto;list-style-type:none;margin:0;padding:0;background:#fff;}
#menubar .restchildren ul li {display:block;padding:0;margin:0;background: #000000; }
#menubar .restchildren ul li a:hover {background:#C0C;color:#fff; border:double}
#menubar .restchildren {width:100%;border:none;position: absolute;height:0;overflow:hidden;margin-top: 0;margin-bottom: 0;}
#menubar .firstchild{width:auto;padding:0; }
#menubar .firstchild a{padding:10px 8px;display:block;color:#fff; background-color:#F06 ; border:1px solid #a1a1a1;
border-radius:5px;}/*some radius border for first child */
#menubar .menudown ul li a {width:auto;text-decoration:none;color:#fff;display:block;margin:0;padding:10px 8px;}
HTML.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" media="all" href="CSS.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="JS.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menubar").MenuBar();/*Calling the function throu ID div*/
});
</script>
</head>
<body>
<div id="menubar">
<ul>
<li><a href="http://bellacarta.free.fr" target="_blank">Gender</a></li>
<li>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Male" target="_blank">Male</a></li>
<li><a href="http://en.wikipedia.org/wiki/Female" target="_blank">Female</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
the result:
JS.js file:
(function ($) {
$.fn.MenuBar = function(options) {
var options = $.extend(variables, options);
var variables = {// default variable
speed : 2000
}
var $this = $(this);
var opts = options;
$this.children("ul").addClass("menudown");
var list = $this.find("ul.menudown");// all div
$this.find("ul.menudown>li:first-child").addClass("firstchild");
var firstchild= list.find(".firstchild");// first child
$this.find("ul.menudown>li").not($this.find("ul.menudown>li:first-child")).addClass("restchildren");
var restchildren = list.find(".restchildren");// rest children
/* If mouse is entered on first child slide rest children, bind mouseleave event for all div*/
firstchild.mouseenter(function() {
restchildren.animate({
height:restchildren.find("ul").height()+8,
},opts.speed, "linear");
$this.bind({
* If mouseleave on rest children hide rest children, unbind mouseout for all div*/
mouseleave: function(event) {
restchildren.animate({
height:0,
},opts.speed, "linear");
$this.unbind(event)
}
});
event.preventDefault();
})
};
})(jQuery);
CSS.css file:
@charset "utf-8";
body {font-family:"Arial Black", Gadget, sans-serif; font-size:14px;width:60%;margin:0 auto;background-color: #CCC;}
#menubar a {font-family:Verdana, Geneva, sans-serif;font-size:100%;font-weight:bold;text-decoration:none;}
#menubar {position: absolute;left:46px;top: 0px;width:150px;height:58px;overflow:visible;opacity:0.7;filter:alpha(opacity=70);}
#menubar .menudown {position:relative;list-style-type:none;display:block;margin:0;padding:0;background:transparent;color:#fff;cursor:pointer;}
#menubar .restchildren ul {width:auto;height:auto;list-style-type:none;margin:0;padding:0;background:#fff;}
#menubar .restchildren ul li {display:block;padding:0;margin:0;background: #000000; }
#menubar .restchildren ul li a:hover {background:#C0C;color:#fff; border:double}
#menubar .restchildren {width:100%;border:none;position: absolute;height:0;overflow:hidden;margin-top: 0;margin-bottom: 0;}
#menubar .firstchild{width:auto;padding:0; }
#menubar .firstchild a{padding:10px 8px;display:block;color:#fff; background-color:#F06 ; border:1px solid #a1a1a1;
border-radius:5px;}/*some radius border for first child */
#menubar .menudown ul li a {width:auto;text-decoration:none;color:#fff;display:block;margin:0;padding:10px 8px;}
HTML.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" media="all" href="CSS.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="JS.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menubar").MenuBar();/*Calling the function throu ID div*/
});
</script>
</head>
<body>
<div id="menubar">
<ul>
<li><a href="http://bellacarta.free.fr" target="_blank">Gender</a></li>
<li>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Male" target="_blank">Male</a></li>
<li><a href="http://en.wikipedia.org/wiki/Female" target="_blank">Female</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
the result:
 |
| Menu bar- jquery |
No comments:
Post a Comment
Note: only a member of this blog may post a comment.