menu ve dvou řadách

mamweb/static/css/mamweb.css

@@ -11,6 +11,10 @@ div.container {
 	margin: auto;
 }
 
+div.login-bar {
+	background: #6a0043;
+}
+
 /* odkazy a nadpisy */
 
 a {
@@ -180,16 +184,6 @@ h1 {
 	display: none;
 }
 
-/*
-#header h1 {
-	font-size: 130%;
-	position: absolute;
-	top: 125px;
-	left: 30px;
-	height: 110px;
-}
-*/
-
 #header img.header {
 	margin: -25px 20px 0px 0px;
 	height: 145px;
@@ -206,51 +200,6 @@ div.menu.mobile {
 div.menu.desktop {
 	display: block;
 }
-div.menu {
-	position: relative;
-	height: 60px;
-	top: 12px;
-}
-/*
-div.menu ul {
-	padding: 0px;
-	margin: 0px;
-}
-*/
-div.menu li {
-	display: inline-block;
-	border-radius: 0px;
-	
-	padding: 6px 0px 0px 0px;
-	width: 16.66%;
-	min-width: 140px;
-	text-align: center;
-	
-	font-size: 140%;
-	font-weight: 400;
-	font-variant: small-caps;
-	border-bottom-left-radius: 8px;
-	border-bottom-right-radius: 8px;
-}
-div.menu a {
-	display: block;
-	padding: 8px 10px;
-	color: #6f2509;
-	height: 48px;
-	text-shadow: none;
-}
-div.menu a:hover {
-	color: black;
-	text-decoration: none;
-	/*background: url("../images/menu-selected.svg") no-repeat center -4px;*/
-}
-
-div.menu li.selected a {
-	/*background: url("../images/menu-selected.svg") no-repeat center -4px;
-	background-size: 98% 68px;*/
-	text-decoration: none;
-	color: black;
-}
 
 h1 a:hover {
     text-decoration: none;
@@ -263,100 +212,67 @@ img.decor { /*todo bug při zmenšování okna */
 	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
 }
 
-/* testování nového menu */
+/* nové menu */
 
-ul.row-menu {
+ul.menu {
-	background-color: green;
+	width: 100%;
-	display: inline-block;
+	padding: 0px;
-}
+	margin: 20px 0px 0px 0px;
-
-div.menu-item {
-	display: inline-block;
-	background-color: yellow;
-}
-
-
-div.menu-item li.active {
-	background-color: black;
-}
-
-ul.row-menu li {
-	display: inline-block;
-	border-radius: 0px;
-	
 	padding: 6px 0px 0px 0px;
-	width: 16.66%;
+	
+	font-variant: small-caps;
+}
+
+ul.menu a {
+	text-decoration: none;
+}
+
+ul.menu li>a:active {
+	color: black;
+}
+
+ul.menu li {
+	display: inline-block;
+	width: 16.3%;
+	
+	
 	min-width: 140px;
 	text-align: center;
 	
 	font-size: 140%;
 	font-weight: 400;
-	font-variant: small-caps;
-	border-bottom-left-radius: 8px;
-	border-bottom-right-radius: 8px;
 } 
 
-ul.row-submenu {
+ul.submenu {
-	position: absolute;
+	
-	left: -400px;
-}
-
-ul.row-submenu li {
-	background-color: red;
-	padding: 0px;
-	min-width: 100px;
-	font-size:80%;
-	display: inline-block;
-} 
-
-
-
-/* konec testování nového menu */
-
-#submenu {
-	position: relative;
-	top: 3px;
 	background-color: #e84e10;
-	width: 100%;
+	margin: 10px 0px 10px 0px; 
-	z-index: 5;
+	padding-top: 10px;
+	padding-bottom: 5px;
+	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
 }
 
-#submenu ul {
+ul.submenu {
-	font-size: 120%;
+	background-color: #e84e10;
+	z-index: 5;
 	font-weight: 400;
-	margin-bottom: 0px;
 }
-#submenu li {
+
-	padding: 15px 20px 0px 20px;
+ul.submenu li {
+	width: auto;
+	padding: 0px 20px 0px 20px;
 	display: inline-block;
 }
-#submenu li>a {
+ul.submenu li>a {
 	color: #f9d59e;
 	text-decoration: none;
 	text-shadow: none;
 }
-#submenu li>a:hover {
+ul.submenu li>a:hover {
 	color: black;
 }
 
-#submenu li.selected>a {
+/* konec nového menu */
-	color: black;
-}
-
-/*
-#submenu li:first-child {
-	border-top-left-radius: 7px;
-	border-top-right-radius: 7px;
-	padding-top: 8px;
-}
-#submenu li:last-child {
-	border-bottom-left-radius: 7px;
-	border-bottom-right-radius: 7px;
-	padding-bottom: 8px;
-}
-#submenu li>a:hover {
-	text-decoration: none;
-}*/
 
 div.novinky_name {
 	text-align: right;

mamweb/templates/base.html

@@ -12,6 +12,7 @@
     <link href="{% static 'css/mamweb.css' %}" rel="stylesheet">
     <link href="{% static 'css/prettyPhoto.css' %}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
     <script src="{% static 'js/jquery-1.11.1.js' %}"></script>
+    <script src="{% static '/jquery-3.4.1.js' %}"></script>
     {% include 'autocomplete_light/static.html' %}
 
     <link rel="stylesheet" type="text/css" href="{% static 'fluent_comments/css/ajaxcomments.css' %}" />
@@ -36,10 +37,10 @@
   </head>
   <body class='{% if user.is_staff %}org-logged-in{% endif %}'>
 
-   <div class="container">
+   <div class="container"> 
 
   {% if user.is_staff %}
-    <div class="login-bar" style='background: #6a0043;'>
+    <div class="login-bar" >
       {% if view.object %}
 	Objekt {{ view.object }}: {{ view.object }}
 	{% if view.object.admin_url %}<a href='{{ view.object.admin_url }}'>[admin]</a>{% endif %}
@@ -51,7 +52,7 @@
     </div>
   {% endif %}
 
-    
+   
 	  <div class='row'>
 		<div class='col-md-12'>
           <a href='/'>
@@ -66,49 +67,14 @@
       </div>
       <div class='row'>
 	    <div class='col-md-12'>
-          {# ========= MOBILE MENU ========== #}
+
-<!--
+          {# ========= MENU ========== #}
-		  <div class="menu mobile">
+	  {% sitetree_menu from "main_menu" include "trunk" template "menu.html" %}
-		   	<div class="dropdown">
+
-  			  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
-			  <span class="glyphicon glyphicon-th-list"></span></button>
-  			  <ul class="dropdown-menu">
-                <li class=""><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
-                <li class=""><a href="/soustredeni/">Soustředění</a>
-                <li class=""><a href="/zadani/aktualni/">Zadání</a>
-                <li class=""><a href="/clanky/uvod/">Články</a>
-                <li class=""><a href="/archiv/cisla/">Archiv</a>
-                <li class=""><a href="/co-je-MaM/kontakt/">Kontakt</a>
-  			  </ul>
-			</div>
-	      </div>
-          {# ============= MENU ============== #}
-	      <div class="menu desktop">
-          <ul>
-            <li class="{% block menu_uvod %}{% endblock %}"><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
-            {# ukazka jak pouzit tag url <li class="{% block menu_soustredeni %}{% endblock %}"><a href="{% url 'seminar_seznam_soustredeni' %}">Soustředění</a> #}
-            <li class="{% block menu_soustredeni %}{% endblock %}"><a href="/soustredeni/">Soustředění</a>
-            <li class="{% block menu_zadani %}{% endblock %}"><a href="/zadani/aktualni/">Zadání</a>
-            <li class="{% block menu_clanky %}{% endblock %}"><a href="/clanky/uvod/">Články</a>
-            <li class="{% block menu_archiv %}{% endblock %}"><a href="/archiv/cisla/">Archiv</a>
-            <li class="{% block menu_odevzdat %}{% endblock %}"><a href="/co-je-MaM/kontakt/">Kontakt</a>
-          </ul>
-	      </div>
-          {# ======== KONEC MENU =============#}
-	    </div>
-	  </div>
-	   <div class='row'>
-	    <div class='col-md-12'>
-		  {% block submenu %}
-		  {% endblock %}
-		  <img class="decor" src="{% static 'images/submenu.svg' %}" />
-	    </div>
-	  </div>
--->
 
 	<div class='row content'>
 	
-    	  {% sitetree_menu from "main_menu" include "trunk" template "menu.html" %}
+    	  
 
 	  <div class='col-md-12'>
 	    {% block content %}

mamweb/templates/menu.html

@@ -1,21 +1,34 @@
 {% load sitetree %}
-<ul class="row-menu">
+<ul class="menu">
     {% for item in sitetree_items %}
-	<div class="menu-item">
+
         <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}" >
 	    
             <a href="{% sitetree_url for item %}" >
                 {{ item.title_resolved }}
             </a>
+
+
+	    
+
 	    <div class="submenu">
             {% if item.is_current or item.in_current_branch %}
-		<div class="submenu active">
                 {% sitetree_children of item for menu template "submenu.html" %}
-		</div>
 	    {% endif %}
 	    </div>
+
+
+
         </li>
-	</div>
+
     {% endfor %}
+
+    <div class="submenu-newline">
+    </div>
+
+	<script>
+	$( ".submenu" ).prependTo( ".submenu-newline" ); {# api.jquery.com/prependTo #}
+	</script>
+
 </ul>
 

mamweb/templates/submenu.html

@@ -1,10 +1,8 @@
 {% load sitetree %}
-<div class="submenu">
+<ul class="submenu">
-<ul class="row-submenu">
     {% for item in sitetree_items %}
         <li {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
             <a href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
         </li>
     {% endfor %}
 </ul>
-</div>