Header

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<style>
-
<script type="text/javascript">
+
/* demo page styles */
 +
body {
 +
    background:#eee;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
.example {
 +
    background:#fff url(../images/clouds-in-blue-sky.jpg);
 +
    width:770px;
 +
    height:570px;
 +
    border:1px #000 solid;
 +
    margin:20px auto;
 +
    padding:15px;
 +
    border-radius:3px;
 +
    -moz-border-radius:3px;
 +
    -webkit-border-radius:3px;
 +
}
-
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
+
/* main menu styles */
-
function hideSelect() {
+
#nav {
-
var theIframe = document.getElementsByTagName("select")
+
    display:inline-block;
-
for (var count = 0; count < theIframe.length; count++)
+
    width:100%;
-
{
+
    margin:0px auto;
-
theIframe[count].style.visibility="hidden";
+
    padding:0;
-
//theIframe[count].style.zIndex =-1;
+
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;
-
}
+
-
}
+
-
// unhide Select
+
    border-radius:10px; /*some css3*/
-
function unhideSelect() {
+
    -moz-border-radius:10px;
-
var theIframe = document.getElementsByTagName("select")
+
    -webkit-border-radius:10px;
-
for (var count = 0; count < theIframe.length; count++)
+
    box-shadow:0 2px 2px rgba(0,0,0, .5);
-
{
+
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-
theIframe[count].style.visibility="";
+
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
-
//theIframe[count].style.zIndex =-1;
+
}
-
}
+
#nav li {
-
}
+
    margin:10px;
 +
    float:left;
 +
    position:relative;
 +
    list-style:none;
 +
}
 +
#nav a {
 +
    font-weight:bold;
 +
    color:#e7e5e5;
 +
    text-decoration:none;
 +
    display:block;
 +
    padding:8px 20px;
 +
    border-radius:10px; /*some css3*/
 +
    -moz-border-radius:10px;
 +
    -webkit-border-radius:10px;
 +
    text-shadow:0 2px 2px rgba(0,0,0, .7);
 +
}
-
    jQuery('ul, li', this).hover(show, hide);
+
/* selected menu element */
-
    jQuery('li', this).hover(
+
#nav .current a, #nav li:hover > a {
-
      function() { jQuery(this).addClass('hover'); jQuery('> a', this).addClass('hover'); },
+
    background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
-
      function() { jQuery(this).removeClass('hover'); jQuery('> a', this).removeClass('hover'); }
+
     color:#000;
-
     );
+
     border-top:1px solid #f8f8f8;
-
      
+
-
  });
+
-
 
+
-
};
+
-
</script>
+
-
<style>
+
    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-
/*---- CROSS BROWSER DROPDOWN MENU ----*/
+
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-
#gumax-nav { display: block; margin: 0; padding: 0; position: relative; }
+
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
-
#gumax-nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
+
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
-
#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 */
+
/* sublevels */
-
#gumax-nav li a#gumax-nav-heading { font-size: 150%; }
+
#nav ul li:hover a, #nav li:hover li a {
-
#gumax-nav ul li span { padding: 3px 5px; }
+
    background:none;
 +
    border:none;
 +
    color:#000;
 +
}
 +
#nav ul li a:hover {
 +
    background:#335599 url(../images/bg.png) repeat-x 0 -100px;
 +
    color:#fff;
-
/* Essentials */
+
    border-radius:10px; /*some css3*/
-
#gumax-nav ul { width: 100%;}
+
    -moz-border-radius:10px;
-
#gumax-nav ul ul { left: 201px; padding-bottom: 20px; }
+
    -webkit-border-radius:10px;
-
/* theming */
+
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
-
/*#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 {
+
#nav ul li:first-child > a {
-
font-weight: bold;
+
    -moz-border-radius-topleft:10px; /*some css3*/
-
color: #333; /* HERE I CHANGE COLOR OF LETTERS OF DROP DOWN*/
+
    -moz-border-radius-topright:10px;
-
padding: 10px 10px;
+
    -webkit-border-top-left-radius:10px;
-
line-height: 1;
+
    -webkit-border-top-right-radius:10px;
-
}
+
}
 +
#nav ul li:last-child > a {
 +
    -moz-border-radius-bottomleft:10px; /*some css3*/
 +
    -moz-border-radius-bottomright:10px;
 +
    -webkit-border-bottom-left-radius:10px;
 +
    -webkit-border-bottom-right-radius:10px;
 +
}
-
#gumax-nav li.hover a, #gumax-nav ul li, #gumax-nav ul li a { background-color: transparent; /* drop down background */ }
+
/* drop down */
-
#gumax-nav ul { top: 30px;} /*drop down Y position*/
+
#nav li:hover > ul {
-
#gumax-nav ul li a { font-weight: normal; color: black; padding: 6px 10px; /* white-space: nowrap; /* wrap long item */ }
+
    opacity:1;
-
#gumax-nav a.hover, #gumax-nav ul a.hover { background-color: none; color: #fff; }
+
    visibility:visible;
-
#gumax-nav ul { border: none; opacity: 100.0; filter: alpha(opacity=100.0); }
+
}
 +
#nav ul {
 +
    opacity:0;
 +
    visibility:hidden;
 +
    padding:0;
 +
    width:175px;
 +
    position:absolute;
 +
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
 +
    border:1px solid #7788aa;
 +
 
 +
    border-radius:10px; /*some css3*/
 +
    -moz-border-radius:10px;
 +
    -webkit-border-radius:10px;
 +
    box-shadow:0 2px 2px rgba(0,0,0, .5);
 +
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
 +
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
 +
 
 +
    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
 +
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
 +
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
 +
    transition:opacity .25s linear, visibility .1s linear .1s;
 +
}
 +
#nav ul li {
 +
    float:none;
 +
    margin:0;
 +
}
 +
#nav ul a {
 +
    font-weight:normal;
 +
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
 +
}
 +
#nav ul ul {
 +
    left:160px;
 +
    top:0px;
 +
}
</style>
</style>
-
</head>
 
<body>
<body>
-
<ul id="gumax-nav">
+
   
-
  <li><a id="gumax-nav-heading" href="Home" class=""> Home »</a>
+
<div class="example">
-
  <li><a id="gumax-nav-heading" href="Team" class=""> Team »</a>
+
    <ul id="nav">
-
</ul>
+
        <li class="current"><a href="http://www.script-tutorials.com/">Home</a></li>
 +
        <li><a href="http://www.script-tutorials.com/">Tutorials</a>
 +
            <ul>
 +
                <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
 +
                <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a>
 +
                    <ul>
 +
                        <li><a href="http://www.script-tutorials.com/category/jquery/">jQuery</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/category/javascript/">JS</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
 +
                <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
 +
                <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
 +
                <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="http://www.script-tutorials.com/category/resources/">Resources</a>
 +
            <ul>
 +
                <li><a href="http://www.script-tutorials.com/category/resources/">By category</a>
 +
                    <ul>
 +
                        <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li><a href="http://www.script-tutorials.com/category/resources/">By tag name</a>
 +
                    <ul>
 +
                        <li><a href="http://www.script-tutorials.com/tag/captcha/">captcha</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/tag/gallery/">gallery</a></li>
 +
                        <li><a href="http://www.script-tutorials.com/tag/animation/">animation</a></li>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="http://www.script-tutorials.com/about/">About</a></li>
 +
        <li><a href="http://www.script-tutorials.com/creating-css3-dropdown-menu/">Go Back To The Tutorial</a></li>
 +
    </ul>
 +
</div>
</body>
</body>
</html>
</html>
-
/a>
 

Revision as of 14:32, 17 April 2013

Retrieved from "http://2013.igem.org/Header"