Difference between revisions of "Template:Team:TU Eindhoven/Menu HTML"
Jan Willem (Talk | contribs) |
Jan Willem (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<div id="contentmenu"> | <div id="contentmenu"> | ||
− | + | <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 id="contenttable"> | |
− | + | </div> | |
</div> | </div> | ||
<div id="menuwrapper"> | <div id="menuwrapper"> | ||
− | <div id="menu"> | + | <div id="menu"> |
− | + | <a id="menu1" href="#">Home</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="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="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> | |
</div> | </div> | ||
− | <div id="body"><div id="container"> | + | <div id="body"> |
− | + | <div id="container"> | |
− | + | <div id="facebook"> | |
− | + | <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"> | |
− | + | <a class="twitter-timeline" height="500px" width="500px" href="https://twitter.com/Eindhoven_iGEM" data-widget-id="590096851745054720"></a> | |
− | + | </div> | |
− | + | </div> | |
</div> | </div> | ||
<script> | <script> | ||
− | $(document).ready(function() { | + | $(document).ready(function() { |
− | var a = 0; | + | var a = 0; |
− | + | $("#twitter_logo,#twitter").hover( | |
− | + | function() { | |
− | + | $("#twitter").css("z-index", "2"); | |
}, | }, | ||
− | + | function() { | |
− | + | $("#twitter").css("z-index", "-1"); | |
− | + | }); | |
− | + | ||
− | + | $("#facebook_logo,#facebook").hover( | |
− | + | function() { | |
− | + | $("#facebook").css("z-index", "2"); | |
}, | }, | ||
− | + | function() { | |
− | + | $("#facebook").css("z-index", "-1"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}); | }); | ||
− | + | ||
− | function(){ | + | $("#menu2").hover( |
− | + | function() { | |
+ | a = 2; | ||
+ | }); | ||
+ | $("#menu3").hover( | ||
+ | function() { | ||
+ | a = 3; | ||
+ | }); | ||
+ | $("#menu4").hover( | ||
+ | function() { | ||
+ | a = 4; | ||
}); | }); | ||
− | + | $("#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( | ||
+ | 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"); | ||
+ | }); | ||
− | // | + | ! function(d, s, id) { |
− | if ( | + | 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&version=v2.3"; | ||
+ | fjs.parentNode.insertBefore(js, fjs); | ||
+ | }(document, 'script', 'facebook-jssdk')); | ||
− | + | ||
− | + | //Content Menu | |
− | if ( | + | if (sessionStorage.hidden == "" || sessionStorage.hidden == "1") { |
− | + | direct_hide(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
}); | }); | ||
− | + | 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(" | + | 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)"; | ||
+ | } | ||
</script> | </script> | ||
+ | |||
</html> | </html> |
Revision as of 13:52, 21 May 2015