firefox ийн меню г доорх маягаар дурайн хийж болно. адилхан бишээр
style.css
#dropdownmenu
{
display:inline-block;
margin: 0;
padding: 0;
z-index: 99;
}
#dropdownmenu li
{
display:inline;
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}
#dropdownmenu li a
{
display: block;
padding: 8px 20px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none;
font-size:14px;
}
#dropdownmenu li a.hoverClass
{
background: #fffefe;
color: #000;
}
#dropdownmenu ul
{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2;
border-top:none;
box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.4);
z-index:90;
}
#dropdownmenu ul li
{
display:inline;
margin: 0;
padding: 0;
float:none;
}
#dropdownmenu ul li a
{
position: relative;
display: block;
margin: 0;
padding: 6px 10px;
width: auto;
background: #fffefe;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: #2875DE;
border-bottom: 1px solid #efefef;
}
#dropdownmenu ul li a:hover
{
background: #49A3FF;
color: #FFF;
}
simple.html
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="header">
<ul id="dropdownmenu">
<li class="first"><a href="http://www.mozilla.com/firefox/features/">Features</a>
<ul>
<li class="first"><a href="http://www.mozilla.com/firefox/features/">Features</a></li>
<li><a href="http://www.mozilla.com/firefox/security/">Security</a></li>
<li><a href="http://www.mozilla.com/firefox/performance/">Performance</a></li>
<li><a href="http://www.mozilla.com/firefox/customize/">Customization</a></li>
<li><a href="http://www.mozilla.com/firefox/video/">Videos</a></li>
<li class="last"><a href="http://www.mozilla.com/firefox/central/">Tour</a></li>
</ul>
</li>
<li class=""><a href="http://www.mozilla.com/mobile/">Mobile</a>
<ul>
<li class="first"><a href="http://www.mozilla.com/mobile/">Mobile Overview</a></li>
<li><a href="http://www.mozilla.com/mobile/download/">Download</a></li>
<li><a href="http://www.mozilla.com/mobile/features/">Features</a></li>
<li><a href="https://addons.mozilla.org/mobile/?browse=featured">Customize</a></li>
<li><a href="http://www.mozilla.com/mobile/sync/">Sync</a></li>
<li><a href="https://developer.mozilla.org/mobile">Develop</a></li>
<li><a href="http://www.mozilla.com/mobile/getinvolved/">Get Involved</a></li>
<li><a href="http://www.mozilla.com/mobile/faq/">FAQ</a></li>
<li class="last"><a href="https://blog.mozilla.com/mobile/">Blog</a></li>
</ul>
</li>
<li class="current"><a href="https://addons.mozilla.org/">Add-ons</a>
<ul>
<li class="first"><a href="https://addons.mozilla.org/firefox/">Firefox Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/featured/">Featured Add-ons</a></li>
<li><a href="https://addons.mozilla.org/firefox/extensions/">Extensions</a></li>
<li><a href="https://addons.mozilla.org/firefox/themes/">Themes</a></li>
<li><a href="http://www.getpersonas.com/">Personas</a></li>
<li><a href="https://addons.mozilla.org/firefox/search-tools/">Search Tools</a></li>
<li><a href="https://addons.mozilla.org/firefox/language-tools/">Language Support</a></li>
<li><a href="https://addons.mozilla.org/firefox/collections/">Collections</a></li>
<li><a href="https://addons.mozilla.org/mobile/">Mobile Add-ons</a></li>
<li class="last"><a href="https://addons.mozilla.org/firefox/developers/">Developer
Hub</a></li>
</ul>
</li>
<li class=""><a href="http://support.mozilla.com/">Support</a>
<ul>
<li class="first"><a href="http://support.mozilla.com/home/">Firefox Support</a></li>
<li><a href="http://support.mozilla.com/mobile/">Mobile Support</a></li>
<li class="last"><a href="http://www.mozilla.org/support/thunderbird/">Thunderbird Support</a></li>
</ul>
</li>
<li class="last"><a href="http://www.mozilla.com/about/">About</a>
<ul>
<li class="first"><a href="http://www.mozilla.com/about/">About Firefox</a></li>
<li><a href="http://www.mozilla.com/about/participate/">Participate</a></li>
<li><a href="http://www.mozilla.com/press/">Communications</a></li>
<li><a href="http://www.mozilla.com/about/careers.html">Careers</a></li>
<li><a href="http://www.mozilla.com/about/partnerships.html">Partnerships</a></li>
<li><a href="http://www.mozilla.com/about/legal.html">Legal</a></li>
<li><a href="http://www.mozilla.com/about/contact.html">Contact Us</a></li>
<li class="last"><a href="http://blog.mozilla.com/">Blog</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
jQuery.fn.createDropDownMenu = function (options) {
var a, closetimerHandle = 0, settings = jQuery.extend({
timeout: 100,
item: "li",
query: "> li > a",
subQuery: "ul",
hoverClass: "hoverClass"
}, options),
closeMethod = function () { // close
$(a).removeClass(settings.hoverClass).parent(settings.item).find(settings.subQuery)
.css("visibility", "hidden");
},
closetimer = function () { // go close timer
cancelclosetimer();
closetimerHandle = window.setTimeout(closeMethod, settings.timeout);
},
cancelclosetimer = function () { // cancel close timer
if (closetimerHandle) {
window.clearTimeout(closetimerHandle);
closetimerHandle = null;
}
},
aopen = function () {
cancelclosetimer();
closeMethod();
$(this).addClass(settings.hoverClass).parent(settings.item).find(settings.subQuery)
.mouseover(cancelclosetimer)
.mouseout(closetimer)
.css("visibility", "visible");
};
a = $(this).find(settings.query);
$(a).mouseover(aopen).mouseout(closetimer);
};
$(function () {
$("#dropdownmenu").createDropDownMenu();
});
</script>
</div>
</body>
</html>
No comments:
Post a Comment