EstebanDLPT (Talk | contribs) |
EstebanDLPT (Talk | contribs) |
||
Line 42: | Line 42: | ||
</div> | </div> | ||
</footer> | </footer> | ||
+ | |||
+ | <!-- Script controls collapsedMenus --> | ||
+ | <script> | ||
+ | |||
+ | /*------------MENU STARTS-----------*/ | ||
+ | |||
+ | //Menu collapsing | ||
+ | |||
+ | $("#linkContainer_Project").hover( | ||
+ | function () { | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Project").addClass("active"); | ||
+ | $("#linkContainer_ProjectChild").addClass("activeChild"); | ||
+ | openMenu('#collapseProject', '#5DA565'); | ||
+ | |||
+ | }, function () { | ||
+ | $("#linkContainer_Project").removeClass("active"); | ||
+ | $("#linkContainer_ProjectChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseProject'); | ||
+ | colorNavbar(); | ||
+ | |||
+ | $('#collapseProject').mouseenter(function(){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Project").addClass("active"); | ||
+ | $("#linkContainer_ProjectChild").addClass("activeChild"); | ||
+ | openMenu('#collapseProject', '#5DA565'); | ||
+ | }); | ||
+ | $('#collapseProject').mouseleave(function(){ | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_Project").removeClass("active"); | ||
+ | $("#linkContainer_ProjectChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseProject'); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | $("#linkContainer_Parts").hover( | ||
+ | function () { | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Parts").addClass("active"); | ||
+ | $("#linkContainer_PartsChild").addClass("activeChild"); | ||
+ | openMenu('#collapseParts', '#2cA555'); | ||
+ | }, function () { | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_Parts").removeClass("active"); | ||
+ | $("#linkContainer_PartsChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseParts'); | ||
+ | |||
+ | $('#collapseParts').mouseenter(function(){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Parts").addClass("active"); | ||
+ | $("#linkContainer_PartsChild").addClass("activeChild"); | ||
+ | openMenu('#collapseParts', '#2cA555'); | ||
+ | }); | ||
+ | $('#collapseParts').mouseleave(function(){ | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_Parts").removeClass("active"); | ||
+ | $("#linkContainer_PartsChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseParts'); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | $("#linkContainer_People").hover( | ||
+ | function () { | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_People").addClass("active"); | ||
+ | $("#linkContainer_PeopleChild").addClass("activeChild"); | ||
+ | openMenu('#collapsePeople', '#9bA545'); | ||
+ | }, function () { | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_People").removeClass("active"); | ||
+ | $("#linkContainer_PeopleChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapsePeople'); | ||
+ | |||
+ | $('#collapsePeople').mouseenter(function(){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_People").addClass("active"); | ||
+ | $("#linkContainer_PeopleChild").addClass("activeChild"); | ||
+ | openMenu('#collapsePeople', '#9bA545'); | ||
+ | }); | ||
+ | $('#collapsePeople').mouseleave(function(){ | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_People").removeClass("active"); | ||
+ | $("#linkContainer_PeopleChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapsePeople'); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | $("#linkContainer_HP").hover( | ||
+ | function () { | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_HP").addClass("active"); | ||
+ | $("#linkContainer_HPChild").addClass("activeChild"); | ||
+ | openMenu('#collapseHP', '#7aA535'); | ||
+ | }, function () { | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_HP").removeClass("active"); | ||
+ | $("#linkContainer_HPChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseHP'); | ||
+ | |||
+ | $('#collapseHP').mouseenter(function(){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_HP").addClass("active"); | ||
+ | $("#linkContainer_HPChild").addClass("activeChild"); | ||
+ | openMenu('#collapseHP', '#7aA535'); | ||
+ | }); | ||
+ | $('#collapseHP').mouseleave(function(){ | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_HP").removeClass("active"); | ||
+ | $("#linkContainer_HPChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseHP'); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | $("#linkContainer_Modeling").hover( | ||
+ | function () { | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Modeling").addClass("active"); | ||
+ | $("#linkContainer_ModelingChild").addClass("activeChild"); | ||
+ | openMenu('#collapseModeling', '#59A525'); | ||
+ | }, function () { | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_Modeling").removeClass("active"); | ||
+ | $("#linkContainer_ModelingChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseModeling'); | ||
+ | |||
+ | $('#collapseModeling').mouseenter(function(){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | $("#linkContainer_Modeling").addClass("active"); | ||
+ | $("#linkContainer_ModelingChild").addClass("activeChild"); | ||
+ | openMenu('#collapseModeling', '#59A525'); | ||
+ | }); | ||
+ | $('#collapseModeling').mouseleave(function(){ | ||
+ | colorNavbar(); | ||
+ | $("#linkContainer_Modeling").removeClass("active"); | ||
+ | $("#linkContainer_ModelingChild").removeClass("activeChild"); | ||
+ | closeMenu('#collapseModeling'); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | |||
+ | function openMenu(collapseName, collapseColor) { | ||
+ | $(".topBar").css({'height':'100%'}); | ||
+ | $(".mask").css({'background':'rgba(0,123,255,0.5)','height':'100%'}); | ||
+ | $(collapseName).css({'background-color': collapseColor}); | ||
+ | if($(".topBar").offset().top < 300){ | ||
+ | $(collapseName).stop().fadeIn(300); | ||
+ | }else{ | ||
+ | $(collapseName).stop().slideDown(400); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function colorNavbar(){ | ||
+ | if($(".topBar").offset().top > 300){ | ||
+ | $('#navbar').css('background','#2A8481'); | ||
+ | }else{ | ||
+ | $('#navbar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)'); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function closeMenu(collapseName){ | ||
+ | $(".topBar").css({'height':'8vh'}); | ||
+ | $(".mask").css({'background':'rgba(0,0,0,0)','height':'8vh'}); | ||
+ | if($(".topBar").offset().top < 300){ | ||
+ | $(collapseName).stop().fadeOut(200); | ||
+ | }else{ | ||
+ | $(collapseName).stop().slideUp(300); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $(window).scroll(colorNavbar); | ||
+ | $(document).ready(colorNavbar); | ||
+ | |||
+ | /*------------MENU ENDS-----------*/ | ||
+ | </script> | ||
<!-- Custom JavaScript --> | <!-- Custom JavaScript --> | ||
<script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 22:43, 27 July 2018