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