Template:Team:TU Eindhoven/Menu Script
var vergroot = 0; var steps = 13; var afknot = 50; var amount = 6; var radius = 170; var width = 270; var height = 0.5 * Math.sqrt(3) * width; var image = ['f/f0/TU_Eindhoven_menu_policypractice.png', '5/53/TU_Eindhoven_menu_collaborations.png', '1/14/TU_Eindhoven_menu_sponsors.png', 'b/bb/TU_Eindhoven_menu_home.png', '5/56/TU_Eindhoven_menu_team.png', '1/1a/TU_Eindhoven_menu_project.png']; var title = ['Policy Practices', 'Collaboratons', 'Sponsors', 'Home', 'Team', 'Project']; var links = ['/Policy_Practices/Educational_outreach', '/Collaborations/CloningGuide', '/Team/Sponsors', '', '/Team/Members', '/Project/Abstract']; $(document).ready(function() { //background $("
").appendTo("body");
$('').appendTo("#background");
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");
});
$("#menu1").hover(
function() {
a = 1;
});
$("#menu2").hover(
function() {
a = 2;
});
$("#menu3").hover(
function() {
a = 3;
});
$("#menu4").hover(
function() {
a = 4;
});
$("#menu5").hover(
function() {
a = 5;
});
$("#menu6").hover(
function() {
a = 6;
});
$("#submenuwrapper").hover(
function() {
switch (a) {
case 2:
$("#menu2").css("color", "#9DC671");
$("#submenu").css("height", "60px");
break;
case 3:
$("#menu3").css("color", "#9DC671");
$("#submenu").css("height", "60px");
break;
case 4:
$("#menu4").css("color", "#9DC671");
$("#submenu").css("height", "60px");
break;
case 5:
$("#menu5").css("color", "#9DC671");
$("#submenu").css("height", "60px");
break;
}
},
function() {
$("#submenu").css("height", "0");
$("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415");
});
$("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").hover(
function() {
//reset alles en display dan alleen de juiste
$("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415");
$("#sub2,#sub3,#sub4,#sub5").css("display", "none");
switch (a) {
case 1:
$("#menu1").css("color", "#9DC671");
break;
case 2:
$("#menu2").css("color", "#9DC671");
$("#sub2").css("display", "block");
$("#submenu").css("height", "60px");
break;
case 3:
$("#menu3").css("color", "#9DC671");
$("#sub3").css("display", "block");
$("#submenu").css("height", "60px");
break;
case 4:
$("#menu4").css("color", "#9DC671");
$("#sub4").css("display", "block");
$("#submenu").css("height", "60px");
break;
case 5:
$("#menu5").css("color", "#9DC671");
$("#sub5").css("display", "block");
$("#submenu").css("height", "60px");
break;
case 6:
$("#menu6").css("color", "#9DC671");
break;
}
},
function() {
$("#menu1,#menu2,#menu3,#menu4,#menu5,#menu6").css("color", "#004415");
$("#submenu").css("height", "0");
});
//Hexagon
for (j = 1; j <= amount; j++) {
$('').appendTo($("#hexagonwrapper"));
$(' 
').appendTo($("#hexagon" + j.toString()));
for (i = 0; i < steps + 1; i++) {
$("").appendTo("#hexagon" + j.toString()).css({
'display': 'block',
'width': ((100 - afknot) + afknot * (i / steps)).toString() + '%',
'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')',
'margin': '0 auto'
});
}
for (i = 1; i < steps + 1; i++) {
$("").appendTo("#hexagon" + j.toString()).css({
'display': 'block',
'width': (100 - afknot * (i / steps)).toString() + '%',
'height': 'calc(100% / ' + (steps * 2 + 1).toString() + ')',
'margin': '0 auto'
});
}
$("#hexagon" + j.toString()).css({
'left': (radius * Math.cos(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px",
'top': (radius * Math.sin(2 * Math.PI * (j - 1) / amount) + radius).toString() + "px",
'transform': 'scale(0.66, 0.66) rotate(' + (360 / amount * (j - 1) - 30).toString() + 'deg)'
});
$("#hexagon" + j.toString()).hover(function() {
groter($(this).attr('id').match(/\d+/))
}, function() {
kleiner($(this).attr('id').match(/\d+/))
});
$(".hexagonhitbox" + j.toString()).css("pointer-events", "auto");
$("#hexagoncontentwrapper" + j.toString()).css('transform', 'rotate(' + (-(360 / amount * (j - 1) + 60)).toString() + 'deg)');
}
$('').appendTo($("#hexagonwrapper"));
$("#hexagon" + (amount + 1).toString()).css({
'left': (radius).toString() + "px",
'transform': 'scale(0.66,0.66) rotate(-90deg)',
'top': (radius).toString() + "px",
'background-image': 'url("https://static.igem.org/mediawiki/2015/0/06/Logo_website.png")'
});
$(".hexagon").css({
"width": width,
"height": height
});
$("#hexagonwrapper").css({
"width": radius * 2 + width,
"height": radius * 2 + height
});
! 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&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Content Menu
if (sessionStorage.hidden == "" || sessionStorage.hidden == "1") {
direct_hide();
}
});
function toggle_hide() {
document.getElementById("contentmenu").style.transition = "transform 0.5s";
if (sessionStorage.hidden != "1") {
document.getElementById("contentmenu").style.transform = "translateX(-90%) scale(1,0.4)";
document.getElementById("contentarrow").style.transform = "rotate(0deg)";
sessionStorage.hidden = "1";
} else {
document.getElementById("contentmenu").style.transform = "translateX(0) scale(1,1)";
document.getElementById("contentarrow").style.transform = "rotate(180deg)";
sessionStorage.hidden = "0";
}
}
function direct_hide() {
document.getElementById("contentarrow").style.transform = "rotate(0deg)";
document.getElementById("contentmenu").style.transform = "translateX(-90%) scale(1,0.4)";
}
function groter(id) {
if (vergroot == 0) {
$("#hexagon" + id).css('transition', 'transform 0.5s');
$("#hexagon" + id).css('transform', 'scale(1,1) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)');
$("#hexagon" + id).css('z-index', 50);
vergroot = 1;
}
}
function kleiner(id) {
if (vergroot == 1) {
$("#hexagon" + id).css('transition', 'transform 0.5s, z-index 0.5s');
$("#hexagon" + id).css('transform', 'scale(0.66, 0.66) rotate(' + (360 / amount * (id - 1) - 30).toString() + 'deg)');
$("#hexagon" + id).css('z-index', 0);
vergroot = 0;
}
}
' + title[j - 1] + '