Menu com três estados para CMS

Menu com três estados para CMS

Com base no tutorial anterior eu resolvi 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 mesmo para qualquer CMS, especialmente o famoso wordpress.

Ver Demo

Ferramentas

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

2 - As imagens serão utilizadas na propriedade hover.

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

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

Estrutura HTML

Primeiro de tudo temos de abrir uma nova página PHP e tornar a estrutura HTML do nosso menu, que vai 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--> id = <ul "menu"> <! - Menu Iniciar -> classe <li> href = = "index" "index.php"> Home </ a> </ li> <li> uma classe = "submit" href = "enviar.php"> Enviar </ a> </ li> <li> classe <a href = = "contact" "contacto.php"> Contato </ a> </ li> <li > class = <a href = "resources" "recursos.php"> Recursos </ a> </ li> </ ul> <! - Fim Menu ->

Agora, vamos adicionar um id para a tag <ul> (primeira linha), então nós adicionamos uma classe para cada <a> etiqueta (uma diferente para cada ligação), então teremos um índice, um e-mail, um contato 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

Abra uma nova página css.

css-menu

Salvar como style.css e voltou para a página PHP de ligação para o estilo .

Nós começamos o nosso caminho para o elemento "*", que, conforme explicado no vídeo tutorial sobre como fazer um tema wordpress do zero, é utilizado para adicionar características diferentes para todos os elementos, de modo que cada propriedade que você adicionar o asterisco, será tomadas por todos os elementos presentes em nosso site, vamos adicionar margem e padding: 

  1
 2
 3
 4

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

Continuamos com o corpo, vamos colocar a imagem de fundo a seguir para o nosso site é esteticamente bem:

e assim é o corpo em nossa CSS 

  1
 2
 3
 4
 5

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

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

  1
 2
 3
 4

  Menu # (
 none ; Estilo de lista: none;
 15px ; margin-top: 15px;
 )

Ele só tirou pontos no início de cada item na lista (linha 2) e limite superior do ubircarlo par bg (Linha 3).

Continuamos com o elemento "li", que só irá adicionar a propriedade "display: inline" para ser localizado ao lado da outra. 

  1
 2
 3

  # Li Menu (
 inline ; display: inline;
 )

Agora é hora de editar o item "a", que terá 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 uma (display: bloco; width: 60px de altura;: float; 102px: 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 um o direito de outros text-indent para excluir o texto que está dentro da etiqueta e <a> margem esquerda para separar o menu um pouco entre si.

Nós agora usado em todas as classes marcadas "a". assim que 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 a. Index (background: url (imagens / home.png) no-repeat;) # menu li a. Submit (background: url (imagens / enviar.png) no-repeat;) # menu li a. Contact (background: url (imagens contacto.png /) no-repeat;) # menu li a. recursos (background: url (imagens / recursos.png) no-repeat;)

basta adicionar o fundo a cada elemento.

continuar com o foco: de cada imagem para mudar ca quando o mouse por cima deles. 

  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 a. Índice: hover (background: url (imagens / home hover.png) no-repeat;) # menu li a. Enviar: hover (background: url (imagens / enviar hover.png) no-repeat ;) # menu li a. Contato: hover (background: url (imagens / contact hover.png) no-repeat;) # menu li recursos a.: hover (background: url (imagens / recursos hover.png) n. -repeat;)

Pronto, basta adicionar "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 para que ele marcou o ponto do menu onde estamos?, Fazemo-lo simplesmente adicionando um id para o corpo.

Por exemplo: 

  1

  "enviar" > id = <BODY "post">

Se você não vai usar esse menu no wordpress ou qualquer outro CMS id basta adicionar um corpo diferente de cada página e ir para o próximo passo abaixo css isso, você teria o seu corpo como esta:

Arquivo: index.php

corpo: 

  1

  "index" > id = <BODY "index">

file: enviar.php

corpo: 

  1

  "enviar" > id = <BODY "post">

file: contacto.php

corpo: 

  1

  "contacto" > id = <BODY "contact">

file: recursos.php

corpo: 

  1
 2

  ]
 "recursos" > id = <BODY "resources">

Como eu disse antes, se você fazer isso manualmente, encontre o css que esta nova seção mais adiante neste tutorial.

Se você estiver usando esse menu em WordPress, vamos ter um problema, como podemos adicionar um id para cada corpo diferente se o menu está em um arquivo chamado "header.php", ou seja, o mesmo cabeçalho de arquivo como para enviar e home page para entrar em contato, então vamos adicionar o seguinte código PHP. nossas páginas.

<body> Antes de escrever o seguinte: 

  1
 2
 3
 4
 5
 6
 7

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

Eu explico o que cada linha:

1 - Abra o código php

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

3 - Quando sair uma barra "/" será substituído por nada! ".

4 - Onde ir um pouco. "PHP", será substituído por qualquer coisa.

5 - Onde ir? = S ", será substituído por qualquer coisa.

6 - retorna o resultado.

7 - Feche a tag php.

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

Agora vamos para o nosso corpo e vamos acrescentar: 

  1

  "<?php echo $pagina ?>" > <Corpo id = "<? Php echo $ página?>>

Pronto! o corpo vai ter a identificação da página de onde estamos.

Passamos agora ao nosso id adicionar estilo ao 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. (background: url (imagens / home hover.png) no-repeat;) do corpo de e-mail # # menu li a. apresentar (background: url (imagens / enviar hover.png) n. -repeat;) contato corporal # menu li contacto a. (background: url (imagens / contact hover.png) no-repeat;) corpo # # menu li um recurso. recursos (background: url (imagens / recursos pairar- . PNG) no-repeat;)

Pronto, é isso que nos diz é que quando o corpo tem algum destes id (índice, enviar contacto, recursos), fará a "classe" tomar a imagem do hover.

Pronto! Nós terminamos nosso menu ambos WordPress como CMS ou qualquer outra página. Php, aqui onde eu deixar os arquivos zip são todos final.

DOWNLOAD O resultado deste tutorial aqui

Michael é o criador e editor de skyandstars.net que publica guias e tutoriais para WordPress, CuteNews, PHP, HTML e muito mais. É um estudante universitário atual.

Mijael166

Talvez uma destas entradas que você poderia estar interessado em

7 Respostas para "Menu com três estados para CMS

  1. Isa

    27 de abril de 2009

    Resposta

    Estou um pouco confusa, que eu vejo a minha menus como eu faço com o Dreamweaver e, certamente, é mais fácil: S

    Vá e elevou o nível do Michael tutorial! Quero parabenizá-lo:)

  2. Michael

    28 abr 2009

    Resposta

    Haha, sim ... é basicamente alterar fotos .. mas o efeito que ele queria enfatizar é que a página é destaque nestes .... HACR wordpress dificl é porque o mesmo cabeçalho que funciona para todas as páginas ... entoncs ... porque com php faz isso ... um beijo isa =)

  3. Isa

    29 de abril de 2009

    Resposta

    Ahm vai! esque a primeira vez que vi não deixar nada de destaque quando você clicar em outra página, porque o nariz. Agora, se eu vê-lo de forma diferente, na verdade, eu às vezes me perguntei como seria watts yeah, yeah, eu gosto deste tutorial, outro para a lista dos estatutos que eu tenho que fazer, porque o meu site pode servir certo?

  4. Michael

    30 abr 2009

    Resposta

    Claro: P só tem que fazê-lo a partir do id mais estilo ao corpo:) ... ou se você quiser colocar automaticamente o corpo, fazer isso com php ... mas bem .. é seu gosto ... Un beso!

  5. Isa

    30 abr 2009

    Resposta

    ok! hehe

  6. graciebird

    30 abr 2009

    Resposta

    Muito bom tuto vai utilizá-lo na próxima vez que você alterar a versão. Obrigado. É claro que deixar uma mensagem no fórum com um monte de desespero, a esperança pode me ajudar. Através do site tem me ajudado muito.

  7. fran

    22 de junho de 2009

    Resposta

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

Deixe um comentário

Nome (Obrigatório)

Email (obrigatório, mas não publicado)

Teia

Comentário (Obrigatório)

* Seu e-mail é usado para relacioná-la com sua conta no Gravatar