Team:Amsterdam/Header2

From 2011.igem.org

(Difference between revisions)
Line 15: Line 15:
<body>
<body>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
    $('#menu li').hover(function(){
 +
            $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
 +
            // $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); // effect 2
 +
        },function(){
 +
            $(this).find('ul:first').css({visibility: "hidden"});
 +
        });
 +
});
 +
</script>
 +
<img src="https://static.igem.org/mediawiki/2011/4/47/Ams11_bg.jpg" class="bg">
<img src="https://static.igem.org/mediawiki/2011/4/47/Ams11_bg.jpg" class="bg">
<meta name="google-site-verification" content="nPLl5qsk9bUWSYj0-Tx9VmSwB8HiyosMyUmyvnQ0kj4" />
<meta name="google-site-verification" content="nPLl5qsk9bUWSYj0-Tx9VmSwB8HiyosMyUmyvnQ0kj4" />
Line 38: Line 49:
****************If you have any questions, you can always contact igemamsterdam@gmail.com*****************
****************If you have any questions, you can always contact igemamsterdam@gmail.com*****************
*/
*/
 +
#menu {width:975px; text-align:center; margin:0 auto;background-color:white;margin-top:10px;}
 +
 +
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:white;}
 +
#menu ul {display:inline-block;}
 +
 +
#menu li {margin:0; padding:0; list-style:none;}
 +
#menu li {display:inline-block; display:inline;}
 +
#menu ul ul {position:absolute; left:-9999px;}
 +
 +
#menu ul.level1 {margin:0 auto;}
 +
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
 +
 +
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
 +
 +
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}
 +
#menu ul.level1 li.level1-li a.level1-a {float:left;}
 +
 +
#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}
 +
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}
 +
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
 +
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}
 +
 +
 +
#menu a:hover ul {left:0; top:23px;}
 +
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
 +
 +
#menu li.left ul a {text-align:right;}
 +
 +
 +
#menu a:hover a:hover ul,
 +
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
 +
#menu li.left a:hover a:hover ul,
 +
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
 +
 +
#menu a:hover ul ul,
 +
#menu a:hover a:hover ul ul {left:-9999px;}
 +
#menu li.left a:hover ul ul,
 +
#menu li.left a:hover a:hover ul ul {left:-9999px;}
 +
 +
#menu li a.drop {background:transparent url(../images/white-down.gif) no-repeat right center;}
 +
#menu li a.fly {background:transparent url(../images/white-right.gif) no-repeat right center;}
 +
#menu li.left ul a.fly {background:transparent url(../images/white-left.gif) no-repeat left center;}
 +
 +
#menu li a:hover,
 +
#menu li a.fly:hover {color:red; background-color-white;}
 +
#menu li:hover > a,
 +
#menu ul li:hover > a.fly {color:red; background-color:white;}
 +
 +
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}
 +
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}
 +
 +
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
 +
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}
#content{width:975px;}
#content{width:975px;}
#contentgrid{width:943px;background-color:#FFF;margin-bottom:-5px;padding-left:15px;padding-right:15px;text-align:justify;}
#contentgrid{width:943px;background-color:#FFF;margin-bottom:-5px;padding-left:15px;padding-right:15px;text-align:justify;}
Line 44: Line 108:
#footer-box{max-width:953px;}
#footer-box{max-width:953px;}
#globalWrapper{background-color:#b9e5ff;}
#globalWrapper{background-color:#b9e5ff;}
-
#headerimage{width:973px;margin-top:-18px;}
+
#headerimage{width:975px;margin-top:-18px;}
-
#headerimage img{max-width:973px;}
+
#headerimage img{max-width:975px;}
-
#headermenu{text-align:center;width:973px;height:22px; background-color: #ffffff; margin-bottom:12px;}
+
#headermenu{text-align:center;width:975px;height:22px; background-color: #ffffff; margin-bottom:12px;}
#headermenu a{display:block;font:normal 11px verdana,arial,sans-serif;color:#444;line-height:22px;text-decoration:none;padding:0 20px;}
#headermenu a{display:block;font:normal 11px verdana,arial,sans-serif;color:#444;line-height:22px;text-decoration:none;padding:0 20px;}
#headermenu a.down b{float:left; no-repeat right top;cursor:pointer;padding:0 20px 0 0;}
#headermenu a.down b{float:left; no-repeat right top;cursor:pointer;padding:0 20px 0 0;}
Line 106: Line 170:
<img src = "https://static.igem.org/mediawiki/2011/b/bc/Igemamsterdam2011.gif">
<img src = "https://static.igem.org/mediawiki/2011/b/bc/Igemamsterdam2011.gif">
</div>
</div>
 +
<div id="menu">
 +
        <ul class="level1">
 +
            <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
 +
            <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                <ul class="level2">
 +
                    <li><a href="#url">Email</a></li>
 +
                    <li><a href="#url">Telephone</a></li>
 +
                    <li><a href="#url">Online Form</a></li>
 +
                    <li><a href="#url">Snail Mail Address</a><b></b></li>
 +
                </ul>
 +
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
            </li>
 +
            <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                <ul class="level2">
 +
                    <li><a href="#url">Ski Hire Facilities</a></li>
 +
                    <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                        <ul class="level3">
 +
                            <li><a href="#url">Beginners Slopes</a></li>
 +
                            <li><a href="#url">Intermediate Slopes</a></li>
 +
                            <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                                <ul class="level4">
 +
                                    <li><a href="#url">Local</a></li>
 +
 +
                                    <li><a href="#url">Nearby</a></li>
 +
                                    <li><a href="#url">With instructor</a></li>
 +
                                    <li><a href="#url">Snow boarding</a><b></b></li>
 +
                                </ul>
 +
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                            </li>
 +
                            <li><a href="#url">Expert</a></li>
 +
                        </ul>
 +
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                    </li>
 +
                    <li><a href="#url">Night Life</a></li>
 +
                    <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                        <ul class="level3">
 +
                            <li><a href="#url">Snow Hotel</a></li>
 +
 +
                            <li><a href="#url">The Snowman</a></li>
 +
                            <li><a href="#url">Ice Cavern</a></li>
 +
                            <li><a href="#url">Ski Inn</a><b></b></li>
 +
                        </ul>
 +
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                    </li>
 +
                    <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                        <ul class="level3">
 +
                            <li><a href="#url">From Airport</a></li>
 +
                            <li><a href="#url">In Resort</a></li>
 +
                            <li><a href="#url">Multiple Resorts</a><b></b></li>
 +
                        </ul>
 +
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                    </li>
 +
                </ul>
 +
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
            </li>
 +
            <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                <ul class="level2">
 +
                    <li><a href="#url">Where to go</a></li>
 +
 +
                    <li><a href="#url">What to do</a></li>
 +
                    <li><a href="#url">Places of interest</a></li>
 +
                    <li><a href="#url">National parks & Museums</a><b></b></li>
 +
                </ul>
 +
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
            </li>
 +
            <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                <ul class="level2">
 +
                    <li><a href="#url">Money Exchange</a></li>
 +
                    <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                        <ul class="level3">
 +
                            <li><a href="#url">Lift Passes</a></li>
 +
                            <li><a href="#url">Insurance</a></li>
 +
                            <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                                <ul class="level4">
 +
                                    <li><a href="#url">Boots</a></li>
 +
                                    <li><a href="#url">Skis</a></li>
 +
                                    <li><a href="#url">Ski Wear</a></li>
 +
                                    <li><a href="#url">Goggles</a><b></b></li>
 +
                                </ul>
 +
                            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                            </li>
 +
                            <li><a href="#url">Ski Schools</a></li>
 +
                            <li><a href="#url">Snow Report</a></li>
 +
                        </ul>
 +
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                    </li>
 +
                    <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
 +
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
 +
                        <ul class="level3">
 +
                            <li><a href="#url">Austrian</a></li>
 +
                            <li><a href="#url">German</a></li>
 +
                            <li><a href="#url">French</a></li>
 +
                            <li><a href="#url">English</a><b></b></li>
 +
                        </ul>
 +
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
                    </li>
 +
                    <li><a href="#url">Short Breaks</a></li>
 +
                </ul>
 +
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 +
            </li>
 +
            <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
 +
        </ul>
 +
    </div>
 +
    <div style="clear:both"></div>
<div id="contentgrid">
<div id="contentgrid">
</html>
</html>

Revision as of 09:43, 5 September 2011