Menu com três estados para CMS

Menu com três estados para CMS

Baseado no tutorial anterior, decidi criar este tutorial para explicar como fazer um menu com todas as leis, você pode usá-lo para qualquer página PHP que você tem, e até mesmo para qualquer CMS especialmente o famoso wordpress.

Ver Demo

Ferramentas

1 - A imagem de cada menu corte seção.

2 - As imagens estão a ser utilizados na propriedade foco.

3 - Programa de HTML (dreamweaver, por exemplo).

4 - Alguns conhecimentos de: CSS, HTML e PHP.

HTML Estrutura

Primeiro de tudo o que precisamos para abrir uma nova página PHP e tornar a estrutura HTML do nosso menu, que vamos criar listas ordenadas: 

  1
 2
 3
 4
 5
 6

 "menu" > <!--Comienza Menu--> < li >< a class = "index" href = "index.php" > Home < / a >< / li > < li >< a class = "enviar" href = "enviar.php" > Enviar < / a >< / li > < li >< a class = "contacto" href = "contacto.php" > Contacto < / a >< / li > < li >< a class = "recursos" href = "recursos.php" > Recursos < / a >< / li > < / ul > <!--Termina Menu--> <ul "menu"> Id = <! - Menu Iniciar -> class = <li> "index" href = "index.php"> Home </ a> </ li> <li> <a classe = "email" href = "enviar.php"> Enviar </ a> </ li> <li> classe <a href = "contact" = "contacto.php"> Contato </ a> </ li> <li > class = <a "resources" href = "recursos.php"> Recursos </ a> </ li> </ ul> <! - End Menu ->

Agora, vamos adicionar uma id para a tag <ul> (primeira linha), então vamos adicionar uma classe para cada marca <a>, (um diferente em cada ligação), então teremos um índice, um e-mail, um contacto e um recurso.

Isso é o suficiente para ter a estrutura HTML do nosso menu, salvar a página como index.php e ir com o estilo.

Adicionando estilo

Nós abrimos uma nova página CSS.

css-menu

Salvar como style.css e voltou para a página PHP com link para o estilo.

Nós começamos o nosso caminho para o elemento "*" que, como explicado no videotutorial como fazer um tema wordpress a partir do zero, é usado para adicionar características diferentes para todos os elementos, assim, cada propriedade que você adicione o asterisco, que será tomadas por todos os elementos presentes em nossa página, e muito menos adicionar margem e padding: 

  1
 2
 3
 4

 : 0 ; padding : 0 ; } * (Margin: 0; padding: 0;)

Continuamos com o corpo, nós colocamos a imagem de fundo para as nossas páginas seguintes são esteticamente bem:

e assim é o corpo em nosso CSS: 

  1
 2
 3
 4
 5

 : url ( imagenes/bg.png ) repeat-x #333333 ; font-size : 12px ; font-family : Arial , Helvetica , sans-serif ; } fundo do corpo (: url (images / bg.png) repeat-x # 333333; font-size: 12px; font-family: Arial, Helvetica, sans-serif;)

Ok, agora se nós começarmos a dar estilo ao nosso menu, em primeiro lugar para o menu "id" 

  1
 2
 3
 4

  # Menu (
 none ; list-style: none;
 15px ; margin-top: 15px;
 )

Só tomamos os pontos no início de cada item na lista (linha 2) e intervalo máximo de um par de ubircarlo bg (linha 3).

Continuamos com o elemento "li", que só vamos adicionar a propriedade "display: inline" para ser localizado ao lado do outro. 

  1
 2
 3

  # Menu li (
 inline ; display: inline;
 )

Agora é hora de editar o item "a", que tomará as seguintes propriedades. 

  1
 2
 3
 4
 5
 6
 7
 8

 display : block ; width : 60px ; height : 102px ; float : left ; text-indent : -5000px ; margin-left : 2px ; } # Menu li um (display: block; width: 60px; height: 102px; float: left; text-indent:-5000px; margin-left: 2px;)

A largura ea altura de cada imagem (linhas 3 e 4, respectivamente), a propriedade float: left para ser localizado em um direito de outro texto-travessão para eliminar o texto que está dentro da tag <a>, e margem esquerda para separar o menu um pouco uns aos outros.

Temos agora utilizada em cada classe chamada "a". so nos resta. 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 { background : url ( imagenes/home.png ) no-repeat ; } #menu li a .enviar { background : url ( imagenes/enviar.png ) no-repeat ; } #menu li a .contacto { background : url ( imagenes/contacto.png ) no-repeat ; } #menu li a .recursos { background : url ( imagenes/recursos.png ) no-repeat ; } # Menu li índice A. Antecedentes (: url (images / home.png) no-repeat;) # menu li post a. (background: url (images / enviar.png) no-repeat;) # menu li contacto a. (background: url (images / contacto.png) no-repeat;) # menu li a. recursos do fundo (: url (images / recursos.png) no-repeat;)

basta adicionar o plano de fundo para cada elemento.

continuar com a: hover de cada imagem para ca mudança quando o mouse sobre eles. 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 :hover { background : url ( imagenes/home-hover.png ) no-repeat ; } #menu li a .enviar :hover { background : url ( imagenes/enviar-hover.png ) no-repeat ; } #menu li a .contacto :hover { background : url ( imagenes/contacto-hover.png ) no-repeat ; } #menu li a .recursos :hover { background : url ( imagenes/recursos-hover.png ) no-repeat ; } # Menu li índice A.: hover (background: url (images / home-hover.png) no-repeat;) # menu li e-mail a.: hover (background: url (images / pós-hover.png) no-repeat ;) # menu li a. Contato: hover (background: url (images / contact-hover.png) no-repeat;) # menu li a. recursos: hover (background: url (images / Recursos hover.png) n. -repeat;)

Geralmente, basta acrescentar "pairar" no final de cada elemento e alterar a imagem de cada um.

Com o que foi feito até agora só vai ter disponível a opção de passar o mouse sobre a imagem. Isto é onde o PHP entra em jogo, como fazemos isso, é marcada a secção do menu, onde estamos?, Fazemo-lo por simplesmente adicionando um id para o corpo.

Por exemplo: 

  1

  "enviar" > <body Id = "post">

Quando não utilizar este menu no wordpress ou qualquer outro CMS basta adicionar um id diferente do corpo de cada página e passar para o próximo passo a seguir este css, você deixou o seu corpo algo como isto:

Arquivo: index.php

corpo: 

  1

  "index" > <body Id = "index">

file: enviar.php

corpo: 

  1

  "enviar" > <body Id = "post">

file: contacto.php

corpo: 

  1

  "contacto" > <body Id = "contact">

file: recursos.php

corpo: 

  1
 2

  ]
 "recursos" > <body Id = "resources">

Como eu disse antes, se você fazer isso manualmente, encontrar a nova secção abaixo css que neste tutorial.

Se você estiver usando este menu no WordPress, vamos ter um problema, como é que vamos adicionar um id para cada organismo de forma diferente se o menu está em um arquivo chamado "header.php", ou seja, o mesmo cabeçalho de arquivo como para enviar para a home page para contato, então adicione o seguinte código PHP. para nossas páginas.

<body> Antes de escrever o seguinte: 

  1
 2
 3
 4
 5
 6
 7

 = $_SERVER [ 'REQUEST_URI' ] ; $pagina = str_replace ( "/" , "" , $pagina ) ; $pagina = str_replace ( ".php" , "" , $pagina ) ; $pagina = str_replace ( "?s=" , "" , $pagina ) ; $pagina = $pagina ? $pagina : 'default' ?> <? Php $ page = $ _SERVER [ 'REQUEST_URI'], $ page = str_replace ( "/", "página", $) $ page = str_replace ( "php". "Página", $) $ page = str_replace ( "? s =" "," page, $) $ page = $ page: $ page: 'default'?>

Eu vou explicar o que cada linha:

1 - Abra o código PHP

2 - Traga a URL em que estamos (lembre-se que o url wordpress é usado mais em algo como "http://www.tublog/tu-pagina/").

3 - Onde ir slash "/", será substituída por nada! ".

4 - Onde ir algum. "PHP", será substituída por nada!.

5 - Onde ir? S = ", será substituída por nada!.

6 - Ele retorna o resultado.

7 - Fechar a tag PHP.

Então o que nós fazemos é pegar a url e remover todas aquelas coisas que não nos servem para o nosso id.

Agora, deixe o nosso corpo e nós vamos adicionar o seguinte: 

  1

  "<?php echo $pagina ?>" > <Id Body = "<? Php echo $ page?>">

Pronto! o corpo vai ter o ID da página em que nos encontramos.

Passamos agora à nossa id adicionar o estilo para o corpo.

Adicione o seguinte. 

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12

 { background : url ( imagenes/home-hover.png ) no-repeat ; } body #enviar #menu li a .enviar { background : url ( imagenes/enviar-hover.png ) no-repeat ; } body #contacto #menu li a .contacto { background : url ( imagenes/contacto-hover.png ) no-repeat ; } body #recursos #menu li a .recursos { background : url ( imagenes/recursos-hover.png ) no-repeat ; } índice de # menu li índice A. Antecedentes (: url (images / home-hover.png) no-repeat;) body # email # menu li post a. (background: url (images / pós-hover.png) n. -repeat;) corpo li contato # # menu. contato (background: url (images / contact-hover.png) no-repeat;) corpo recursos # # menu li recursos a. (background: url (images / recursos-hover . png) no-repeat;)

Normalmente, isso é o que diz é que quando o corpo tem um dos índices (id, email, contatos, recursos), fará a "classe" assumir a imagem do hover.

Esperto! Portanto, temos de concluir nosso menu para o Wordpress como CMS ou qualquer outra página. Php, deixo aqui o zip para baixo, onde todos os arquivos finais.

BAIXAR O resultado deste tutorial aqui

Michael é o criador e editor skyandstars.net que publica guias e tutoriais sobre WordPress, CuteNews, PHP, HTML e muito mais. Acutalmente estudante universitário.

Mijael166

Talvez uma dessas entradas poderão interessá-lo

7 Comentários sobre "Menu com três estados para CMS"

  1. Isa

    Abril 27, 2009

    Resposta

    Eu estou um pouco confuso, que eu vejo meus menus como eu faço com o Dreamweaver, e certamente são mais fáceis: S

    Vá e elevou o nível dos tutoriais Michael! Parabéns:)

  2. Michael

    Abril 28, 2009

    Resposta

    Jajaja si ... é basicamente mudando fotos .. mas o efeito que eles queriam enfatizar é que a página seja marcada nestes dificl .... HACR no wordpress é que funciona o mesmo cabeçalho para todas as páginas ... ... então com o PHP é entoncs faz isso ... um beijo isa =)

  3. Isa

    Abril 29, 2009

    Resposta

    Ahm justo! esque a primeira vez que vi algo que não em destaque quando repicadas em outra página, porque nariz. Agora, se eu vê-lo de forma diferente, na verdade, eu às vezes me perguntei watts como seria se se eu gostar deste tutorial, outra para a lista dos estatutos, que eu faço, porque o meu site pode servir não?

  4. Michael

    Abril 30, 2009

    Resposta

    Claro: P só tem que fazê-lo a partir do estilo de adicionar o id para o corpo:) ... ou se você desejar para automaticamente colocar o corpo, fazê-lo com o php ... mas bom .. é a seu gosto ... Un beso!

  5. Isa

    Abril 30, 2009

    Resposta

    ok! jeje

  6. graciebird

    Abril 30, 2009

    Resposta

    Muito bom tuto vai utilizá-lo da próxima vez que você alterar a versão. Obrigado. Claro que deixar uma mensagem no fórum me ajudar muita esperança ao desespero. Através da web me ajudou muito.

  7. fran

    Junho 22, 2009

    Resposta

    que buen tuto, muito útil, muito bem explicado, e com os arquivos finais. realmente é apreciada

Deixar um comentário

Nome (obrigatório)

E-mail (Obrigatório, mas não publicado)

Web

Comentário (Obrigatório)

* Seu E-mail é usado para relacioná-lo à sua conta no Gravatar