1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/Menu">V11 Web</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#textoNavbar" aria-controls="textoNavbar" aria-expanded="false" aria-label="Alterna navegação">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="textoNavbar">
        <ul class="navbar-nav mr-auto">
            
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal1">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Editar<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal2">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cadastros<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal3">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
        </ul>
        <span class="navbar-text text-white">
            <span class="sublinhado">Usuário</span>:gerente
        </span>

        <button id="sair" type="button" onclick="location.href = '/';" class="btn btn-outline-light espaco-esq">Sair</button>
    </div>
</nav>

Olá, estou desenvolvendo um código utilizando o HTML, e eu fui criar uma nav-bar, mas não está saindo como eu gostaria.

Eu tenho os itens de um menu, e todos, eles, ao clicar, abrirão um submenu, por enquanto todos os submenus tem o mesmo conteúdo. Mas ao clicar para abrir o submenu, ele não está abrindo no local certo... ele abre como se estivesse com um float: left;. Vou deixar um print pra vcs... eu gostaria que ele abrisse de acordo com o item clicado.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Perceba que no 1º print, o item clicado foi "Arquivos", enquanto no 2º print o item clicado foi "Pesquisas", mas os dois foram abertos no mesmo lugar. Me ajudem por favor.

5
  • Consegue elaborar um Exemplo Mínimo, Completo e Verificável? Da forma que está não conseguimos reproduzir o problema.
    – Woss
    Commented 12/06/2019 às 17:04
  • vou criar aqui, so um minuto @AndersonCarlosWoss
    – user149429
    Commented 12/06/2019 às 17:05
  • Ta usando qual versão do Bootstrap?
    – hugocsl
    Commented 12/06/2019 às 17:05
  • versão 4.3.1 @hugocsl
    – user149429
    Commented 12/06/2019 às 17:06
  • @AndersonCarlosWoss, acho que assim está adequado
    – user149429
    Commented 12/06/2019 às 17:11

1 Resposta 1

0

Na sua LI da Nav que tem o Sub-Menu faltou a classe .dropdown. Ela deveria estar assim

<li class="nav-item dropdown">

Veja corrigido, execute em página toda, para ver o menu sem ele estar collapsado

inserir a descrição da imagem aqui

Segue o código da imagem acima:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
	
</style>
</head>
<body>
	
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/Menu">V11 Web</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#textoNavbar" aria-controls="textoNavbar" aria-expanded="false" aria-label="Alterna navegação">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="textoNavbar">
			<ul class="navbar-nav mr-auto">
				<!-- @for (int i = 0; i < Model.MenuPrincipal.Count; i++)
				{ -->
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="" id="MenuPrincipal_@i" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" >@Model.MenuPrincipal[i]<span class="sr-only">(Página atual)</span></a>
						<div class="dropdown-menu" aria-labelledby="MenuPrincipal_@i">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<a class="dropdown-item" href="#">Something else here</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Separated link</a>
						</div>
					</li>
				<!-- } -->
			</ul>
			<span class="navbar-text text-white">
				<span class="sublinhado">Usuário</span>
				<!-- : @HttpContext.Session.GetString("Usuário") -->
			</span>
	
			<button id="sair" type="button" onclick="location.href = '/';" class="btn btn-outline-light espaco-esq">Sair</button>
		</div>
	</nav>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

2

Você deve fazer log-in para responder a esta pergunta.