My navbar looks like this:
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<span class="d-flex mx-3">
<img src="" width="30" height="30" alt="Deliveboo">
<h4 class="mx-3">Deliveboo</h4>
</span>
<hr class="mx-3">
<div class="d-flex justify-content-center p-3">
@if (Auth::guest())
<a class="btn btn-primary text-center" href=""
role="button">Accedi</a>
<a class="btn btn-primary text-center" href=""
role="button">Registrati</a>
@endif
@if (Auth::check())
<a class="btn btn-primary" href="" role="button">Vai
alla tua dashboard</a>
@endif
</div>
<hr class="mx-3">
</div>
These are my scripts:
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "375px";
document.getElementById("root").style.overflow = "hidden";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("root").style.overflow = "auto";
}
</script>
I want the navbar to close when I click outside of it. I'm new to JavaScript.
The entire view:
<body id="root">
<header>
<div id="nav-bg">
<nav class="navbar navbar-light d-flex justify-content-space-between container">
<div>
<a class="navbar-brand" href="#">
<span class="text-white">
<img src="" width="100" height="40"
class="d-inline-block align-top" alt="Logo">
</span>
</a>
</div>
<div>
@if (Auth::guest())
<a class="btn btn-light mx-3" href="" role="button"><i class="fas fa-home mr-2"></i>Accedi o registrati</a>
@endif
@if (Auth::check())
<a class="btn btn-light" href="" role="button">Vai alla
tua dashboard<i class="fas fa-home"></i></a>
@endif
<a class="btn btn-light" href="#" role="button" onclick="openNav()"><i class="fas fa-bars mr-2"></i>Menu</a>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<span class="d-flex mx-3">
<img src="" width="30" height="30" alt="Deliveboo">
<h4 class="mx-3">Deliveboo</h4>
</span>
<hr class="mx-3">
<div class="d-flex justify-content-center p-3">
@if (Auth::guest())
<a class="btn btn-primary text-center" href=""
role="button">Accedi</a>
<a class="btn btn-primary text-center" href=""
role="button">Registrati</a>
@endif
@if (Auth::check())
<a class="btn btn-primary" href="" role="button">Vai
alla tua dashboard</a>
@endif
</div>
<hr class="mx-3">
</div>
</nav>
</div>
<div id="hero">
<div class="container">
<div class="row">
<div id="hero-text" class="col-6 mb-5 img-animation">
<h1>I piatti che ami, a domicilio.</h1>
</div>
</div>
</div>
</div>
</header>
<main>
<section id="deliveboo-section" class="my-5">
<div class="container">
<h2 class="mb-3 font-weight-bold">La selezione di Deliveboo</h2>
<div class="row">
<div class="col-lg-6 col-md-12 d-flex py-3">
<div class="card flex-grow-1 shadow-sm" style="width: 18rem;">
<a class="text-decoration-none text-dark" href="">
<img src="" class="card-img-top" alt="Comfort-food">
<div class="mt-4 p-3">
<h5 class="card-title">Comfort food</h5>
<p class="card-text">I grandi classici che scaldano il cuore, perfetti in ogni momento.</p>
<p>Scopri Comfort Food</p>
</div>
</a>
</div>
</div>
<div class="col-lg-6 col-md-12 d-flex py-3">
<div class="card flex-grow-1 shadow-sm" style="width: 18rem;" >
<a class="text-decoration-none text-dark" href="">
<img src="" class="card-img-top" alt="dessert">
<div class="mt-4 p-3">
<h5 class="card-title">Dolci e dessert</h5>
<p class="card-text">Dolci piaceri per rendere la giornata ancora più gustosa.</p>
<p>Scopri Dolci e dessert</p>
</div>
</a>
</div>
</div>
<div class="col-lg-6 col-md-12 d-flex py-3">
<div class="card flex-grow-1 shadow-sm" style="width: 18rem;">
<a class="text-decoration-none text-dark" href="">
<img src="" class="card-img-top" alt="food">
<div class="mt-4 p-3">
<h5 class="card-title">Perfetti da condividere</h5>
<p class="card-text">Serve una scusa per stare insieme? Ordina dai ristoranti che trasformeranno la tua serata in un vera festa.</p>
<p>Scopri Perfetti da condividere</p>
</div>
</a>
</div>
</div>
<div class="col-lg-6 col-md-12 d-flex py-3">
<div class="card flex-grow-1 shadow-sm" style="width: 18rem;" >
<a class="text-decoration-none text-dark" href="">
<img src="" class="card-img-top" alt="food" >
<div class="mt-4 p-3">
<h5 class="card-title">Esclusiva deliveboo</h5>
<p class="card-text">I più famosi, i più buoni, i preferiti. Quelli che trovi solo su Deliveboo.</p>
<p>Scopri Esclusiva Deliveboo</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="default-section" class="py-5">
<div class="container">
<h2 class="mb-4 font-weight-bold">I tuoi piatti preferiti, consegnati da noi</h2>
<div class="row row-cols-1 row-cols-md-3 justify-content-center">
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Sushi" >
<div class="mt-2">
<h5 class="card-title text-capitalize">Sushi</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Pokè-bowl">
<div class="mt-2">
<h5 class="card-title text-capitalize">Pokè bowl</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Cucina-Messico">
<div class="mt-2">
<h5 class="card-title text-capitalize">Cucina messicana</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Fast-food">
<div class="mt-2">
<h5 class="mt-2">Fast Food</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Pizza">
<div class="mt-2">
<h5 class="card-title text-capitalize">Pizza</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Pasta">
<div class="mt-2">
<h5 class="card-title text-capitalize">Cucina italiana</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Frittura-di-pesce">
<div class="mt-2">
<h5 class="card-title text-capitalize">Pesce</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Kebab">
<div class="mt-2">
<h5 class="card-title text-capitalize">Kebab</h5>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div>
<a href="">
<img src="" class="card-img-top shadow-sm" alt="Cucina-Vietnam">
<div class="mt-2">
<h5 class="card-title text-capitalize">Cucina vietnamita</h5>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="suggested" class="m-5">
<div class="container">
<h2 class="mb-4">Cerchi qualcos'altro?</h2>
@foreach ($types as $type)
<a href="" class="btn px-3"></a>
@endforeach
</div>
</section>
</main>
from Recent Questions - Stack Overflow https://ift.tt/3cMAKt1
https://ift.tt/eA8V8J
No comments:
Post a Comment