Menu Interativo PHP

Olá, se você deseja criar um menu que mude seus botões e funções de acordo com o usuário logado está lendo o tutorial certo :D.Bom chega de papo e vamos ao que interessa
OBS: O blogspot tem preferência pelo CSS dele próprio ou seja, os links terão a cor padrão (azul) mas se for testar o script ele será branco como no tutorial, assim como as decorações de lista que não aparecem no blogspot necessitam ser removidas no CSS pois elas aparecem fora do blogspot.


Primeiro Passo, Criar o Menu em si
Bom vamos construir um menu próprio em HTML e vamos por os botões que sempre vão existir no menu, como por exemplo Home.

Vamos começar usando uma Lista básica dessa forma:

• Home

Código:
<ul> <li>Home</li> </ul>
Agora vamos adicionar o Link do botão, neste caso vou usar a home do OpenShops PHP para demonstrar, então ficará assim:

• Home

Código:
<ul> <a href="http://openshopsphp.blogspot.com.br/"> <li>Home</li> </a> </ul>
Agora vamos estilizar nosso menu, mas para isso vamos utilizar o CSS, deixarei um Script pronto na próxima área de código, com cada código comentado para quem desejar se aprofundar no que cada código faz, e para aqueles que só se interessam no mais básico poderão pular essa parte.

Código CSS:
/* Antes de mais nada vamos entender como funciona os 'blocos' de configuração do css exemplo: a{ } a é a tag que vai receber as configurações de desing e o que ficar dentro dos colchetes '{}' são as configurações que serão aplicadas */ a{ text-decoration: none; /*Remove a decoração do texto (neste caso remove a linha que fica embaixo do link)*/ color:#FFFFFF ;/*Define a cor branca para o texto do menu*/ } a:hover{ text-decoration: none; /*remove a decoração do texto quando o mouse passa sobre o link*/ } /* O que fiz a seguir foi dizer que somente as tags LI que estiverem dentro da tag UL vão receber as seguintes configurações */ ul{ list-style: none; /*Remove a bolinha que fica antes da palavra na lista*/ } ul a li{ display: block; /*Faz com que crie um bloco expansível ao redor do item do menu*/ background-color: #A1A1A1; /*Define a cor Cinza ao menu*/ border: none; /*Remover a borda*/ box-shadow: 5px 5px 2px #888888; /*Pôe uma sombra com 5 pixels de distância (2 primeiros itens) e poe um espalhamento de 2 pixels também (3º item), com a cor cinza (4º item)*/ width:80px; /*Define a largura do menu*/ height:20px; /*Define a altura de cada item do menu*/ } /* Neste caso temos ainda o ':hover' após dizer a tag que vai receber o código para dizer que ele só será aplicado enquanto o mouse estiver sobre a tag, e assim que ele sair as configurações serão removidas */ ul a li:hover{ background-color: #60ade0; }
Menu com o CSS aplicado:

• Home

E nosso estilo está pronto, agora se quiser adicionar uma nova opção no menu basta inserir o código a seguir: <a href='LINK'> <li>PALAVRA QUE VAI APARECER NO MENU</li> </a>
Insira antes do '</ul>'

Agora vamos ao PHP ! primeiramente devemos mudar a extensão das páginas que vão conter o MENU para .php ao invés de .html, fazendo isso nos permitirá utilizar o PHP a qualquer momento dentro do arquivo.
agora vamos aplicar o PHP dentro do MENU desta forma: Ps: removerei o estilo dos códigos pois eles ocupam espaço desnecessário para esta parte <ul> <a href="http://openshopsphp.blogspot.com.br/"> <li>Home</li> </a> <?php ?> </ul>
Como podem ver adicionei '<?php?>' ao nosso código para que seja possível adicionar item ao menu.
agora vamos ver como podemos adicionar itens usando o PHP. código: <ul> <a href="http://openshopsphp.blogspot.com.br/"> <li>Home</li> </a> <?php echo "<a href="link item 2"> <li>item 2</li> </a>"; ?> </ul>
Menu com o segundo item sendo escrito pelo PHP e usando estilos

• Home
• item 2

Agora é com você, desenvolva o seu código PHP com a função desejada e utilize este tutorial para adicionar o item ao menu sempre que quiser, usando quantos itens quiser, PRINT DO DESIGN: