Add the home menu styling

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index afeb27841a57e35d3b67d124d1dbc520549b73e1..f33b70e6e737333a8c6cb8f8bd4ad16ae7702771 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -12,6 +12,7 @@ var OverflowInit = require('./modules/overflow-init');
 var StickyKitInit = require('./modules/sticky-kit-init');
 var LightSliderPageInit = require('./modules/lightsliderpage-init');
 var LightSliderHomeInit = require('./modules/lightsliderhome-init');
+var HomeMenu = require('./modules/home-menu');
 
 //
 // Init all the modules
@@ -27,3 +28,4 @@ window[OverflowInit] = new OverflowInit();
 window[StickyKitInit] = new StickyKitInit();
 window[LightSliderPageInit] = new LightSliderPageInit();
 window[LightSliderHomeInit] = new LightSliderHomeInit();
+window[HomeMenu] = new HomeMenu();

diff --git a/app/static/src/js/modules/home-menu.js b/app/static/src/js/modules/home-menu.js
new file mode 100644 (file)
index 0000000..be7e1ac
--- /dev/null
+++ b/app/static/src/js/modules/home-menu.js
@@ -0,0 +1,25 @@
+var HomeMenu = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+HomeMenu.prototype.init = function() {
+
+    var that = this,
+        $elements = $('.home__menu a');
+
+    $elements.hover(function() {
+        $elements.removeClass('active');
+        $(this).addClass('active');
+    }, function() {
+        $elements.removeClass('active');
+        $($elements.get(0)).addClass('active');
+    });
+
+};
+
+module.exports = HomeMenu;

diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss
index d5cd08cb19f932c5cef178a5d79d8c00a806198c..d21b76085453770a091dd2a4d88ef1df196f9cad 100644 (file)
--- a/app/static/src/sass/pages/_home.scss
+++ b/app/static/src/sass/pages/_home.scss
@@ -2,6 +2,7 @@ $module: ".home";
 
 #{$module} {
 
+    // Overrides .main style
     .main {
 
         margin-top: -($header-height + $header-pre-height);
@@ -9,4 +10,72 @@ $module: ".home";
 
     }
 
+    &__menu {
+
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        text-align: center;
+
+        width: 700px;
+
+        @include padding-left(3);
+        @include padding-right(3);
+        @include margin(2 auto);
+
+        border-top: 1px solid #DCDCDC;
+
+        @include mq($until: sm) {
+            display: none;
+        }
+
+    }
+
+    &__menu-item {
+
+        position: relative;
+        display: inline-block;
+
+        @include margin-top(1);
+
+        @include font-size(xl);
+        @include line-height(1);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+        >a {
+
+            @include padding-left(1);
+            @include padding-right(1);
+            display: block;
+
+            &:after {
+                content: '';
+                display: block;
+                position: absolute;
+                top: -34px;
+                left: 50%;
+                margin-left: -9px;
+                width: 18px;
+                height: 18px;
+                background: #FFFFFF;
+                border-left:1px solid #DCDCDC;
+                border-top:1px solid #DCDCDC;
+
+                @include transform(scaleY(0) rotate(45deg));
+                @include transition(all 0.25s ease-in-out);
+            }
+
+            &.active {
+                &:after {
+
+                    @include transform(scaleY(1) rotate(45deg));
+
+                }
+            }
+
+        }
+
+    }
+
 }

diff --git a/app/templates/index.html b/app/templates/index.html
index 03e48caf863987f034b6c333c6d390c827d5952a..aa8e66f7090116597ced069518bfed8fe9dd4a96 100644 (file)
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -20,14 +20,25 @@
 {% block main %}
 
     {% include "home/inc/slider.html" %}
-    {% page_menu "pages/menus/magazine.html" %}
-    {% include "magazine/brief/brief_list.html" %}
-
-    <ul>
-      <li><a href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a></li>
-      <li><a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a></li>
-      <li><a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a></li>
-      <li><a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a></li>
+
+    <div style="display: none;">
+        {% page_menu "pages/menus/magazine.html" %}
+        {% include "magazine/brief/brief_list.html" %}
+    </div>
+
+    <ul class="home__menu">
+      <li class="home__menu-item">
+          <a href="#" title="{% trans "News Headlines" %}">{% trans "News Headlines" %}</a>
+      </li>
+      <li class="home__menu-item">
+          <a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a>
+      </li>
+      <li class="home__menu-item">
+          <a href="#" title="{% trans "Brief" %}">{% trans "Brief" %}</a>
+      </li>
+      <li class="home__menu-item">
+          <a href="#" title="{% trans "Media" %}">{% trans "Media" %}</a>
+      </li>
     </ul>
 
     {% include "home/inc/body.html" %}