Drupal 8 Theming - Part 18 - Taxonomy and Drop Down Menu

ivandoric · Dec 5, 2015 · 1c6174b · 1c6174b
1 parent 1d1522d
commit 1c6174b
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/js/main.js b/js/main.js
diff --git a/lib/main.js b/lib/main.js
@@ -1,3 +1,5 @@
 jQuery(document).ready(function($) {
-
+    $('#block-endymion-main-menu li').hover(function(){
+        $(this).find('.sub-menu').toggle();
+    });    
 });
diff --git a/sass/_header.scss b/sass/_header.scss
@@ -17,6 +17,31 @@
 
     li{
         float: left;
+        position: relative;
+    }
+
+    ul ul{
+        position: absolute;
+        width:200px;
+        background: #FFF;
+        display: none;
+
+        li{
+            float:none;
+
+            a{
+                color:#2BA6CB;
+                display: block;
+                padding:5px;
+                border-bottom: 1px solid #efefef;
+
+                &:hover{
+                    background: #2BA6CB;
+                    color:#fff;
+                    text-decoration: none;
+                }
+            }
+        }
     }
 
     a{

diff --git a/templates/navigation/menu.html.twig b/templates/navigation/menu.html.twig
@@ -32,7 +32,7 @@
     {% if menu_level == 0 %}
       <ul{{ attributes.addClass('menu') }}>
     {% else %}
-      <ul>
+      <ul class="sub-menu">
     {% endif %}
     {% for item in items %}
       <li{{ item.attributes }}>