Add "peek" for embl banner

css/ebi-css-build/_ebi_masthead_styles.scss

@@ -56,7 +56,7 @@
 
     .global-nav {
       font-size: .9rem;
-      
+
       a,
       a:hover {
         color: white;

css/ebi-css-build/_embl_selector.scss

@@ -6,6 +6,16 @@
 
 /// Classses to theme the embl dropdown selector for the .masthead-black-bar
 @mixin embl-selector {
+
+  // peeking animation for black bar
+  transition: border-width 0.5s ease-in-out;
+  border-top: 0 solid #EEE;
+
+  &.peek {
+    border-top: 1rem solid #EEE;
+  }
+
+
   li.embl-selector {
     margin-left: 0.5rem;
     border-left: .5px solid rgba(255,255,255,.5);
@@ -113,6 +123,6 @@
   @media screen and (max-width: 53em) {
     .embl-selector .button { width: 0px; padding-right:0; overflow: hidden;}
     .embl-selector .button:after { display: none; }
-    .masthead-black-bar nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
+    nav ul.menu li a { padding-right: .5rem; padding-left: .5rem;}
   }
 }

js/ebi-global-includes/script/4_ebiFrameworkContent.js

@@ -72,7 +72,7 @@ function ebiFrameworkPopulateBlackBar() {
         '<li class="location grenoble hide"><a href="#">Heidelberg</a></li>'+
         '<li class="location grenoble hide"><a href="#">Grenoble</a></li>'+
         '<li class="location rome hide"><a href="#">Rome</a></li>'+
-        '<li class="float-right show-for-medium embl-selector">'+
+        '<li id="embl-selector" class="float-right show-for-medium embl-selector">'+
           '<button class="button float-right">&nbsp;</button>'+
         '</li>'+
         '<li class="float-right search">'+
@@ -190,9 +190,22 @@ function ebiFrameworkInsertEMBLdropdown() {
     '</nav>';
     document.getElementById("masthead-black-bar").insertBefore(dropdownDiv,document.getElementById("masthead-black-bar").firstChild);
 
-    // toggle the .embl-bar
     var emblBar = document.querySelectorAll(".embl-bar")[0];
     var emblBarButton = document.querySelectorAll(".embl-selector")[0];
+    var blackBar = document.querySelectorAll(".masthead-black-bar")[0];
+
+    // add "peeking" animation for embl selector
+    emblBarButton.addEventListener("mouseenter", function( event ) {
+      blackBar.className += ' peek';
+
+      // reset the peeking after a short delay
+      setTimeout(function() {
+        blackBar.classList.remove("peek");
+      }, 500);
+    }, false);
+
+
+    // toggle the .embl-bar
     var emblSelector = document.querySelectorAll(".embl-selector")[0].addEventListener("click", function( event ) {
       ebiToggleClass(emblBar,'active');
       ebiToggleClass(emblBarButton,'active');
@@ -205,8 +218,6 @@ function ebiFrameworkInsertEMBLdropdown() {
       window.scrollTo(0, 0);
     }, false);
 
-
-    // we do this bit with jquery to prototype, would need ro rewire as vanilla JS..
     // we do this bit with jquery to prototype, would need ro rewire as vanilla JS..
     $('#masthead-black-bar .where.active').on('mouseover', function() {
       emblResetContext(); // clear any other states