Difference between revisions of "Template:Pasteur Paris/Menu"
ThomasStarck (Talk | contribs) |
|||
| (22 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Pasteur_Paris/Fonts}} | {{Pasteur_Paris/Fonts}} | ||
| + | |||
| Line 14: | Line 15: | ||
/* BEGIN : Default Wiki Settings */ | /* BEGIN : Default Wiki Settings */ | ||
| − | |||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
| Line 22: | Line 22: | ||
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}; | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}; | ||
| − | |||
/* END : Default Wiki Settings */ | /* END : Default Wiki Settings */ | ||
| + | |||
| + | *{ | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | body { | ||
| + | padding-top: 44px; | ||
| + | font-family: 'Raleway', Arial Black, sans-serif; | ||
| + | } | ||
| Line 30: | Line 39: | ||
/* BEGIN : General Settings of Menu Bar */ | /* BEGIN : General Settings of Menu Bar */ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | #MenuIgem { | |
| − | + | height: 18px; | |
| − | + | background-color: black; | |
| − | + | position: fixed; | |
| − | + | top: 0%; | |
| − | + | left: 0%; | |
| − | + | width: 100%; | |
| − | + | z-index: 2; | |
| − | + | } | |
| − | + | #Menu { | |
| − | + | height: 70px; | |
| − | + | position: fixed; | |
| − | + | top: 18px; | |
| − | + | left: 0%; | |
| − | + | width: 100%; | |
| − | + | z-index: 2; | |
| − | + | border-bottom-left-radius: 15px; | |
| − | + | border-bottom-right-radius: 15px; | |
| − | + | } | |
| − | + | #Menu img { | |
| − | + | float: left; | |
| − | + | height: 100%; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | #Menu-mobile-bar { | |
| − | + | display: none; | |
| − | + | height: 50px; | |
| − | + | background-color: pink; | |
| − | + | position: fixed; | |
| − | + | top: 18px; | |
| − | + | left: 0%; | |
| − | + | width: 100%; | |
| − | + | z-index: 2; | |
| − | + | border-bottom-left-radius: 5px; | |
| − | + | border-bottom-right-radius: 5px; | |
| − | + | } | |
| − | + | #Menu-mobile-bar img { | |
| − | + | float: left; | |
| − | + | height: 100%; | |
| − | + | width: auto; | |
| − | + | } | |
/* END : General Settings of Menu Bar */ | /* END : General Settings of Menu Bar */ | ||
| Line 101: | Line 103: | ||
#naviconbar { | #naviconbar { | ||
| − | + | height: 100%; | |
min-width: 900px; | min-width: 900px; | ||
background-image: linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146)); | background-image: linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146)); | ||
| Line 116: | Line 118: | ||
z-index: -20; /*defines color behind icons */ | z-index: -20; /*defines color behind icons */ | ||
display: inline-block; | display: inline-block; | ||
| − | + | vertical-align: middle; | |
| − | + | height: 100%; | |
} | } | ||
#navicons ul { | #navicons ul { | ||
padding: 0px; | padding: 0px; | ||
| − | + | margin: 0px; | |
| − | + | height: 100%; | |
width: 100%; | width: 100%; | ||
position: relative; /*makes chip go directly behind home from left corner*/ | position: relative; /*makes chip go directly behind home from left corner*/ | ||
| Line 260: | Line 262: | ||
transition: all 300ms ease-out; | transition: all 300ms ease-out; | ||
z-index: 0; | z-index: 0; | ||
| − | + | border-bottom-left-radius: 5px; | |
| − | + | border-bottom-right-radius: 5px; | |
| − | + | background: #000000; | |
} | } | ||
| Line 363: | Line 365: | ||
#project-sub { | #project-sub { | ||
display: none; | display: none; | ||
| − | left: | + | left: 64.5px; |
} | } | ||
| Line 393: | Line 395: | ||
#aboutus-sub{ | #aboutus-sub{ | ||
display: none; | display: none; | ||
| − | left: | + | left: 788.5px; |
} | } | ||
| Line 454: | Line 456: | ||
border-bottom: 2px solid #000000; | border-bottom: 2px solid #000000; | ||
z-index: 3000; | z-index: 3000; | ||
| − | |||
} | } | ||
#smallnav ul { | #smallnav ul { | ||
| Line 483: | Line 484: | ||
} | } | ||
#smallnav a:hover, #smallnav a:active { | #smallnav a:hover, #smallnav a:active { | ||
| − | background-color: #000000; | + | background-color: #000000; /* fond des onglets */ |
} | } | ||
#smallnav a#pull { | #smallnav a#pull { | ||
| Line 523: | Line 524: | ||
#smallnav a#pull { | #smallnav a#pull { | ||
display: block; | display: block; | ||
| − | background- | + | background-image: linear-gradient(to right, rgb(168, 48, 91), rgb(161, 47, 92), rgb(128, 52, 110),rgb(84, 59, 126),rgb(52, 82, 146)); |
width: 100%; | width: 100%; | ||
position: relative; | position: relative; | ||
| Line 529: | Line 530: | ||
#smallnav a#pull:after { | #smallnav a#pull:after { | ||
content:""; | content:""; | ||
| − | background: url('') no-repeat; | + | background: url('https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png') no-repeat; |
background-size: auto 90%; | background-size: auto 90%; | ||
width: 30px; | width: 30px; | ||
| Line 542: | Line 543: | ||
/* BEGINclasses for icons */ | /* BEGINclasses for icons */ | ||
#home_small { | #home_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 556: | Line 557: | ||
#project_small { | #project_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 570: | Line 571: | ||
#labwork_small { | #labwork_small { | ||
| − | background-color:# | + | background-color:#345292; |
} | } | ||
| Line 584: | Line 585: | ||
#parts_small { | #parts_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 598: | Line 599: | ||
#modeling_small { | #modeling_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 611: | Line 612: | ||
#achievements_small { | #achievements_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 624: | Line 625: | ||
#hp_small { | #hp_small { | ||
| − | background-color: # | + | background-color: #345292; |
} | } | ||
| Line 659: | Line 660: | ||
} | } | ||
} | } | ||
| + | /* END : Menu Bar Settings */ | ||
</style> | </style> | ||
| − | + | <body> | |
<!-- BEGIN Simulating Upper Igem Menu--> | <!-- BEGIN Simulating Upper Igem Menu--> | ||
| − | + | <header id="MenuIgem"> | |
| − | + | </header> | |
<!-- END Simulating Upper Igem Menu--> | <!-- END Simulating Upper Igem Menu--> | ||
<!-- BEGIN normal Menubar--> | <!-- BEGIN normal Menubar--> | ||
| − | + | <header id="Menu"> | |
| − | + | <div id="naviconwrapper"> | |
<!-- BEGIN icons --> | <!-- BEGIN icons --> | ||
<div id="naviconbar"> | <div id="naviconbar"> | ||
| Line 779: | Line 781: | ||
<script> | <script> | ||
| − | + | // FOR SMALLNAV | |
$(function() { | $(function() { | ||
var pull = $('#pull'); | var pull = $('#pull'); | ||
| Line 901: | Line 903: | ||
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | // make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | ||
$("#project-sub") .hover(function(){ | $("#project-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','125px'); |
$("#project-sub") .show(); | $("#project-sub") .show(); | ||
}, | }, | ||
| Line 909: | Line 911: | ||
}); | }); | ||
$("#labwork-sub") .hover(function(){ | $("#labwork-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','245px'); |
$("#labwork-sub") .show(); | $("#labwork-sub") .show(); | ||
}, | }, | ||
| Line 917: | Line 919: | ||
}); | }); | ||
$("#parts-sub") .hover(function(){ | $("#parts-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','365px'); |
$("#parts-sub") .show(); | $("#parts-sub") .show(); | ||
}, | }, | ||
| Line 925: | Line 927: | ||
}); | }); | ||
$("#modeling-sub") .hover(function(){ | $("#modeling-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','485px'); |
$("#modeling-sub") .show(); | $("#modeling-sub") .show(); | ||
}, | }, | ||
| Line 933: | Line 935: | ||
}); | }); | ||
$("#achievements-sub") .hover(function(){ | $("#achievements-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','605px'); |
$("#achievements-sub") .show(); | $("#achievements-sub") .show(); | ||
}, | }, | ||
| Line 941: | Line 943: | ||
}); | }); | ||
$("#hp-sub") .hover(function(){ | $("#hp-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','725px'); |
$("#hp-sub") .show(); | $("#hp-sub") .show(); | ||
}, | }, | ||
| Line 950: | Line 952: | ||
$("#aboutus-sub") .hover(function(){ | $("#aboutus-sub") .hover(function(){ | ||
| − | $("#runningchip") .css('left',' | + | $("#runningchip") .css('left','845px'); |
$("#aboutus-sub") .show(); | $("#aboutus-sub") .show(); | ||
}, | }, | ||
| Line 961: | Line 963: | ||
<script> | <script> | ||
| − | + | /*Attachable menu code*/ | |
| − | + | $( document ).ready(function() { | |
| − | + | ||
| − | + | $(window).scroll(function (event) { | |
| − | + | var y = $(this).scrollTop(); | |
| − | + | if(y>60){ | |
| − | + | $("#header").css('position','fixed'); | |
| − | + | $("#header").css('width','100%'); | |
| − | + | $("#header").css('margin-top','-61px'); | |
| − | + | $("#bottom-arrow").css('display','none'); | |
| − | + | $("#runningchip-back").css('display','none'); | |
| − | + | $("#navtext").css('margin-top','-20px'); | |
| − | + | $(".chip_gap").css('height','30px'); | |
| − | + | }else{ | |
| − | + | var offsetTop = -y; | |
| − | + | $("#header").css('margin-top',offsetTop+'px'); | |
| − | + | $("#bottom-arrow").removeAttr('style'); | |
| − | + | $("#runningchip-back").removeAttr('style'); | |
| − | + | $("#navtext").removeAttr('style'); | |
| − | + | $(".chip_gap").css('height','23px'); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}); | }); | ||
| + | /*Fix for when a link targets an id -> check the position on pageload*/ | ||
| + | $(window).scroll(); | ||
| + | }); | ||
</script> | </script> | ||
| − | |||
| − | |||
<!-- Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg --> | <!-- Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg --> | ||
</html> | </html> | ||
Latest revision as of 14:19, 16 August 2018