# HG changeset patch
# User veltr
# Date 1378743182 -7200
# Node ID d9434a9d7130458ddbf86d28bd6ecbc1daf7df02
# Parent  e61d5a5d970e975e351e0d3f8a29f258829a86ce
New style menu

diff -r e61d5a5d970e -r d9434a9d7130 src/jocondelab/static/jocondelab/css/front-common.css
--- a/src/jocondelab/static/jocondelab/css/front-common.css	Mon Sep 09 17:23:38 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-common.css	Mon Sep 09 18:13:02 2013 +0200
@@ -113,15 +113,23 @@
     font-family: 'OpenSans'; font-size: 10px; overflow-x: hidden;
 }
 
-.header-wrapper {
-    height: 70px; background: url('../img/background-pinstripe-blue.png'); padding: 0 10px;
+.menus-container {
+    position: absolute; top: 70px; left: 0; width: 100%; z-index: 20;
 }
 
-.main-wrapper {
+.header-wrapper, .menus-wrapper, .main-wrapper {
     padding: 0 10px;
 }
 
-header, .main, footer {
+.header-wrapper {
+    height: 70px; background: url('../img/background-pinstripe-blue.png');
+}
+
+.menus-wrapper {
+    background: #ffffff; box-shadow: 0 2px 4px #666666;
+}
+
+header, .main, footer, .menu-list {
     margin: 0 auto; max-width: 960px; clear: both;
 }
 
@@ -168,7 +176,7 @@
 /* HEADER > SEARCH FORM */
 
 .header-search-form {
-    position: absolute; top: 32px; right: 0; max-width: 35%; text-align: right;
+    position: absolute; top: 8px; right: 0; max-width: 35%; text-align: right;
 }
 
 .search-input, .search-form .tagit {
@@ -196,58 +204,32 @@
     height: 2em; padding: 0.2em 0.5em;
 }
 
+.header-search-form .tagit {
+    float: right;
+}
+
 /* HEADER > MENUS */
 
-.top-menus {
-    position: absolute; right: 0;
+.menu-links {
+    position: absolute; right: 0; top: 44px; font-size: 14px; font-weight: bold;
 }
 
-.menu-container {
-    float: right; position: relative;
+.menu-link {
+    float: right; margin-left: 20px;
+}
+
+/* MENUS */
+
+.language-form {
+    display: none;
 }
 
 .menu-list {
-    position: absolute; top: 25px; right: 0; background: #ffffff; display: none;
-    font-size: 12px; box-shadow: 1px 1px 3px #333333; z-index: 3; text-align: right;
+    width: 100%; font-size: 14px; padding: 10px 0; display: none; text-align: right;
 }
 
 .menu-item {
-    border-bottom: 1px solid #cccccc; height: 20px;
-    line-height: 20px; padding: 0 5px;
-}
-
-.menu-container:hover .menu-list {
-    display: block;
-}
-
-/* HEADER > FLAGS */
-
-.language-current {
-    display: block; margin: 10px 0 10px 10px;
-}
-
-.language-list {
-    width: 100px;
-}
-
-.language-label {
-    cursor: pointer;
-}
-
-.language-button {
-    width: 18px; height: 12px; border: none; padding: 0; text-indent: -9999px;
-    float: right; margin: 4px 0 0 6px; cursor: pointer;
-}
-
-/* HEADER > MAIN MENU */
-
-.main-menu-title {
-    display: block; height: 16px; line-height: 16px; font-size: 13px;
-    text-transform: uppercase; margin: 7px;
-}
-
-.main-menu-list {
-    width: 140px;
+    display: inline-block; margin-left: 20px;
 }
 
 /* DBPEDIA OVERLAY */
diff -r e61d5a5d970e -r d9434a9d7130 src/jocondelab/static/jocondelab/js/front-common.js
--- a/src/jocondelab/static/jocondelab/js/front-common.js	Mon Sep 09 17:23:38 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-common.js	Mon Sep 09 18:13:02 2013 +0200
@@ -302,15 +302,27 @@
         adaptGrid();
         recentreDbpediaBox();
     }).scroll(recentreDbpediaBox);
-        
-    $(".language-label").click(function() {
-       $(this).siblings(".language-button").click(); 
-    });
-/*
-    $(".language-current").click(function() {
-        $(".language-list").toggle();
-    });
-*/    
+    
     $overlayImg.load(recentreDbpediaBox);
     
+    $(".menu-link a").mouseenter(function() {
+        $($(this).attr("href")).stop(true).slideDown();
+    }).mouseleave(function() {
+        $($(this).attr("href")).stop(true).delay(3000).slideUp();
+    }).click(function() {
+        return false;
+    });
+    
+    $(".menu-list").mouseenter(function() {
+        $(this).stop(true).slideDown();
+    }).mouseleave(function() {
+        $(this).stop(true).delay(3000).slideUp();
+    });
+    
+    $("#language-menu a").click(function() {
+        $(".language-input").val($(this).attr("data-language-code"));
+        $(".language-form").submit();
+        return false;
+    })
+    
 });
diff -r e61d5a5d970e -r d9434a9d7130 src/jocondelab/templates/jocondelab/front_base.html
--- a/src/jocondelab/templates/jocondelab/front_base.html	Mon Sep 09 17:23:38 2013 +0200
+++ b/src/jocondelab/templates/jocondelab/front_base.html	Mon Sep 09 18:13:02 2013 +0200
@@ -42,43 +42,45 @@
                         <h1><a href="{% url 'front_search' %}">Joconde<span class="title-lab">Lab</span></a></h1>
                         <h2 class="breadcrumbs">{% block breadcrumbs %}{% endblock %}</h2>
                     </div>
-                    <div class="top-menus">
-                        <form action="{% url 'django.views.i18n.set_language' %}" method="post" id="lang_form" class="menu-container">
-                            {% csrf_token %}
-                            <a class="language-current" href="#"><img src="{{STATIC_URL}}jocondelab/img/flag_{% if lang %}{{lang}}{% else %}{{LANGUAGE_CODE|slice:':2'}}{% endif %}.png" /></a>
-                            <ul class="menu-list language-list">
-                            {% get_language_info_list for LANGUAGES as languages %}
-                            {% for language in languages %}
-                                <li class="menu-item">
-                                    <label for="language" class="language-label">{{ language.name_local }}</label>
-                                    <input type="submit" name="language" class="language-button" style="background-image: url({{STATIC_URL}}jocondelab/img/flag_{{language.code|slice:':2'}}.png)" value="{{ language.code }}" title="{{ language.name_local }}" />
-                                </li>
-                            {% endfor %}
-                            </ul>
-                        </form>
-                        <div class="menu-container">
-                            <a class="main-menu-title">{% trans 'Menu' %}</a>
-                            <ul class="menu-list main-menu-list">
-                                <li class="menu-item">
-                                    <a href="{% url 'front_search' %}">{% trans 'Multilingual search' %}</a>
-                                </li>
-                                <li class="menu-item">
-                                    <a href="{% url 'front_timeline' %}">{% trans 'Timeline' %}</a>
-                                </li>
-                                <li class="menu-item">
-                                    <a href="{% url 'front_geo' %}">{% trans 'World map' %}</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
                     {% block header_search %}
                     <form class="header-search-form search-form" action="{% url 'front_search' %}">
                         <input class="header-search-input search-input" type="search" name="q" placeholder="{% trans 'Search in contents' %}" />
                     </form>
                     {% endblock %}
+                    <ul class="menu-links">
+                        <li class="menu-link"><a href="#main-menu">{% trans 'Menu' %}</a></li>
+                        <li class="menu-link"><a href="#language-menu">{% trans 'Change language' %}</a></li>
+                    </ul>
                 {% endblock %}
             </header>
         </div>
+        <form class="language-form" action="{% url 'django.views.i18n.set_language' %}" method="post">
+            {% csrf_token %}
+            <input class="language-input" type="hidden" name="language" value="{% if lang %}{{lang|slice:':2'}}{% else %}{{LANGUAGE_CODE|slice:':2'}}{% endif %}" />
+        </form>
+        <div class="menus-container">
+            <div class="menus-wrapper">
+                <ul class="menu-list" id="main-menu">
+                    <li class="menu-item">
+                        <a href="{% url 'front_search' %}">{% trans 'Multilingual search' %}</a>
+                    </li>
+                    <li class="menu-item">
+                        <a href="{% url 'front_timeline' %}">{% trans 'Timeline' %}</a>
+                    </li>
+                    <li class="menu-item">
+                        <a href="{% url 'front_geo' %}">{% trans 'World map' %}</a>
+                    </li>
+                </ul>
+                <ul class="menu-list" id="language-menu">
+                {% get_language_info_list for LANGUAGES as languages %}
+                {% for language in languages %}
+                    <li class="menu-item">
+                        <a href="#" data-language-code="{{ language.code }}">{{ language.name_local }}</a>
+                    </li>
+                {% endfor %}
+                </ul>
+            </div>
+        </div>
         <div class="main-wrapper">
             <section class="main">
                 {% block main %}