--- 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 */
--- 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;
+ })
+
});
--- 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 %}