|
|
| (7 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <script type="text/javascript">
| |
| | | | |
| - | jQuery.fn.droppy = function(options) {
| |
| - | options = jQuery.extend({speed: 250}, options || {});
| |
| - | this.each(function() {
| |
| - | var root = this, zIndex = 1000;
| |
| - |
| |
| - | function getSubnav(ele) {
| |
| - | if (ele.nodeName.toLowerCase() == 'li')
| |
| - | {
| |
| - | var subnav = jQuery('> ul', ele);
| |
| - | return subnav.length ? subnav[0] : null;
| |
| - | } else {
| |
| - | return ele;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | function getActuator(ele) {
| |
| - | if (ele.nodeName.toLowerCase() == 'ul')
| |
| - | {
| |
| - | return jQuery(ele).parents('li')[0];
| |
| - | } else {
| |
| - | return ele;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | function hide() {
| |
| - | var subnav = getSubnav(this);
| |
| - | if (!subnav) return;
| |
| - | jQuery.data(subnav, 'cancelHide', false);
| |
| - | setTimeout(function() {
| |
| - | if (!jQuery.data(subnav, 'cancelHide')) {
| |
| - | jQuery(subnav).slideUp(options.speed);
| |
| - | }
| |
| - | }, 500);
| |
| - | if (document.body.filters)
| |
| - | unhideSelect();
| |
| - | }
| |
| - |
| |
| - | function show() {
| |
| - | var subnav = getSubnav(this);
| |
| - | if (!subnav) return;
| |
| - | jQuery.data(subnav, 'cancelHide', true);
| |
| - | jQuery(subnav).css({zIndex: zIndex++}).slideDown(options.speed);
| |
| - | if (this.nodeName.toLowerCase() == 'ul') {
| |
| - | var li = getActuator(this);
| |
| - | jQuery(li).addClass('hover');
| |
| - | jQuery('> a', li).addClass('hover');
| |
| - | }
| |
| - | if (document.body.filters)
| |
| - | hideSelect();
| |
| - | }
| |
| - |
| |
| - | // hide Select
| |
| - | function hideSelect() {
| |
| - | var theIframe = document.getElementsByTagName("select")
| |
| - | for (var count = 0; count < theIframe.length; count++)
| |
| - | {
| |
| - | theIframe[count].style.visibility="hidden";
| |
| - | //theIframe[count].style.zIndex =-1;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | // unhide Select
| |
| - | function unhideSelect() {
| |
| - | var theIframe = document.getElementsByTagName("select")
| |
| - | for (var count = 0; count < theIframe.length; count++)
| |
| - | {
| |
| - | theIframe[count].style.visibility="";
| |
| - | //theIframe[count].style.zIndex =-1;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - | jQuery('ul, li', this).hover(show, hide);
| |
| - | jQuery('li', this).hover(
| |
| - | function() { jQuery(this).addClass('hover'); jQuery('> a', this).addClass('hover'); },
| |
| - | function() { jQuery(this).removeClass('hover'); jQuery('> a', this).removeClass('hover'); }
| |
| - | );
| |
| - |
| |
| - | });
| |
| - |
| |
| - | };
| |
| - | </script>
| |
| - |
| |
| - | <style>
| |
| - | /*---- CROSS BROWSER DROPDOWN MENU ----*/
| |
| - | #gumax-nav { display: block; margin: 0; padding: 0; position: relative; }
| |
| - | #gumax-nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
| |
| - | #gumax-nav a { display: block; font-family: 'Trebuchet MS', Georgia, Verdana, Sans-serif, Arial; font-size: 110%; text-decoration: none; }
| |
| - | #gumax-nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; z-index: 900; }
| |
| - | * html #gumax-nav ul { line-height: 0; } /* IE6 "fix" */
| |
| - | #gumax-nav ul a { zoom: 1; } /* IE6/7 fix */
| |
| - | #gumax-nav ul li { float: none; }
| |
| - | #gumax-nav ul ul { top: 0; }
| |
| - |
| |
| - | /* heading style */
| |
| - | #gumax-nav li a#gumax-nav-heading { font-size: 150%; }
| |
| - | #gumax-nav ul li span { padding: 3px 5px; }
| |
| - |
| |
| - | /* Essentials */
| |
| - | #gumax-nav ul { width: 100%;}
| |
| - | #gumax-nav ul ul { left: 201px; padding-bottom: 20px; }
| |
| - | /* theming */
| |
| - | /*#gumax-nav { height: 29px; background: #333; border-top: 1px solid #c7c7c7; border-bottom: 1px solid #e7e7e7;}/**/
| |
| - | #gumax-nav { height: 45px; background: darkturquoise; } /* HERE I CHANGE COLOR OF DROP DOWN */
| |
| - | #gumax-nav *:hover { background-color: none; }
| |
| - |
| |
| - | #gumax-nav a {
| |
| - | font-weight: bold;
| |
| - | color: #333; /* HERE I CHANGE COLOR OF LETTERS OF DROP DOWN*/
| |
| - | padding: 10px 10px;
| |
| - | line-height: 1;
| |
| - | }
| |
| - |
| |
| - | #gumax-nav li.hover a, #gumax-nav ul li, #gumax-nav ul li a { background-color: transparent; /* drop down background */ }
| |
| - | #gumax-nav ul { top: 30px;} /*drop down Y position*/
| |
| - | #gumax-nav ul li a { font-weight: normal; color: black; padding: 6px 10px; /* white-space: nowrap; /* wrap long item */ }
| |
| - | #gumax-nav a.hover, #gumax-nav ul a.hover { background-color: none; color: #fff; }
| |
| - | #gumax-nav ul { border: none; opacity: 100.0; filter: alpha(opacity=100.0); }
| |
| - | </style>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - | <ul id="gumax-nav">
| |
| - | <li><a id="gumax-nav-heading" href="Home" class=""> Home »</a>
| |
| - | <li><a id="gumax-nav-heading" href="Team" class=""> Team »</a>
| |
| - | </ul>
| |
| - | </body>
| |
| - |
| |
| - |
| |
| - | </html>
| |
| - | /a>
| |
"
