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 soaresra
      Olá colegas, eu venho avançando a cada dia na programação em PHP mas eu travei em uma estrutura e queria a ajuda dos colegas mais experientes.
       
      Eu tenho 3 tabelas:
      Adm_Funcionarios_Usuarios - contem login e senha
      # login,  senha
          jose,  1234
       
      Sis_Setores: aonde tem os nomes dos módulos e os links dele. Ex. Administrativo, Financeiro, etc.
      # linkNome          link
      administrativo     administrativo.php
      financeiro             financeiro.php
      vendas                  vendas.php
       
      Adm_Funcionarios_Usuarios_Acessos - contem login e módulos
      # login,  autorizados
           jose,  administrativo, financeiro
       
      Hoje eu só uso o menu carregando todas as opções
      $sql = "SELECT * FROM Sis_Setores WHERE linkNome = '$Sistema' AND situacao = 1;"; $return = mysqli_query($conexao, $sql) or trigger_error(" Query falhou! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR); while($LinhaMenu = mysqli_fetch_assoc($return)) { echo '<a href="'.$LinhaMenu["link"].'" target="_self">'.$LinhaMenu["linkNome"]."</a>"; } O que eu estou tentando fazer é: (levando em consideração que eu já tenha as informações do usuário logado)
       
      1 - Verifica quem é a pessoa logada / Já tenho isso pronto
      2 - Verifica se a pessoa logada existe na tabela Adm_Funcionarios_Usuarios_Acessos no campo login / Já tenho isso pronto
       
      Não estou conseguindo fazer
       
      3 - Verifica na tabela Adm_Funcionarios_Usuarios_Acessos o campo autorizados os módulos que serão carregados
      4 - Percorre a array com os valores, exemplo: administrativo, vendas
      5 - Se existe na array a palavra administrativo que também existe no campo linkNome da tabela Sis_Setores
      6 - Carrega no menu apenas os links que existem dentro da array.
       
      O que eu tentei fazer sem sucesso (coisas de café com leite):
       
      $sql = "SELECT autorizados FROM Adm_Funcionarios_Usuarios_Acessos WHERE iduser = 1;"; $return = mysqli_query($conexao, $sql) or die(mysqli_error($conexao)); if(!$result = mysqli_fetch_array($return)) { echo "Deu Ruim no SQL dos Acessos"; } else { $autorizados = $result["autorizados"]; //echo $autorizados; foreach($autorizados as $valor) { $sql = "SELECT * FROM Sis_Setores WHERE linkNome = '$autorizados' AND situacao = 1;"; $return = mysqli_query($conexao, $sql) or trigger_error(" Query falhou! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR); while($LinhaMenu = mysqli_fetch_assoc($LinksSubSistema)) { echo '<a href="'.$LinhaMenu["link"].'" target="_self">'.$LinhaMenu["linkNome"]."</a>".$br; } } } O erro que dá é 
      Warning: Invalid argument supplied for foreach() in testeArray.php on line 50 //Linha 50 -> foreach($autorizados as $valor)
       
      Agradeço desde já aos colegas.
       
       
       
       
       
       
       
    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
    • By Bruno Goedert Dalmolin
      Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 
      do HTML:
       
      <header>
          <ul id="Menu">
              <li><a href="SmartAce-Home.html">Home</a></li>
              <li><a href="">Sobre</a></li>
              <li><a href="">Contato</a></li>
          </ul>
      </header>
       
      do CSS:
       
      @charset "UTF-8";
      body {
          margin: 0;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: #112c38;
      }
      ul#Menu {
          
          text-align: center;
          margin: 0;
          padding: 0;
          display: flex;
          top: -10;
      }
      ul#Menu li{
          list-style: none;
          margin: 0 20px;
          transition: 0.5s;
      }
      ul#Menu li a{
          position: relative;
          text-decoration: none;
          padding: 5px;
          font-size: 18px;    
          font-family: sans-serif;
          color: #fff;
          text-transform: uppercase;
          transition: 0.5s;
      }
      ul#Menu:hover li a {
          transform: scale(1.4);
          opacity: .2;
          filter: blur(5px);
      }
      ul#Menu li a:hover {
          transform: scale(2);
          opacity: 1;
          filter: blur(0);
      }
      ul#Menu li a:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ff497c;
          transition: transform 0.5s;
          transform-origin: right;
          transform: scaleX(0);
          z-index: -1;
      }
      ul#Menu li a:hover:before {
          transition: transform 0.5s;
          transform-origin: left;
          transform: scaleX(1);
      }
×

Important Information

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