Browsing"Principal"

Criando um menu DropDown dinâmico com CSS3, PHP e MySQL

May 22, 2011 by     7 Comments    Posted under: MySQL, Principal, Programação

Salve, salve, caros amigos leitores. Hoje vamos fazer um menu dropdown muito bonito e inteligente, utilizando as melhores tecnologias web, mas sem uso de JQuery e/ou javascript. Para isso vamos precisar de um banco de dados com algumas tabelas, arquivos php de conexão com o banco e da estrutura do menu e um arquivo css para colocar nosso menu em ação. Então, vamos ao que interessa?

Começando com o banco de dados, teremos neste quatro tabelas: menu, submenus, usuários e permissões de acesso. As tabelas menu e submenu, logicamente estarão os registros da barra de navegação principal e dos itens de menu (submenus), respectivamente. A tabela de usuários e de permissões estarão o registro dos usuários do sistema/site e seus níveis de permissão. Sendo assim, a idéia é montar um menu bonito e simples com css e ainda ter controle sobre o que cada usuário pode acessar neste menu.

Abaixo está o código para criar o banco de dados. Cole o mesmo no editor SQL do PHPMyAdmin:

CREATE TABLE `menu` (
`pk_menu` int(11) unsigned NOT NULL AUTO_INCREMENT,
`menu` varchar(45) NOT NULL,
`permissoes_pk_permissao` int(11) unsigned NOT NULL,
`ativo` char(1) NOT NULL,
`ordem` char(2) NOT NULL,
PRIMARY KEY (`pk_menu`))
ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8

--

CREATE TABLE `menusub` (
`pk_menusub` int(11) unsigned NOT NULL AUTO_INCREMENT,
`menu_pk_menu` int(11) unsigned NOT NULL,
`submenu` varchar(45) NOT NULL,
`link` varchar(200) NOT NULL,
`ativo` char(1) NOT NULL,
`ordem` char(2) NOT NULL,
`permissoes_pk_permissao` int(11) unsigned NOT NULL,
PRIMARY KEY (`pk_menusub`))
ENGINE=InnoDB AUTO_INCREMENT=54 DEFAULT CHARSET=utf8

--

CREATE TABLE `permissoes` (
`pk_permissao` int(10) unsigned NOT NULL AUTO_INCREMENT,
`nivel_acesso` int(10) unsigned DEFAULT NULL,
`tipo` varchar(30) CHARACTER SET latin1 DEFAULT NULL,
PRIMARY KEY (`pk_permissao`))
ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8

--

CREATE TABLE `usuarios` (
`pk_usuario` int(10) unsigned NOT NULL AUTO_INCREMENT,
`permissoes_pk_permissao` int(10) unsigned NOT NULL,
`nome` varchar(50) CHARACTER SET latin1 DEFAULT NULL,
`cpf` varchar(15) CHARACTER SET latin1 DEFAULT NULL,
`login` varchar(12) CHARACTER SET latin1 DEFAULT NULL,
`senha` varchar(12) CHARACTER SET latin1 DEFAULT NULL,
`ativo` char(1) NOT NULL, PRIMARY KEY (`pk_usuario`),
KEY `vendedor_FKIndex1` (`permissoes_pk_permissao`))
ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8

Para efeitos de entendimento, todas as demais tabelas terão relacionamento 1..* (um para muitos) com a tabela permissões, para que seja possível fazer o controle de acesso dos usuários e também o controle de apresentação dos itens de menu conforme o nível do usuário autenticado.

Para evitar que o post fique muito extenso, não vou desenvolver a tela de login, o script de autenticação e nem a conexão com o banco de dados. Acredito que isso seja muito fácil de fazer e/ou de encontrar em buscadores net a fora. :)

Então vamos ao código do menu. Este é um menu personalizado, que apresenta junto a barra de navegação um logomarca e um link para encerrar o sistema. Como o menu é todo construído através de listas (ul e li), foi necessário utilizar uma tabela com três colunas para organizá-los de forma prática e eficiente. Até tentei fazer com divs, mas a idéia foi impossibilitada ao precisar utilizar a tag overflow:hidden do css para posicionar as três divs uma ao lado da outra. Ao utilizar essa tag, ela também esconde as listas de submenus, impossibilitando sua navegação. Então vamos ao código. Crie um arquivo com o nome de index.php, apenas como exemplo:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Desenvolvendo um menu DropDown dinâmico com CSS3, PHP e MySQL</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<table id="barra_menu" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="logo" align="center">
<a href="#"><img src="logo_topo.png" border="0" width="234" height="44" /></a>
</td>

<td id="menu">

< ?php
$userNivel = 1;
// Busca a lista de menus
$sqlMenu = "SELECT * FROM menu WHERE ativo = '1' ORDER BY ordem ASC";
$queryMenu = mysql_query($sqlMenu);
?>
<ul id="nav">
< ?php
while ($rowMenu = mysql_fetch_array($queryMenu)) {
// Verifica se o usuario logado tem permissao de acesso a este item de menu
if ($userNivel >= $rowMenu['permissoes_pk_permissao']) {
// Busca a lista de menu que pertence ao menu atual
$sqlSub = "SELECT * FROM menusub WHERE menu_pk_menu = '".$rowMenu['pk_menu']."' AND ativo = '1' ORDER BY ordem ASC";
$querySub = mysql_query($sqlSub);
// conta quantos submenus o menu atual tem
$numSub = mysql_num_rows($querySub);
// Se nenhum item de submenu, não cria o submenu
if ($numSub > 0) { // senão cria o submenu <span> ?>
<li><a href="#">< ?php print $rowMenu['menu'];?></a>
<ul>
< ?php while ($rowSub = mysql_fetch_array($querySub)) {
if ($userNivel <= $rowSub['permissoes_pk_permissao']) { ?>
<li><a href="inicio.php?menu=<?php print $rowSub['link'];?>">< ?php print $rowSub['submenu'];?></a></li>
< ?php }
} // fim while submenu ?>
</ul>
</li>
< ?php } // fim if submenu ?>
< ?php } // fim if nivel de acesso
} // fim while menu
?>
</span></ul>
</td>

<td id="sair" align="center">
<a href="#">Encerrar</a>
</td>
</tr>
</table>

</body>
</html>

Como pode-se observar, a primeira célula da tabela tem uma logomarca em formato de imagem. Na terceira célula da tabela, tem um link para encerrar a sessão do nosso sisteminha. E a mágica do menu está na célula do meio, onde encontra-se todo o código PHP responsável por fazer a leitura dos itens e subitens de menu e montar a estrutura HTML. Nosso menu encontra-se pronto em termos funcionais.

Agora vamos ao código CSS 3 que é o responsável por colocar nosso menu em ação em termos visuais. Crie um arquivo chamado menu.css  ou qualquer outro nome. Lembre-se de alterar o nome do arquivo de CSS na linha 06 do código acima caso venha a utilizar um nome diferente do que foi sugerido.

/* div da barra inteira */
#barra_menu {
width: 970px;
background: url(menu_bg.png) repeat-x;
height: 40px;
margin: 0 auto 0 auto;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}

/* logomarca */
#logo {
width: 234px;
height: 40px;
vertical-align: middle;
text-align: center;
}

/* celula do menu */
#menu {
width:610px;
}

/* celula do botão encerrar */
#sair a {
width: 80px;
vertical-align: middle;
text-align: center;
color: #87bef7;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

/* barra de navegação - normal */
#nav {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
margin: 0 auto 0 auto;
width: 600px;
padding: 5px 5px 0 0;
line-height: 12px;
}

#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

#nav a {
font-weight: bold;
color: #ffffff;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#nav a:hover {
background: #fd9c04;
color: #fff;
}

/* barra de navegação - efeito rollover */
#nav li:hover > a {
color: #ffffff;

/* Sombra dos itens de menu principal */
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
}

/* textos dos submenus - normal e efeito rollover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}

/* fundo dos submenus */
#nav ul a:hover {
background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* exibe o menu dropdown com evento rollover */
#nav li:hover > ul {
display: block;
}

/* configurações dos links do meio dos submenus */
#nav ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

#nav ul li {
float: none;
margin: 0;
padding: 0;
}

#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}

/* cantos arredondados do primeiro e último link dos submenus */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;

-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;

-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
}

/* configurações gerais */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}

* html #nav {
height: 1%;
}

Este código é responsável por montar visualmente nosso menu e realizar o efeito dropdown. Graças à ele, temos os cantos arredondados, sombras e demais efeitos visuais. A única imagem utilizada nesse exemplo está no background da tabela, mas se prestarem atenção no código, eu deixei pronto a inserção de imagens nos itens de menu e submenus também, podendo personalizá-lo a seu gosto.

Bom, por hoje é isto. Espero que tenham gostado do post e fiquem à vontade para comentar e tirar dúvidas sobre o mesmo.

Este menu foi adaptado baseado no menu demonstrativo do blog: Web Designer Wall

Update #1 – 14/12/2011

- A pedidos dos visitantes, foi corrigido as aberturas de tags do php que antes não continha a palavra ‘php’. Isto não é obrigatório quando se hospeda os projetos em servidores de hospedagem remoto (como é o meu caso). Mas para quem configura o servidor local, é importante colocar ou fazer a configuração no arquivo php.ini. Mas isso é assunto para outro post.

- Infelizmente o editor do WordPress insere um espaço entre o sinal ‘<’ e a sequência ‘?php’. Atentem a isso e corrijam sempre que copiar os códigos em PHP. Estou procurando uma forma de corrigir esse problema. Caso alguém saiba e queira deixar a dica, agradeço.

Categorias

Posts Recentes

Arquivo

May 2012
S M T W T F S
« Mar    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Tags