Menu horizontal

[adrsublimacao]

Boa tarde alguém consegue me ajudar como faço um menu igual do ifood linkado com as categoria dos produtos 

Segue um exemplo doenu

https://www.ifood.com.br/delivery/contagem-mg/toronto-burguer-lua-nova-da-pampulha/c32d21de-5688-4a5e-982d-516957f66b8e

 

 

Editado Maio 12, 2023 por adrsublimacao

[lowys]

você se refere a esse menu?

[Frank K Hosaka]

Consegui copiar quase tudo, mas o meu melhor trabalho está na gambiarra que eu fiz na caixa de busca:

navbar.php

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
 rel="stylesheet" 
 integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" 
 crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
 integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" 
 crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src=https://logopng.com.br/logos/ifood-43.png width=80 height=40></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a id=inicio class="nav-link" aria-current="page" href="inicio">Inicio</a></li>
<li class="nav-item">
<a id=restaurante class="nav-link active" aria-current="page" href="restaurante">Restaurantes</a>
</li>
<li class="nav-item">
<a id=mercado class="nav-link" aria-current="page" href="produto">Mercados</a></li>

<form class="d-flex" role="search">
<i class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg><input class="border-0 bg-transparent" placeholder="Busque por item ou loja" style=outline:none></i></form>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Contagem - MG
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></li>

<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul></div></div></nav></nav>
-------------------------------------------------------------------------------
produto.php

<?php
include('navbar.php');
echo "<div style='width:500;margin:0 auto;margin-top:50'>";
echo "Beringela <br>";
echo "Abacaxi <br>";
echo "</div>";
?>
<script>
	inicio.className="nav-link"
	restaurante.className="nav-link"
	mercado.className="nav-link active"
</script>
-------------------------------------------------------------------------------
inicio.php

<?php
include('navbar.php');
echo "<div style='width:500;margin:0 auto;margin-top:50'>";
echo "Aqui é o <br>";
echo "começo de tudo <br>";
echo "</div>";
?>
<script>
	inicio.className="nav-link text-danger"
	restaurante.className="nav-link"
	mercado.className="nav-link"
</script>

-------------------------------------------------------------------------------

restaurante.php

<?php
include('navbar.php');
echo "<div style='width:500;margin:0 auto;margin-top:50'>";
echo "Bar do Zé <br>";
echo "Bar da Esquina <br>";
echo "</div>";
?>
<script>
	inicio.className="nav-link"
	restaurante.className="nav-link text-danger"
	mercado.className="nav-link"
</script>

  

 

Editado Maio 14, 2023 por Frank K Hosaka