Header menu with submenu

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 9fa74ec31954158347489d5f17e6565c85913b21..c6a320bac1b3f6df660d20d3c91b67158afd5020 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -2,6 +2,7 @@
 // Require all the modules
 //
 var LangSelector = require('./modules/lang-selector');
+var NavHeader = require('./modules/nav-header');
 var OpenButton = require('./modules/open-button');
 var CloseButton = require('./modules/close-button');
 var CloseEscape = require('./modules/close-escape');
@@ -11,6 +12,7 @@ var Search = require('./modules/search');
 // Init all the modules
 //
 window[LangSelector] = new LangSelector();
+window[NavHeader] = new NavHeader();
 window[OpenButton] = new OpenButton();
 window[CloseButton] = new CloseButton();
 window[CloseEscape] = new CloseEscape();

diff --git a/app/static/src/js/modules/nav-header.js b/app/static/src/js/modules/nav-header.js
new file mode 100644 (file)
index 0000000..fde9e79
--- /dev/null
+++ b/app/static/src/js/modules/nav-header.js
@@ -0,0 +1,39 @@
+var NavHeader = function() {
+
+    this.$element = $('#navHeader');
+    this.$elements = $('#navHeader .nav-header__item');
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+NavHeader.prototype.init = function() {
+
+    var that = this;
+
+    that.$elements.hover(function(e) {
+
+        var $submenu = $(this).find('.nav-header__submenu');
+
+        if($submenu.length > 0) {
+
+            var offsetLeft = $(this).position().left,
+                originOffsetLeft = $('#navHeader .nav-header__item:first-child').position().left + 100,
+                originWidth = that.$element.width();
+
+            $(this).toggleClass('hover');
+
+            $submenu.css('left', -offsetLeft + originOffsetLeft);
+            $submenu.css('width', originWidth - 200);
+            $submenu.toggle();
+
+        }
+
+    });
+
+};
+
+module.exports = NavHeader;

diff --git a/app/static/src/sass/modules/navs/_nav-header.scss b/app/static/src/sass/modules/navs/_nav-header.scss
index 825d7f17ff098ddcdc223ea16e9af0ff96868f7d..e10927e21267fcdd9ab34a6533fa698f30eaf00d 100644 (file)
--- a/app/static/src/sass/modules/navs/_nav-header.scss
+++ b/app/static/src/sass/modules/navs/_nav-header.scss
@@ -17,8 +17,6 @@ $module: ".nav-header";
         vertical-align: top;
         position: relative;
 
-        @include padding-right(.5);
-
         &:after {
             content: "";
             display: block;
@@ -27,7 +25,7 @@ $module: ".nav-header";
             background: black;
             position: absolute;
             top: 0;
-            right: 0;
+            right: -1px;
 
             @include margin-left(.5);
         }
@@ -41,36 +39,144 @@ $module: ".nav-header";
         &--image {
             vertical-align: top;
             @include margin(0 0 0 .5);
+            @include padding-right(.5);
+
+            @include mq($until: md) {
+                @include margin(0 0 0 .25);
+                @include padding-right(.25);
+            }
         }
 
         &--special {
             vertical-align: top;
             @include margin(0 0 0 .5);
+            @include padding-right(.5);
+
+            @include mq($until: md) {
+                @include margin(0 0 0 .25);
+                @include padding-right(.25);
+            }
         }
 
         &--centered {
             line-height: $header-height;
         }
 
+        &.hover {
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 1px;
+                right: 0;
+                bottom: -1px;
+                z-index: 3;
+
+                background: #F8F8F8;
+                border-top: 1px solid #E3E3E3;
+                border-left: 1px solid #E3E3E3;
+                border-right: 1px solid #E3E3E3;
+                border-bottom: 1px solid #F8F8F8;
+            }
+
+        }
+
     }
 
     &__item-link {
 
         color: inherit;
         text-decoration: none;
-
+        position: relative;
+        z-index: 4;
         vertical-align: top;
 
         @include font-size(xl);
         @include line-height($header-pre-height);
         @include typeface(sans-serif);
 
+        @include padding-right(.5);
+
+        @include mq($until: md) {
+            @include margin(0 0 0 .25);
+            @include padding-right(.25);
+        }
+
+        @include mq($until: lg) {
+            @include font-size(l);
+        }
+
         &:before {
             display: inline;
             content: '.';
             vertical-align: top;
         }
 
+        &.active {
+            &:after {
+                position: absolute;
+                height: 40%;
+                display: block;
+                top: 30%;
+                left: 1px;
+                content: "";
+                background: #F8E71C;
+                z-index: -1;
+                right: 0px;
+            }
+        }
+
+    }
+
+    &__submenu {
+
+        position: absolute;
+        top: $header-pre-height;
+        z-index: 2;
+        background: white;
+        display: none;
+        background-color: #F8F8F8;
+        border: 1px solid #E3E3E3;
+        text-align: left;
+
+        @include padding(2);
+
+        @include box-shadow(0px 30px 20px 0px rgba(0,0,0,0.12));
+
+        p {
+
+            @include font-size(s);
+            @include typeface(serif);
+            font-weight: weight(light);
+
+            &:after {
+                content: "";
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: #979797;
+
+                @include margin-top(1);
+            }
+
+        }
+
+    }
+
+    &__item-sub {
+
+        @include font-size(s);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+        &--first {
+
+            @include font-size(l);
+            @include margin-bottom(.5);
+
+        }
+
     }
 
 }

diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html
index db5ad011fb740de9df6d1a149ef83624910fd33e..40daa4dc5fa145f7743d8b43637376d3cba2feda 100644 (file)
--- a/app/templates/pages/menus/header.html
+++ b/app/templates/pages/menus/header.html
@@ -6,19 +6,19 @@
     {% for page in page_branch %}
         {% if page.is_primary %}
             {% if forloop.first %}
-                <ul class="nav-header" role="navigation">
+                <ul class="nav-header" role="navigation" id="navHeader">
                     <li class="nav-header__item nav-header__item--image">
                         <a href="{% url "home" %}" title="{% trans 'Home' %}"><img src="{% static "img/logo-ircam.png" %}" width="118" height="80" /></a>
                     </li>
             {% endif %}
         {% endif %}
         {% if page.in_menu %}
-            <li class="nav-header__item {% if page.is_current_or_ascendant %}active{% endif %}">
-                <a class="nav-header__item-link" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
+            <li class="nav-header__item">
+                <a class="nav-header__item-link{% if page.is_current_or_ascendant %} active{% endif %}" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
 
         {% endif %}
         {% if page.has_children_in_menu and not forloop.first %}
-            {% page_menu page "pages/menus/header_tree.html" %}
+            {% page_menu page "pages/menus/header_tree_primary.html" %}
         {% endif %}
             </li>
         {% if page.is_primary %}

diff --git a/app/templates/pages/menus/header_tree.html b/app/templates/pages/menus/header_tree.html
deleted file mode 100644 (file)
index 2155630..0000000
--- a/app/templates/pages/menus/header_tree.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% load i18n pages_tags staticfiles %}
-{% get_language_info_list for LANGUAGES as languages %}
-
-{% spaceless %}
-{% if page_branch_in_menu %}
-    {% for page in page_branch %}
-        {% comment %}
-            TODO
-        {% endcomment %}
-    {% endfor %}
-{% endif %}
-{% endspaceless %}

diff --git a/app/templates/pages/menus/header_tree_primary.html b/app/templates/pages/menus/header_tree_primary.html
new file mode 100644 (file)
index 0000000..babbcdb
--- /dev/null
+++ b/app/templates/pages/menus/header_tree_primary.html
@@ -0,0 +1,31 @@
+{% load i18n pages_tags staticfiles %}
+{% get_language_info_list for LANGUAGES as languages %}
+
+{% spaceless %}
+{% if page_branch_in_menu %}
+    <div class="nav-header__submenu">
+        <div class="row">
+            <div class="col-md-12">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quis nulla, molestias temporibus dignissimos quisquam facilis, sint reiciendis maiores ut. Voluptate sequi asperiores laborum, harum similique iusto pariatur at totam?
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            {% for page in page_branch %}
+                {% if page.in_menu %}
+                    <ul class="unstyled-list col-sm-3">
+                        <li class="nav-header__item-sub nav-header__item-sub--first{% if page.is_current_or_ascendant %} active{% endif %}">
+                            <a class="" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
+
+                {% endif %}
+                {% if page.has_children_in_menu and not forloop.first %}
+                    {% page_menu page "pages/menus/header_tree_secondary.html" %}
+                {% endif %}
+                        </li>
+                    </ul>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
+{% endspaceless %}

diff --git a/app/templates/pages/menus/header_tree_secondary.html b/app/templates/pages/menus/header_tree_secondary.html
new file mode 100644 (file)
index 0000000..fbc0fd3
--- /dev/null
+++ b/app/templates/pages/menus/header_tree_secondary.html
@@ -0,0 +1,14 @@
+{% load i18n pages_tags staticfiles %}
+{% get_language_info_list for LANGUAGES as languages %}
+
+{% spaceless %}
+{% if page_branch_in_menu %}
+    {% for page in page_branch %}
+        {% if page.in_menu %}
+            <li class="nav-header__item-sub{% if page.is_current_or_ascendant %} active{% endif %}">
+                <a class="" href="{{ page.get_absolute_url }}" title="{{ page.title }}">{{ page.title }}</a>
+            </li>
+        {% endif %}
+    {% endfor %}
+{% endif %}
+{% endspaceless %}