Curso Criando um Site do Zero - Aula 08 - Menu responsivo II

Nesta aula mudaremos nossa atual index.php para pasta "views", afinal conforme o padrão de layout MVC, a parte visual do site deve ser separada das demais áreas.

Para redirecionar a visualização do site para a views/index.php, criaremos um arquivo de redirecionamento com o seguinte código:

<?php
header ("HTTP/1.1 301 Moved Permanently");
header ("location: views/");
?>

Criaremos também o nosso arquivo .htacess que será responsável pelas URL AMIGÁVEIS que são muito importantes para o SEO (Otimização para Motores de Busca). Este arquivo .htacess deve ser salvo no diretório raiz do nosso site.

Segue abaixo o código do arquivo .htacess.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([a-zA-Z0-9]+)/([a-zA-Z0-9]+)$ $1/$2.php

Explicando o código acima: Na linha um ligamos a reescrita de linguagem. A primeira linha abaixo serve para que o sistema desconsidere a extensão ".php". Na 3ª linha dizemos ao nosso sistema para desconsiderar nomes de diretórios. Na quarta linha realizamos a escrita da regra. �? iniciada com o acento circunflexo e finalizada com cifrão. Os colchetes indicam que poderão ser digitadas letras de a-z maiúsculas e minúsculas, além dos numerais de 0 a 9.

Concluiremos também a estilização dos nossos links, conforme o esboço. Entre as configurações de estilização inseriremos o :hover em que será estilizado para que ao passar o mouse apareça a borda superior ao link. Marcaremos também os links com display:block; para que o link ocupe toda a li.

O código final dos links ficará da seguinte maneira.

nav {float: left; width: 100%; font-weight: bold; font-family: Verdana,sans-serif; color: #FFFFFF; }
    nav li{float: left; cursor: pointer;}
    nav li a{color: #FFFFFF; text-decoration: none;}

/*Smartphone*/
@media only screen and (max-width: 480px){
    nav li{width: 90%; display: none; background: #A9CF46; height: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 10%; border-bottom: 1px #FFFFFF solid; color: #333333; }
    nav li:first-child{margin-top: 1px;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){
    nav li{width: 90%; display: none; background: #A9CF46; height: 30px; padding-top: 10px; padding-bottom: 10px; padding-left: 10%; border-bottom: 1px #FFFFFF solid; color: #333333; cursor: pointer;}
    nav li:first-child{margin-top: 1px;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
    nav{position: absolute; padding-left: 25%; }
        nav li{width: 15%; padding-top: 20px; text-align: center;}
        nav li:last-child a{color: #A9CF46;}
        nav li:hover{border-top: 7px solid #A9CF46; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}
        nav li:hover a{color: #A9CF46;}
}

Finalaremos nosso menu responsivo com as configuração do JQuery.

$('nav li').on('click',function(){
   var linke = $(this).children('a').attr('href');
   window.location.href=linke;
});

O código acima diz que ao clicar no nav li, pegaremos o atributo href do link e realizaremos o encaminhamento do usuário para aquela localização.