Update menu JS

Author: jgthms

.gitignore

@@ -13,5 +13,6 @@ test.sass
 .sass-cache
 _gh_pages
 _site
+_includes/_static
 images/trash
 node_modules

_includes/lists/main-list.html

@@ -1,4 +1,4 @@
-<script type="text/javascript">
+<!--script type="text/javascript">
 window.carbonLoaded = false;
 
 window.helloCarbon = function() {
@@ -22,9 +22,9 @@
       $carbon.style.display = 'none';
     }
     $placeholder.style.display = 'none';
-  }, 5000);
+  }, 2000);
 });
-</script>
+</script-->
 
 <aside class="menu">
   <header class="menu-header">
@@ -51,7 +51,7 @@
   </nav>
   <nav id="menu-nav" class="menu-nav">
     <div class="menu-search">
-      <input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
+      <input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for an element">
       <i class="icon is-search"></i>
     </div>
     <div id="menu-list" class="menu-list">
@@ -66,7 +66,7 @@
       <strong>Close</strong>
     </a>
   </nav>
-  <footer id="menuHello" class="menu-hello">
+  <!--footer id="menuHello" class="menu-hello">
     <div id="huggingFace">
       <p>
         HTML Reference is <strong>free</strong> and always will be!
@@ -84,8 +84,8 @@
       <div class="placeholder-footer"><div></div></div>
     </div>
     <div id="carbon">
-      <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=htmlreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script> -->
-    </div>
+      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=htmlreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
+    </div-->
   </footer>
 </aside>
 

_includes/lists/menu-list.html

@@ -394,21 +394,25 @@ html ::selection {
     -webkit-overflow-scrolling: touch;
     flex-grow: 1;
     overflow: auto; }
-  .menu-list a {
+  .menu-list .menu-link {
     display: block;
     padding: 0.75rem 2rem;
     transition: none; }
-    .menu-list a .highlight {
-      background: #ffdd57;
-      color: #310736; }
-    .menu-list a:hover, .menu-list a.is-selected {
-      background: #ff470f;
-      color: #fff; }
-  .menu-list.is-searching a {
+  .menu-list.is-searching .menu-item {
     display: none; }
-    .menu-list.is-searching a.is-highlighted, .menu-list.is-searching a.is-selected {
+    .menu-list.is-searching .menu-item.is-highlighted, .menu-list.is-searching .menu-item.is-selected {
       display: block; }
 
+.menu-item .highlight {
+  background: #ffdd57;
+  color: #310736; }
+
+.menu-item:hover, .menu-item.is-selected {
+  background: #ff470f;
+  color: #fff; }
+  .menu-item:hover .menu-item-name, .menu-item.is-selected .menu-item-name {
+    color: #fff; }
+
 .menu-list-shadow {
   display: block;
   left: 0;
@@ -573,19 +577,14 @@ html ::selection {
     flex-grow: 0;
     flex-shrink: 0; }
   .menu-collections {
-    font-size: 0.8rem; }
-    .menu-collections ul {
-      display: flex;
-      flex-wrap: wrap; }
-    .menu-collections p .menu-collection-link {
-      position: relative;
-      right: 6px; }
+    font-size: 0.8rem;
+    padding-left: 1rem; }
   .menu-nav {
     border-top: 1px solid #e6e6e6;
     display: flex;
     flex-grow: 1;
     flex-shrink: 1; }
-  .menu-list a {
+  .menu-list .menu-link {
     padding: 0.25rem 1rem; }
   .menu-hello {
     background: #fff;
@@ -995,7 +994,6 @@ html ::selection {
       transform: translateX(4px) translateY(50%); }
 
 .value-header {
-  overflow: auto;
   padding-left: 1rem; }
 
 .value-name {
@@ -1034,6 +1032,9 @@ html ::selection {
 .value-preview {
   font-size: 14px; }
 
+.value-output a {
+  text-decoration: underline; }
+
 @media (max-width: 799px) {
   .attribute {
     margin-top: 2rem;
@@ -1176,6 +1177,8 @@ html ::selection {
   background: #fff;
   font-size: 14px;
   padding: 1rem; }
+  .example-output a {
+    text-decoration: underline; }
 
 @media (max-width: 799px) {
   .example {

_includes/menu.html

@@ -7,20 +7,4 @@ document.addEventListener('DOMContentLoaded', function() {
     history.replaceState('', document.title, ' ');
     window.scrollTo(0,0);
   });
-
-  // Hashes
-  var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a');
-
-  Array.prototype.forEach.call($hashes, function($el) {
-    $el.addEventListener('click', function(event) {
-      event.preventDefault();
-      var propertyName = $el.dataset.propertyName;
-      var $target = document.getElementById($el.dataset.propertyName);
-      history.replaceState('', document.title, '#' + propertyName);
-
-      if ($target) {
-        $target.scrollIntoView();
-      }
-    });
-  });
 });