Menu met drie staten aan CMS

Menu met drie staten aan CMS

Gebaseerd op de vorige tutorial heb ik besloten om deze tutorial te maken om uit te leggen hoe je een menu met alle van de wet, kunt u dit gebruiken voor een php pagina die je hebt, en zelfs voor een CMS met name de beroemde WordPress.

Demo bekijken

Gereedschap

1 - Het beeld van elke sectie cut menu.

2 - De beelden zullen worden gebruikt in hover eigendom.

3 - programma voor HTML (bv. Dreamweaver).

4 - Enige kennis van: CSS, HTML en PHP.

HTML-structuur

Allereerst moeten we een nieuwe PHP-pagina te openen en de HTML-structuur van onze menukaart, die we zullen maken geordende lijsten te maken: 

  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 Start -> <li> <a class = "index" "index.php"> href = Home </ a> </ li> <li> <a class = "submit" href = "enviar.php"> Mail </ a> </ li> <li> <a class = "contact" href = "contacto.php"> Contact </ a> </ li> <li > <a class = "resources" href = "recursos.php"> Resources </ a> </ li> </ ul> <! - Einde Menu ->

Nu voegen we een id om de tag <ul> (eerste lijn), dan kunnen we een klasse toe te voegen aan elk etiket <a> (in een ander een voor elke link), dus zullen we contact hebben een index, een e-mail, een een bron.

Dat is voldoende om de html-structuur van onze menukaart, de pagina opslaan als index.php en ga met de stijl.

Het toevoegen van stijl

Open een nieuwe pagina css.

css-menu

Het opslaan als style.css en keerde terug naar de PHP-pagina voor link naar de stijl .

We begonnen onze weg naar het element "*" die, zoals uiteengezet in de video-tutorial over hoe scratch te maken van een wordpress thema, wordt gebruikt om verschillende functies toe te voegen aan alle elementen, dus elke eigenschap voegt u de asterisk, het zal worden genomen door alle elementen aanwezig zijn in onze site, zullen we gewoon toe te voegen marge en padding: 

  1
 2
 3
 4

  * (
 0 ; margin: 0;
 0 ; padding: 0;
 )

We gaan verder met het lichaam, zullen we de volgende afbeelding op de achtergrond plaats voor onze website is ook esthetisch:

en zo is het lichaam in onze css: 

  1
 2
 3
 4
 5

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

Oke, nu als we beginnen te geven aan onze stijl van het menu, in de eerste plaats om de ID "menu" 

  1
 2
 3
 4

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

Hij nam gewoon off punten aan het begin van elk item in de lijst (lijn 2) en het bovenste bereik van het paar ubircarlo bg (lijn 3).

We gaan verder met het element "li", die we alleen de eigenschap toevoegen "display: inline" aan elkaar worden gevestigd naast. 

  1
 2
 3

  # Menu li (
 inline ; display: inline;
 )

Nu is het tijd om het item bewerken "a", zal zij de volgende eigenschappen. 

  1
 2
 3
 4
 5
 6
 7
 8

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

De breedte en hoogte van elke foto (lijnen 3 en 4, respectievelijk), het pand float: left worden gevestigd een naar het recht van andere tekst-streepje en verwijderen, dat is binnen het label <a> linkermarge om het menu een beetje apart van elkaar.

We hebben nu gebruikt worden in elke klas label "a". dus we hebben verlaten. 

  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 (achtergrond: url (images / home.png) no-repeat;) # menu li a. Toepassen (achtergrond: url (images / enviar.png) no-repeat;) # menu li a. Neem contact op (achtergrond: url (images / contacto.png) no-repeat;) # menu li a. middelen (achtergrond: url (images / recursos.png) no-repeat;)

simpelweg toevoegen van de achtergrond voor elk element.

verder met de: hover van elk beeld tot ca. veranderen wanneer muis erover heen. 

  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. Index: hover (achtergrond: url (images / home-hover.png) no-repeat;) # menu li a. Zenden: hover (achtergrond: url (images / submit-hover.png) no-repeat ;) # menu li a. Contact: hover (achtergrond: url (images / contact-hover.png) no-repeat;) # menu li a. middelen: hover (achtergrond: url (images / resources-hover.png) nr. -repeat;)

Klaar, simpelweg toevoegen "hover" aan het eind van elk element en verandering van het imago van elk.

Met wat er tot nu toe gedaan gewoon te kunnen beschikken over de optie van het passeren van de muis over de afbeelding. Dit is waar PHP in het spel komt, zoals wij doen, zodat zij de sectie van het menu waar we zijn gemarkeerd?, We doen dit door simpelweg het toevoegen van een id aan het lichaam.

Bijvoorbeeld: 

  1

  "enviar" > <BODY Id = "post">

Als u geen gebruik maken van dit menu in WordPress of een ander CMS id voeg gewoon een ander lichaam van elke pagina en spring naar de volgende stap hieronder css, dat zou je je lichaam als dit hebben:

Bestand: index.php

lichaam: 

  1

  "index" > <BODY Id = "index">

dossier: enviar.php

lichaam: 

  1

  "enviar" > <BODY Id = "post">

dossier: contacto.php

lichaam: 

  1

  "contacto" > <BODY Id = "contact">

dossier: recursos.php

lichaam: 

  1
 2

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

Zoals ik al eerder zei, als je dit handmatig doen, vind je de css dat deze nieuwe sectie hieronder in deze tutorial.

Als u dit menu in WordPress, zullen we een probleem hebben, hoe we dat doen een id toe te voegen aan elk lichaam anders is als het menu in een bestand genaamd "header.php", dat wil zeggen dezelfde kop-bestand als voor het verzenden en de homepage te contacteren, dan voegen we de volgende PHP-code. onze pagina's.

<body> Voordat we schrijven het volgende: 

  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 ("/", "", $ page) $ page = str_replace (". PHP", "", $ page) $ page = str_replace ("? s =", "", $ page) $ page = $ pagina? $ pagina: 'default'?>

Ik zal uitleggen wat elke regel:

1 - Open de php-code

2 - Breng de URL in waar we zijn (denk eraan dat wordpress url wordt meer gebruikt in iets als "http://www.tublog/tu-pagina/).

3 - Waar laat een slash "/" zal worden vervangen door iets! "."

4 - Waar sommige gaan. "Php", zal worden vervangen door iets!.

5 - Waar elke heen? S = ", zal worden vervangen door iets!.

6 - Het geeft het resultaat.

7 - Nauwe php tag.

Dus wat we doen is de url en verwijder alle dingen die ons niet dienen voor onze id.

Nu gaan we naar ons lichaam en we voegen: 

  1

  "<?php echo $pagina ?>" > <Body id = "<? Php echo $ pagina?>>

Klaar! het lichaam zal de ID van de pagina waar we zijn.

We gaan nu aan onze stijl id toe te voegen aan het lichaam.

Voeg de volgende. 

  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 ; } # body index # menu li a. index (background: url (images / home-hover.png) no-repeat;) lichaam # email # menu li a. indienen (achtergrond: url (images / submit-hover.png) nr. -repeat;) instantie contact opnemen met # # menu li a. contact (achtergrond: url (images / contact-hover.png) no-repeat;) # # menu li lichaam een bron. middelen (achtergrond: url (images / resources-hover . png) no-repeat;)

Klaar, dat is wat ons vertelt is dat wanneer het lichaam heeft een van deze id (index, verzenden, contact, middelen), zal de "class" te nemen van het imago van de hover.

Klaar! We eindigden onze menukaart zowel WordPress als CMS of een andere pagina. PHP, hier beneden, waar laat ik de zip-bestanden zijn allemaal definitief.

DOWNLOAD HET RESULTAAT VAN DEZE TUTORIAL HIER

Michael is de bedenker en redacteur van skyandstars.net die gidsen en tutorials voor WordPress, CuteNews, PHP, HTML en meer publiceert. Ben een huidige student.

Mijael166

Misschien dat een van deze ingangen kan interessant voor u

7 Reacties op "Menu met de drie staten aan CMS

  1. Isa

    27 april 2009

    Antwoord

    Ik ben een beetje in de war, dat ik mijn menu's te zien als ik met Dreamweaver, en zeker gemakkelijker zijn: S

    Ga de orde heeft gesteld het niveau van de tutorial Michael! Ik feliciteer u:)

  2. Michael

    4.28.2009

    Antwoord

    Haha ja ... eigenlijk is het veranderen van beelden .. maar het effect dat hij wilde benadrukken is dat de pagina is gemarkeerd in deze .... HACR dificl wordpress is omdat het dezelfde kop, dat werkt voor alle pagina's entoncs ... ... want met PHP doet dit ... een kus isa =)

  3. Isa

    29 april 2009

    Antwoord

    AHM gaat! esque de eerste keer dat ik zag was niet Laat niets gemarkeerd wanneer u klikt op een andere pagina, waarom neus. Nu als ik zie het anders, in feite heb ik wel eens afgevraagd watt als hij zou, yeah yeah, ik hou van deze tutorial, en een ander aan de lijst van de statuten, dat ik moet doen, omdat mijn site kan het recht te dienen?

  4. Michael

    30/04/2009

    Antwoord

    Natuurlijk: P gewoon om het te doen van de id-stijl toegevoegd aan het lichaam:) ... of als u wilt automatisch in het lichaam, doe het met php ... maar goed .. naar uw wens ... Un beso!

  5. Isa

    30/04/2009

    Antwoord

    ok! hehe

  6. graciebird

    30/04/2009

    Antwoord

    Zeer goede tuto zal het de volgende keer u de versie. Dank u. Natuurlijk kan een bericht achterlaten op het forum met veel wanhoop, hoop me helpen kan. Via de website heeft mij enorm geholpen.

  7. fran

    6.22.2009

    Antwoord

    dat goede tuto, zeer nuttig, zeer goed uitgelegd, en de uiteindelijke bestanden. echt wordt gewaardeerd

Plaats een reactie

Naam (Verplicht)

E-mail (verplicht, maar niet gepubliceerd)

Web

Reactie (verplicht)

* Uw E-mail wordt gebruikt te relateren aan uw account in Gravatar