0.0.108 add dropdown_menu

static/css/styles.css

@@ -180,10 +180,11 @@ header {
     margin-top: 40px;
     margin-bottom: 60px;
     padding: 0px 40px;
-    display: flex;
-    justify-content: space-between;
+
 }
 
+
+
 footer {
     height: 318px;
     background:  #272424;
@@ -299,7 +300,6 @@ footer>div {
     height: 60px;
     max-width: unset;
     background: #F8F8F8;
-    margin-top: -15px;
 }
 
 .sf_first-column{
@@ -412,12 +412,69 @@ footer>div {
     margin-left: -30px;
 }
 
-header>div:first-child {
-    display: flex;
+header .header-first {
+    float: left;
     align-items: center;
-    justify-content: space-between;
-    width: clamp(400px, 50%, 500px);
+
 }
+.header-first>div{
+    float: left;
+    margin-right: 40px;
+}
+
+/*.header_menu{*/
+/*    display: none;*/
+/*    max-height: 200px;*/
+/*    width: 100%;*/
+/*    position: absolute;*/
+/*    background-color: #F8F8F8;*/
+/*    overflow: scroll;*/
+/*    overflow-x:hidden;*/
+
+/*}*/
+
+
+.dropbtn {
+
+    color: white;
+
+    font-size: 16px;
+    border: none;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: white;
+    border-radius: 10px;
+    width: 250px;
+    height: 382px;
+   box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
+    z-index: 1;
+}
+.dropdown-content.show{
+   display:block;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #ddd;}
+
+/*.dropdown:hover .dropdown-content {display: block;}*/
+
+/*.dropdown:hover .dropbtn {background-color: #3e8e41;}*/
+
+
 
 header>div>a {
     color: #F8F8F8;
@@ -427,16 +484,13 @@ header>div>a {
     font-style: normal;
     font-weight: 500;
     line-height: 22px;
-    display: flex;
     width: 152px;
-    height: 44px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
     border-radius: 10px;
     background: #FF613A;
-    text-decoration: none;
+    float: left;
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
 }
 
 header>div>div>a {
@@ -449,17 +503,26 @@ header>div>div>a {
     line-height: 22px;
 }
 
-header>div:last-child {
-    display: flex;
+header .header-second {
+    float: right;
     align-items: center;
     justify-content: space-between;
-    width: clamp(400px, 50%, 600px);
+
+}
+.header-second>div {
+    float: left;
+    align-items: center;
+    margin-right: 40px;
+
+}
+.header-second>div>img{
+    margin-right: 10px;
+}
+.header-second-item>a{
+    color: #00a420;
 }
 
-header>div:last-child>div:nth-child(2) {
-    display: flex;
-    align-items: center;
-}
+
 
 header>div:last-child>div:nth-child(2)>.svg {
     margin-right: 5px;
@@ -1295,6 +1358,9 @@ div.departure_arrival>div>input{
    display:inline-block;
 
 }
+
+
+
 .input_list .hide{
     display: none;
 }

static/js/user_profile.js

@@ -542,6 +542,24 @@ function getRoute(el){
 
 
 
+function showMenu(el, event) {
+    let menu = document.querySelector('.dropdown-content')
+        menu.classList.add('show')
+
+
+}
+function hideMenu(event) {
+    let menu = document.querySelector('.dropdown-content')
+   if(event.currentTarget != event.relatedTarget && event.relatedTarget != null){
+        menu.classList.remove('show')
+        console.log('mouseOUT')
+    }
+
+}
+
+
+
+
 
 
 

templates/blocks/b_header.html

@@ -1,13 +1,33 @@
 {% load i18n %}
 <header>
-    <div>
+    <div class="header-first">
       <div><a href="/routes/route_search_results/"><img class="svg" src="/static/img/svg/Logo.svg"></a></div>
-      <div><img class="svg" src="/static/img/svg/Menu.svg"></div>
+      <div onclick="showMenu(this, event)"  class="dropdown">
+          <img class="dropbtn" src="/static/img/svg/Menu.svg">
+          <div
+              onmouseleave="hideMenu(event)"
+              class="dropdown-content"
+          >
+                <a href="#">Главная</a>
+                <a href="#">Для отправителя</a>
+                <a href="#">Для перевозчика</a>
+                <a href="#">О Trip With Bonus</a>
+                <a href="#">Контакты</a>
+                <a href="#">Реклама</a>
+                <a href="#">Новости</a>
+                <a href="#">Служба поддержки</a>
+                <a href="#">Партнерам</a>
+
+          </div>
+      </div>
+
       <div><a href="#">Перевезти посылку</a></div>
       <div><a href="#">Отправить посылку</a></div>
     </div>
-    <div>
-      <div><a href="#"><img src="/static/img/png/ru.png" alt=""></a></div>
+    <div class="header-second">
+      <div class="header-second-item">
+          <a href="#"><img src="/static/img/png/ru.png" alt=""></a>
+      </div>
       <div><img class="svg" src="/static/img/svg/Helpdesk_%20Icon.svg"><a href="#">Служба поддержки</a></div>
         {% if user.is_authenticated %}
             <a class="button_profile_header" data-user-id="{{ user.id }}"
@@ -34,4 +54,5 @@
         {% endif %}
 
     </div>
+    <div class="clear_both"></div>
   </header>