mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
feat: menu dropdown in navbar
This commit is contained in:
Binary file not shown.
@@ -1,7 +1,6 @@
|
||||
{% load static %}
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
@@ -26,10 +25,20 @@
|
||||
<ul>
|
||||
<li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
|
||||
<li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
|
||||
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link"> Pedidos</a></li>
|
||||
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link"> Produtos</a></li>
|
||||
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Cozinha</a></li>
|
||||
<li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link"> Balcão</a></li>
|
||||
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link"> Mapa</a></li>
|
||||
|
||||
<div class="dropdown">
|
||||
<li class="nav-item">Cadastros </li>
|
||||
<div class="dropdown-content">
|
||||
<a href="{% url 'products' %}" class="nav-link"> Produtos</a>
|
||||
<a href="{% url 'products' %}" class="nav-link"> Categorias</a>
|
||||
<a href="{% url 'products' %}" class="nav-link"> Clientes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="login-button">
|
||||
@@ -44,25 +53,26 @@
|
||||
<ul>
|
||||
<li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
|
||||
<li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
|
||||
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Pedidos</a></li>
|
||||
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link">Produtos</a></li>
|
||||
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Cozinha</a></li>
|
||||
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="dropdown">
|
||||
<li class="nav-item">Cadastros </li>
|
||||
<div class="dropdown-content">
|
||||
<a href="{% url 'products' %}" class="nav-link"> Produtos</a>
|
||||
<a href="{% url 'products' %}" class="nav-link"> Categorias</a>
|
||||
<a href="{% url 'products' %}" class="nav-link"> Clientes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="login-button">
|
||||
<button onclick="entrar()"><a href="#">Entrar</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- <nav >
|
||||
<ul>
|
||||
<li><a href="{% url 'mesas' %}">Mesas</a></li>
|
||||
<li><a href="#">Categorias</a></li>
|
||||
</ul>
|
||||
</nav> -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<br>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
|
||||
body {
|
||||
margin: 70px 0px 0px 0px;
|
||||
/* padding: 15px;
|
||||
font-family: Arial, sans-serif; */
|
||||
/* padding: 15px; */
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -61,7 +64,6 @@ body {
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
background-color: #0187a7;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -80,7 +82,53 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* .dropbtn {
|
||||
background-color: #04AA6D;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
}
|
||||
*/
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
background-color: #313238;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 3px 10px #464646;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #7a7a7a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */
|
||||
|
||||
@media screen and (max-width: 730px) {
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
margin-top: 40px;
|
||||
position: relative;
|
||||
border-radius: 0px;
|
||||
min-width: 160px;
|
||||
}
|
||||
.nav-bar {
|
||||
padding: 0.1rem 2rem;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
grid-template-columns: repeat(5, 2fr);
|
||||
gap: 10px;
|
||||
max-width: 95%;
|
||||
margin-top: 40px;
|
||||
margin: 40px;
|
||||
/* margin: 0 auto; */
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
.card-comanda:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -99,4 +99,10 @@ input, textarea {
|
||||
color: #333;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card-comanda:hover {
|
||||
transform: scale(1);
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
border-radius: 10px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
line-height: 30px; /* Centraliza o texto verticalmente */
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
@@ -25,10 +25,7 @@
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 730px) {
|
||||
@@ -38,13 +35,11 @@
|
||||
width: 99%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 20px;
|
||||
/* max-width: 1200px; */
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 95%;
|
||||
/* height: 80%; */
|
||||
background-color: #2b376e;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
@@ -54,4 +49,6 @@
|
||||
color: #333;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user