Переделал выпадашку, теперь это кнопка

This commit is contained in:
Pro100ser
2020-03-18 17:42:18 +03:00
parent 8c698f5e35
commit b3542d79f5
6 changed files with 36 additions and 13 deletions

View File

@@ -111,20 +111,25 @@
.drop { .drop {
position: relative; position: relative;
} }
.drop:hover .dropdown { /* .drop:hover .dropdown {
left: -167px; left: -167px;
background: #afadab; background: #afadab;
padding-top: 0px; padding-top: 0px;
border-radius: 9px; border-radius: 9px;
} } */
.drop:hover .contacts__schedule { .drop:hover .contacts__schedule {
color: #b9b9b9; color: #b9b9b9;
cursor: pointer;
} }
.dropdown { .dropdown {
display: none;
position: absolute; position: absolute;
left: -9999px; left: -167px;
background: #afadab;
padding-top: 0px;
border-radius: 9px;
} }
.drop-block { .drop-block {
@@ -233,6 +238,9 @@
padding: 28px 0; padding: 28px 0;
margin: 0; margin: 0;
} }
.drop:hover .contacts__schedule_mod {
width: 116px;
}
.drop:hover .dropdown_mod { .drop:hover .dropdown_mod {
left: -25px; left: -25px;
} }

11
static/js/main.js Normal file
View File

@@ -0,0 +1,11 @@
var a = 0;
function activeClass() {
if (a == 0) {
document.getElementById('dropdown').style.display = "block";
a = 1;
}
else {
document.getElementById('dropdown').style.display = "none";
a = 0;
}
}

View File

@@ -7,6 +7,7 @@
<title>Jarvis</title> <title>Jarvis</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = './css/main.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = './css/main.css') }}">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}">
<script src="{{ url_for('static', filename = './js/main.js') }}"></script>
</head> </head>
<body> <body>
@@ -23,9 +24,9 @@
<div class="header_right"> <div class="header_right">
<div class="contacts"> <div class="contacts">
<div class="drop"> <div class="drop">
<a href="" class="contacts__schedule">Нужна помощь?</a> <a href="" class="contacts__schedule" onclick="activeClass();">Нужна помощь?</a>
<div class="dropdown dropdown_mod"> <div class="dropdown dropdown_mod" id="dropdown">
<div class="drop-block drop-block_mod"> <div class="drop-block drop-block_mod">
<div class="triangle triangle_mod"></div> <div class="triangle triangle_mod"></div>
<p>Обратитесь в службу поддержки по адресу:<b>jarvis@mail.ru</b> </p> <p>Обратитесь в службу поддержки по адресу:<b>jarvis@mail.ru</b> </p>

View File

@@ -7,6 +7,7 @@
<title>Jarvis</title> <title>Jarvis</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = './css/main.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = './css/main.css') }}">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}">
<script src="{{ url_for('static', filename = './js/main.js') }}"></script>
</head> </head>
<body> <body>
@@ -24,8 +25,8 @@
<div class="contacts"> <div class="contacts">
<div class="drop"> <div class="drop">
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<p href="" class="contacts__schedule contacts__schedule_mod">{{ current_user.username }}</p> <p href="" class="contacts__schedule contacts__schedule_mod" onclick="activeClass();">{{ current_user.username }}</p>
<div class="dropdown dropdown_mod"> <div class="dropdown dropdown_mod" id="dropdown">
<div class="drop-block drop-block_out"> <div class="drop-block drop-block_out">
<div class="triangle triangle_mod"></div> <div class="triangle triangle_mod"></div>
<a href="/logout" > <a href="/logout" >
@@ -34,8 +35,8 @@
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="contacts__schedule">Войти</div> <div class="contacts__schedule" onclick="activeClass();">Войти</div>
<div class="dropdown"> <div class="dropdown" id="dropdown">
<div class="drop-block"> <div class="drop-block">
<form action="/login" method="POST"> <form action="/login" method="POST">
<div class="triangle"></div> <div class="triangle"></div>

View File

@@ -7,6 +7,7 @@
<title>Jarvis</title> <title>Jarvis</title>
<link rel="stylesheet" href="{{ url_for('static', filename = './css/main.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename = './css/main.css') }}">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}">
<script src="{{ url_for('static', filename = './js/main.js') }}"></script>
</head> </head>
<body> <body>
@@ -23,8 +24,8 @@
<div class="header_right"> <div class="header_right">
<div class="contacts"> <div class="contacts">
<div class="drop"> <div class="drop">
<div href="" class="contacts__schedule">Войти</div> <div href="" class="contacts__schedule" onclick="activeClass();">Войти</div>
<div class="dropdown"> <div class="dropdown" id="dropdown">
<form action="" method="POST"> <form action="" method="POST">
<div class="drop-block"> <div class="drop-block">
<div class="triangle"></div> <div class="triangle"></div>

View File

@@ -7,6 +7,7 @@
<title>Jarvis</title> <title>Jarvis</title>
<link rel="stylesheet" href="{{ url_for('static', filename = './css/main.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename = './css/main.css') }}">
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='./img/favicon.ico') }}">
<script src="{{ url_for('static', filename = './js/main.js') }}"></script>
</head> </head>
<body> <body>
@@ -23,8 +24,8 @@
<div class="header_right"> <div class="header_right">
<div class="contacts"> <div class="contacts">
<div class="drop"> <div class="drop">
<p href="" class="contacts__schedule contacts__schedule_mod">{{ current_user.username }}</p> <p href="" class="contacts__schedule contacts__schedule_mod" onclick="activeClass();">{{ current_user.username }}</p>
<div class="dropdown dropdown_mod"> <div class="dropdown dropdown_mod" id="dropdown">
<div class="drop-block drop-block_out"> <div class="drop-block drop-block_out">
<div class="triangle triangle_mod"></div> <div class="triangle triangle_mod"></div>
<a href="/logout" class="input"> <a href="/logout" class="input">