Nav Bar com DropDown em html

06/03/2020

0

HTML Cascading DropdownList

Podem me ajudar?
Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha

o que estou fazendo de errado?
<!DOCTYPE html>
<html lang="pt-br">
  <head>
  <!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>::: TESTE :::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}
</style>
  </head>
  <body>


  
	<nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
        <!--<img  width="80px" height="30" src="#" title="seu texto" vspace="10px"/>-->
        </div>

        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li>
            <li class="nav-link"><a href="#">LINK C</a></li>
            <li><a href="#">LINK D</a></li>
            <li><a href="#">LINK E</a></li>
            <li><a href="#">LINK F</a></li>
            <li><a href="#" target="a_blank">LINK G</a></li>   
                <div class="dropdown">
                    <div class="dropdown-content" id="myDropdown">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div> 
        </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>  User</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li>
      </ul>

  </div>
</nav>




  </body>
</html>
Jeferson

Jeferson

Responder

Post mais votado

06/03/2020

No bootstrap têm o dropdown pronto nos exemplos dá uma olhada na documentação: https://getbootstrap.com/docs/4.4/components/navbar/

mas resumindo, você pode adicionar um dropdown da seguinte maneira, após um link item da navbar adicione issoa sua navbar e depois é só ir incrementando: 

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>

Matheus Campos

Matheus Campos
Responder
Gostei + 1

Mais Posts

08/03/2020

Jeferson

Olá Matheus

Testei aqui, e não foi

o código ficou assim:
<!DOCTYPE html>
<html lang="pt-br">
  <head>
  <!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>::: TESTE :::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <style>
.dropdown {
  position: relative;
  display: inline-block;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
 
.dropdown:hover .dropdown-content {
  display: block;
   
}
</style>
  </head>
  <body>
 
 
   
    <nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
        <!--<img  width="80px" height="30" src="#" title="seu texto" vspace="10px"/>-->
        </div>
 
        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li>
            <li class="nav-link"><a href="#">LINK C</a></li>
            <li><a href="#">LINK D</a></li>
            <li><a href="#">LINK E</a></li>
            <li><a href="#">LINK F</a></li>
            <li><a href="#" target="a_blank">LINK G</a></li>   

            <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>

        </ul>
 
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>  User</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li>
      </ul>
 
  </div>
</nav>
 
 
 
 
  </body>
</html>
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar