Difference between revisions of "Template:Team:TU Eindhoven/Menu HTML"

Line 1: Line 1:
 
<html>
 
<html>
 
<div id="contentmenu">
 
<div id="contentmenu">
−
    <div id="contentpanel" onclick="toggle_hide()">
+
    <div id="contentpanel" onclick="toggle_hide()">
 
         <img src="http://simpleicon.com/wp-content/uploads/arrow-19.png" id="contentarrow" />
 
         <img src="http://simpleicon.com/wp-content/uploads/arrow-19.png" id="contentarrow" />
−
    </div>
+
    </div>
−
    <div id="contenttable">
+
    <div id="contenttable">
−
    </div>
+
    </div>
 
</div>
 
</div>
  
 
<div id="menuwrapper">
 
<div id="menuwrapper">
−
<div id="menu">
+
    <div id="menu">
−
        <a id="menu1" href="#">Home</a>
+
        <a id="menu1" href="#">Home</a>
−
       
+
−
        <a id="menu2" href="https://2015.igem.org/Team:TU_Eindhoven/Team">Team</a>
+
−
        <a id="menu3" href="https://2015.igem.org/Team:TU_Eindhoven/Project">Project</a>
+
−
        <a id="menu4" href="https://2015.igem.org/Team:TU_Eindhoven/Achievements">Achievements</a>
+
−
        <a id="menu5" href="https://2015.igem.org/Team:TU_Eindhoven/Modeling">Modeling</a>
+
−
<a id="menu6" href="https://2015.igem.org/Team:TU_Eindhoven/Notebook">Notebook</a>
+
−
        <a id="menutwitter" href="https://twitter.com/Eindhoven_iGEM"> <img id="twitter_logo" src="https://g.twimg.com/Twitter_logo_blue.png" /> </a>
+
−
        <a id="menufacebook" href="https://www.facebook.com/EindhoveniGEM"> <img id="facebook_logo" src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png" /> </a>
+
−
 
+
  
−
</div>
+
        <a id="menu2" href="https://2015.igem.org/Team:TU_Eindhoven/Team">Team</a>
 +
        <a id="menu3" href="https://2015.igem.org/Team:TU_Eindhoven/Project">Project</a>
 +
        <a id="menu4" href="https://2015.igem.org/Team:TU_Eindhoven/Achievements">Achievements</a>
 +
        <a id="menu5" href="https://2015.igem.org/Team:TU_Eindhoven/Modeling">Modeling</a>
 +
        <a id="menu6" href="https://2015.igem.org/Team:TU_Eindhoven/Notebook">Notebook</a>
 +
        <a id="menutwitter" href="https://twitter.com/Eindhoven_iGEM"> <img id="twitter_logo" src="https://g.twimg.com/Twitter_logo_blue.png" /> </a>
 +
        <a id="menufacebook" href="https://www.facebook.com/EindhoveniGEM"> <img id="facebook_logo" src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png" /> </a>
 +
 
 +
 
 +
    </div>
 
</div>
 
</div>
 
<div id="submenuwrapper">
 
<div id="submenuwrapper">
−
  <div id="submenu">
+
    <div id="submenu">
−
    <div id="sub2"><a id="sub2a" href="https://2015.igem.org/Team:TU_Eindhoven/Team/Members">Team members</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Supervisors">Supervisors</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Acknowledgements">Acknowledgements</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Sponsors">Sponsors</a></div>
+
        <div id="sub2"><a id="sub2a" href="https://2015.igem.org/Team:TU_Eindhoven/Team/Members">Team members</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Supervisors">Supervisors</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Acknowledgements">Acknowledgements</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Team/Sponsors">Sponsors</a></div>
−
    <div id="sub3"><a id="sub3a" href="https://2015.igem.org/Team:TU_Eindhoven/Project/Background">Background</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Project/Abstract">Abstract</a></div>
+
        <div id="sub3"><a id="sub3a" href="https://2015.igem.org/Team:TU_Eindhoven/Project/Background">Background</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Project/Abstract">Abstract</a></div>
−
    <div id="sub4"><a id="sub4a" href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Safety">Safety</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Main_Results">Main Results</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Future_Prospects">Future Prospects</a></div>
+
        <div id="sub4"><a id="sub4a" href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Safety">Safety</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Main_Results">Main Results</a><a href="https://2015.igem.org/Team:TU_Eindhoven/Achievements/Future_Prospects">Future Prospects</a></div>
−
    <div id="sub5"><a id="sub5a" href="#">Modeling</a></div>
+
        <div id="sub5"><a id="sub5a" href="#">Modeling</a></div>
−
  </div>
+
    </div>
 
</div>
 
</div>
  
−
<div id="body"><div id="container">
+
<div id="body">
−
  <div id="facebook">
+
    <div id="container">
−
  <div class="fb-page" data-href="https://www.facebook.com/EindhoveniGEM" data-width="500" data-height="500" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"></div>
+
        <div id="facebook">
−
  </div>
+
            <div class="fb-page" data-href="https://www.facebook.com/EindhoveniGEM" data-width="500" data-height="500" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"></div>
 +
        </div>
  
  
−
  <div id="twitter">
+
        <div id="twitter">
−
  <a class="twitter-timeline" height="500px" width="500px" href="https://twitter.com/Eindhoven_iGEM" data-widget-id="590096851745054720"></a>
+
            <a class="twitter-timeline" height="500px" width="500px" href="https://twitter.com/Eindhoven_iGEM" data-widget-id="590096851745054720"></a>
−
  </div>
+
        </div>
−
</div>  
+
    </div>
 
</div>
 
</div>
 
<script>
 
<script>
−
$(document).ready(function() {
+
    $(document).ready(function() {
−
var a = 0;
+
        var a = 0;
−
    $("#twitter_logo,#twitter").hover(
+
        $("#twitter_logo,#twitter").hover(
−
        function(){
+
            function() {
−
            $("#twitter").css("z-index", "2");
+
                $("#twitter").css("z-index", "2");
 
             },
 
             },
−
        function(){
+
            function() {
−
            $("#twitter").css("z-index", "-1");
+
                $("#twitter").css("z-index", "-1");
−
        });
+
            });
−
          
+
 
−
    $("#facebook_logo,#facebook").hover(
+
         $("#facebook_logo,#facebook").hover(
−
        function(){
+
            function() {
−
            $("#facebook").css("z-index", "2");
+
                $("#facebook").css("z-index", "2");
 
             },
 
             },
−
        function(){
+
            function() {
−
            $("#facebook").css("z-index", "-1");
+
                $("#facebook").css("z-index", "-1");
−
        });       
+
−
 
+
−
    $("#menu2").hover(
+
−
        function(){
+
−
a = 2;
+
 
             });
 
             });
−
    $("#menu3").hover(
+
 
−
         function(){
+
        $("#menu2").hover(
−
a = 3;
+
            function() {
 +
                a = 2;
 +
            });
 +
         $("#menu3").hover(
 +
            function() {
 +
                a = 3;
 +
            });
 +
        $("#menu4").hover(
 +
            function() {
 +
                a = 4;
 
             });
 
             });
−
    $("#menu4").hover(
+
        $("#menu5").hover(
−
        function(){
+
            function() {
−
a = 4;
+
                a = 5;
 
             });
 
             });
−
    $("#menu5").hover(
 
−
        function(){
 
−
    a = 5;
 
−
            });   
 
−
 
−
    $("#submenuwrapper").hover(
 
−
        function(){
 
−
            $("#submenu").css("height", "45px");
 
−
switch(a){
 
−
case 2:
 
−
$("#menu2").css("color", "#9DC671");
 
−
break;
 
−
case 3:
 
−
$("#menu3").css("color", "#9DC671");
 
−
break;
 
−
case 4:
 
−
$("#menu4").css("color", "#9DC671");
 
−
break;
 
−
case 5:
 
−
$("#menu5").css("color", "#9DC671");
 
−
break;
 
−
}
 
−
},
 
−
function(){
 
−
            $("#submenu").css("height", "0");
 
−
$("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
 
−
});
 
  
−
$("#menu2,#menu3,#menu4,#menu5").hover(
+
        $("#submenuwrapper").hover(
−
function(){
+
            function() {
−
$("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
+
                $("#submenu").css("height", "45px");
−
$("#sub2,#sub3,#sub4,#sub5").css("display", "none");
+
                switch (a) {
−
switch(a){
+
                    case 2:
−
case 2:
+
                        $("#menu2").css("color", "#9DC671");
−
$("#menu2").css("color", "#9DC671");
+
                        break;
−
            $("#sub2").css("display", "block");
+
                    case 3:
−
break;
+
                        $("#menu3").css("color", "#9DC671");
−
case 3:
+
                        break;
−
    $("#menu3").css("color", "#9DC671");
+
                    case 4:
−
            $("#sub3").css("display", "block");
+
                        $("#menu4").css("color", "#9DC671");
−
break;
+
                        break;
−
case 4:
+
                    case 5:
−
    $("#menu4").css("color", "#9DC671");
+
                        $("#menu5").css("color", "#9DC671");
−
            $("#sub4").css("display", "block");
+
                        break;
−
break;
+
                }
−
case 5:
+
            },
−
        $("#menu5").css("color", "#9DC671");
+
            function() {
−
            $("#sub5").css("display", "block");
+
                $("#submenu").css("height", "0");
−
break;
+
                $("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
−
}
+
            });
−
    $("#submenu").css("height", "45px");
+
−
},
+
−
function(){
+
−
$("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
+
−
    $("#submenu").css("height", "0");
+
−
});
+
−
         
+
−
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
+
−
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&amp;version=v2.3";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
+
  
 +
        $("#menu2,#menu3,#menu4,#menu5").hover(
 +
            function() {
 +
                //reset alles en display dan alleen de juiste
 +
                $("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
 +
                $("#sub2,#sub3,#sub4,#sub5").css("display", "none");
 +
                switch (a) {
 +
                    case 2:
 +
                        $("#menu2").css("color", "#9DC671");
 +
                        $("#sub2").css("display", "block");
 +
                        break;
 +
                    case 3:
 +
                        $("#menu3").css("color", "#9DC671");
 +
                        $("#sub3").css("display", "block");
 +
                        break;
 +
                    case 4:
 +
                        $("#menu4").css("color", "#9DC671");
 +
                        $("#sub4").css("display", "block");
 +
                        break;
 +
                    case 5:
 +
                        $("#menu5").css("color", "#9DC671");
 +
                        $("#sub5").css("display", "block");
 +
                        break;
 +
                }
 +
                $("#submenu").css("height", "45px");
 +
            },
 +
            function() {
 +
                $("#menu2,#menu3,#menu4,#menu5").css("color", "#004415");
 +
                $("#submenu").css("height", "0");
 +
            });
  
−
//Content Menu
+
        ! function(d, s, id) {
−
if (sessionStorage.hidden == "" || sessionStorage.hidden == "1"){
+
            var js, fjs = d.getElementsByTagName(s)[0],
−
        direct_hide();
+
                p = /^http:/.test(d.location) ? 'http' : 'https';
−
    }
+
            if (!d.getElementById(id)) {
−
    //Begin waarde
+
                js = d.createElement(s);
−
    $("#testB").slideUp(0);
+
                js.id = id;
−
    document.getElementById("imgB").style.transform = "rotate(0deg)";
+
                js.src = p + "://platform.twitter.com/widgets.js";
 +
                fjs.parentNode.insertBefore(js, fjs);
 +
            }
 +
        }(document, "script", "twitter-wjs");
 +
        (function(d, s, id) {
 +
            var js, fjs = d.getElementsByTagName(s)[0];
 +
            if (d.getElementById(id)) return;
 +
            js = d.createElement(s);
 +
            js.id = id;
 +
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&amp;version=v2.3";
 +
            fjs.parentNode.insertBefore(js, fjs);
 +
        }(document, 'script', 'facebook-jssdk'));
  
−
    //Menu 1
+
 
−
    $("#imgA").click(function(){
+
        //Content Menu
−
         if ($('#testA').is(':visible')){
+
         if (sessionStorage.hidden == "" || sessionStorage.hidden == "1") {
−
            $("#testA").slideUp();
+
             direct_hide();
−
            document.getElementById("imgA").style.transform = "rotate(0deg)";
+
−
        }
+
−
        else{
+
−
             $("#testA").slideDown();
+
−
            document.getElementById("imgA").style.transform = "rotate(90deg)";
+
 
         }
 
         }
 
     });
 
     });
  
−
     //Menu 2
+
     function toggle_hide() {
−
    $("#imgB").click(function(){
+
        document.getElementById("all").style.transition = "transform 0.5s";
−
        if ($('#testB').is(':visible')){
+
        if (sessionStorage.hidden != "1") {
−
             $("#testB").slideUp();
+
            document.getElementById("all").style.transform = "translateX(90%) scale(1,0.4)";
−
             document.getElementById("imgB").style.transform = "rotate(0deg)";
+
            document.getElementById("arrow_menu").style.transform = "rotate(180deg)";
 +
            sessionStorage.hidden = "1";
 +
        } else {
 +
             document.getElementById("all").style.transform = "translateX(0) scale(1,1)";
 +
             document.getElementById("arrow_menu").style.transform = "rotate(0deg)";
 +
            sessionStorage.hidden = "0";
 
         }
 
         }
−
        else{
+
     }
−
            $("#testB").slideDown();
+
−
            document.getElementById("imgB").style.transform = "rotate(90deg)";
+
−
        }
+
−
     });
+
−
});
+
−
function toggle_hide(){
+
−
    document.getElementById("all").style.transition = "transform 0.5s";
+
−
    if (sessionStorage.hidden != "1"){
+
−
    document.getElementById("all").style.transform = "translateX(90%) scale(1,0.4)";
+
−
    document.getElementById("arrow_menu").style.transform = "rotate(180deg)";
+
−
    sessionStorage.hidden = "1";
+
−
}
+
−
else{
+
−
    document.getElementById("all").style.transform = "translateX(0) scale(1,1)";
+
−
    document.getElementById("arrow_menu").style.transform = "rotate(0deg)";
+
−
    sessionStorage.hidden = "0";}
+
−
}
+
−
 
+
−
function direct_hide(){
+
−
    document.getElementById("arrow_menu").style.transform = "rotate(180deg)";
+
−
    document.getElementById("all").style.transform = "translateX(90%) scale(1,0.4)";
+
−
}
+
  
 +
    function direct_hide() {
 +
        document.getElementById("arrow_menu").style.transform = "rotate(180deg)";
 +
        document.getElementById("all").style.transform = "translateX(90%) scale(1,0.4)";
 +
    }
 
</script>
 
</script>
 +
 
</html>
 
</html>

Revision as of 13:52, 21 May 2015