Jump to content
Artur Mendonça

[Resolvido] dropdown menu com dados da tabela

Recommended Posts

Olá amigos,

tenho um menu com o seguinte código:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a href="findex.php"><img src="../fimg/folk-01.png" style="width:200px; height:130px; margin-left: 0px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px" alt="logotipo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsite">
                <span class="navbar-toggler-icon"></span>
            </button>
    </div>
            
   
            <a href="findex.php"><button class="btn btn-outline-danger btn-lg" type="button">Página Inicial</button></a>
   
    <div class="dropdown">
            <button class="btn btn-outline-success dropdown-toggle btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Ano
            </button>                   
        <div class="dropdown-menu" align="center" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="paginaano.php?ed=2018"><b>2018</b></a>
                <a class="dropdown-item" href="paginaano.php?ed=2017"><b>2017</b></a>
                <a class="dropdown-item" href="paginaano.php?ed=2016"><b>2016</b></a>    
        </div>            
    </div> 

           

<button class="btn btn-outline-dark btn-lg" type="button">Entrar</button>

<button class="btn btn-outline-dark btn-lg" type="button">Entrar</button>


</nav>
<!-- Fim do menu de navegação -->

 

 

Mas preciso que o dropdown carregue os dados da tabela MYSQL. A tabela "teste" tem os campos Idano e Ano e os dados a carregar são da coluna ano e queria também limitar aos últimos cinco anos.

 

Então onde está "href=paginaano.php?ed=2018" teria de ficar "href=paginaano.php?ed=#ano_carregado_da_tabela#" e onde está "2018" iria ficar com o #ano_carregado_da_tabela#.

 

Obrigado.

Share this post


Link to post
Share on other sites

O que você quer deve ser +/- isso

 

	//crio a conexão com o banco
	$connect = mysqli_connect("Host do seu banco de dados", "Username do seu host", "Senha do seu host", "Nome do seu banco");
	//crio a busca no banco
	$query = "SELECT ano FROM tbl_ano ORDER BY ano DESC";
	//executo a busca
	$result = mysqli_query($connect, $query);

	echo "<div class='dropdown-menu' align='center' aria-labelledby='dropdownMenuButton'>";
      //while para criar os itens do dropdown
	while($row = mysqli_fetch_array($result)){
		echo "<a class='dropdown-item' href='paginaano.php?ed=".$row['ano']."'>".$row['ano']."</a>";
	} 
	echo "</div>";

Lembrando que se você somente copiar e colar não irá funcionar, já que os dados do banco estão totalmente diferentes do seu. Será necessário alterar esses dados

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sherlock02
      Olá, Eu preciso criar um menu com dois níveis utilizando Javascript.
      O código está assim:
      <div id="menu">     <ul>        <li>Item 1</li>        <li>Item 2</li>        <li>Item 3</li>        <li>Item 4</li>     </ul> </div>
      Eu preciso transformá-lo em um segundo nível e inserir texto no estilo "Parent 1" no primeiro nível, dessa maneira:
      <div id="menu">     <ul>        <li>Parent 1          <ul class="sub-menu">           <li>Item 1</li>           <li>Item 2</li>           <li>Item 3</li>           <li>Item 4</li>          </ul>     </li>     </ul> </div>  
    • By Sapinn
      Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
    • By AlexandrePrezzi
      Preciso de uma ajuda....
       
      Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece 
       
      Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

      Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
      e isso acaba deixando empilhado..
       
      Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.
       
      Na imagem coloquei o q esta acontecendo.....

    • By Sapinn
      Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade 
       
      codigo do menu que fica a esquerda 
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu vertical reponsivo com html e css</title>
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
          <style>
             *{
          margin:0;
          padding:0;
      }
      .menuMobileVertical a{
          text-decoration:none;
          color:white;
          display:block;
          padding:20px 5px;
      }
      .menuMobileVertical a:hover{
          background:rgba(176,224,230);
          color:black;
      }
      body{
          font-family:arial;
      }
      input[type="checkbox"]:checked ~ nav{
          transform: translateX(350px);
      }
      .menuMobileVertical ul{
          list-style:none;
          position:absolute;
          top:70px;
          width:100%;
          
      }
      .icone-menu{
          font-size:40px;
      }
      input[type="checkbox"]{
          display:none;
      }
      .menuMobileVertical{
          background:rgba(16,16,16,.5);
          width: 350px;
          height: 100vh;
          left:-350px;
          position: absolute;
          transition:all 0.5s;
          
      }
      label{
          padding:15px;
          position:absolute;
          z-index:1;
      }

          </style>
      </head>
      <body>
          <div class="menuMobile">
              <input type="checkbox" id="check">
              <label for="check"><i class="bi bi-list icone-menu"></i></label>
              <nav class="menuMobileVertical">
                  <ul>
                      <li><a href="">HOME</a></li>
                      <li><a href="">LOGIN</a></li>
                      <li><a href="">ALUNO</a></li>
                      <li><a href="">PROFESSOR</a></li>
                      <li><a href="">CONTATO</a></li>
          </ul>
          </nav>
      </div>
      </body>
      </html>
    • By Sapinn
      Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
      Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
      Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
      ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.