From: Jérémy Fabre Date: Wed, 20 Jul 2016 12:11:53 +0000 (+0200) Subject: Header menu with submenu X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=520dc1388ecb1a1a3add16a1dc4724b808713eeb;p=mezzo.git Header menu with submenu --- diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index 9fa74ec3..c6a320ba 100644 --- 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 index 00000000..fde9e79e --- /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 825d7f17..e10927e2 100644 --- 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 db5ad011..40daa4dc 100644 --- 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 %} -