Menü mit drei Staaten für CMS

Menü mit drei Staaten für CMS

Basierend auf den letzten Tutorial habe ich beschlossen, dieses Tutorial zu erklären, wie ein Menü mit allen Recht machen zu erstellen, können Sie es auf jeder PHP-Seite haben Sie verwenden, und sogar für jeden CMS vor allem die berühmte WordPress.

Demo anzeigen

Werkzeuge

1 - Das Bild der einzelnen Abschnitte geschnitten Menü.

2 - Die Bilder sind im Schwebeflug Eigenschaft verwendet werden.

3 - Programm für HTML (zB Dreamweaver).

4 - Einige Kenntnisse in: CSS, HTML und PHP.

HTML-Struktur

Zunächst einmal brauchen wir eine neue PHP-Seite zu öffnen und die HTML-Struktur aus unserer Speisekarte, die wir bestellt schaffen machen Listen: 

  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 = <! - Start Menu -> <li> <a class = "index" href = "index.php"> Startseite </ a> </ li> <li> <a class = "email" href = "enviar.php" Senden> </ a> </ li> <li> <a class = "contact" href = "contacto.php"> Kontakt </ a> </ li> <li > <a class = "resources" href = "recursos.php"> Resources </ a> </ li> </ ul> <! - End Menu ->

Nun fügen wir eine ID zu dem Tag <ul> (erste Zeile), dann fügen wir eine Klasse, die jeden Tag <a>, (eine andere, auf jeden Link), so werden wir einen Index, ein E-Mail, ein Kontakt und haben eine Ressource.

Das reicht, um die HTML-Struktur aus unserer Speisekarte, speichern Sie die Seite in der Datei index.php haben und gehen mit dem Stil.

Hinzufügen Stil

Wir eröffneten eine neue Seite CSS.

css-menu

Das Ziel speichern unter style.css und die PHP-Seite wieder auf die Stil-Link.

Wir begannen unseren Weg, um das Element "*", die wie in der Videotutorial erklärt, wie ein WordPress-Theme von Grund auf neu zu machen, dient dazu, verschiedene Funktionen, um alle Elemente hinzufügen, damit jede Eigenschaft, die Sie hinzufügen, der Stern, wird es von allen Elementen, die in unserer Seite, wir fügen allein genommen margin und padding: 

  1
 2
 3
 4

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

Wir fahren mit dem Körper, legen wir die folgenden Hintergrundbild für unseren Seiten sind ästhetisch gut:

und so ist der Körper in unserem css: 

  1
 2
 3
 4
 5

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

Okay, jetzt, wenn wir beginnen, Stil unserer Speisekarte geben, vor allem auf die ID "menu" 

  1
 2
 3
 4

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

Nur nehmen wir die Punkte an den Beginn jedes Element in der Liste (Linie 2) und oberen Bereich für ein Par ubircarlo bg (Linie 3).

Wir fahren mit dem Element "li", die wir nur hinzufügen, die Eigenschaft "display: inline", die neben einander entfernt sind. 

  1
 2
 3

  # Menu li (
 inline ; display: inline;
 )

Nun ist es Zeit, um das Element bearbeiten "a", wird es die folgenden Eigenschaften zu nehmen. 

  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;)

Die Breite und Höhe der einzelnen Bilder (Linien 3 bzw. 4), die Eigenschaft float: left, um sich in einem Abstand über das Recht der anderen text-indent, um den Text, der innerhalb des Tags ist <a> zu beseitigen und linken Rand, um das Menü ein bisschen getrennt voneinander.

Wir haben jetzt in jeder Klasse verwendet mit "a". damit wir verlassen haben. 

  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 (images / home.png) no-repeat;) # menu li a post (background: url (images / enviar.png) no-repeat;) # menu li a. Kontakt (background: url (images / contacto.png) no-repeat;) # menu li a. Ressourcen (background: url (images / recursos.png) no-repeat;)

fügen Sie einfach den Hintergrund für jedes Element.

fahren Sie mit dem: hover jedes Bild auf ca. ändern, wenn die Maus über sie. 

  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 (background: url (images / home-hover.png) no-repeat;) # menu li a. E-Mail: hover (background: url (images / post-hover.png) no-repeat ;) # menu li a. Kontakt: hover (background: url (images / contact-hover.png) no-repeat;) # menu li a. Ressourcen: hover (background: url (images / Ressourcen-hover.png) Nr. -repeat;)

Normalerweise fügen Sie einfach "schweben" am Ende der einzelnen Elemente, und ändern Sie das Bild von jedem.

Mit dem, was wurde bisher getan werde nur zur Verfügung zu haben die Möglichkeit, das Bestehen der Maus über das Bild. Dies ist in der PHP ins Spiel kommt, wie wir es tun, so ist es markiert den Bereich des Menüs, wo wir sind?, Wir tun es, indem Sie einfach eine ID für den Körper.

zum Beispiel: 

  1

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

Wenn nicht in diesem Menü in WordPress oder jede andere CMS fügen Sie einfach einer anderen Identität aus dem Körper von jeder Seite und direkt mit dem nächsten Schritt unter diesem css, müssen Sie Ihrem Körper etwas davon links:

File: index.php

Körper: 

  1

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

file: enviar.php

Körper: 

  1

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

file: contacto.php

Körper: 

  1

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

file: recursos.php

Körper: 

  1
 2

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

Wie ich schon sagte, wenn Sie dies manuell tun, bei der Suche nach neuen Abschnitt unter css, die in diesem Tutorial.

Wenn Sie dieses Menü in WordPress verwenden, werden wir ein Problem haben, wie können wir fügen Sie eine ID, die jeder Körper anders, wenn das Menü in einer Datei namens "header.php", dh die gleichen Header-Datei als auf der Homepage senden Sie die Kontakte, dann fügen wir den folgenden PHP-Code. auf unseren Seiten.

<body> Bevor wir schreiben das Folgende: 

  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 = $ page: $ Seite: 'Standard'?>

Ich werde erklären, was jeder Zeile:

1 - Öffnen Sie das PHP-Code

2 - Bringen Sie die URL, auf der wir (das wordpress url erinnern, sind wird mehr in so etwas wie "http://www.tublog/tu-pagina/").

3 - Wo alle gehen Schrägstrich "/", wird durch nichts ersetzt werden! "".

4 - Wo kann man einige gehen. "Php", durch nichts ersetzt werden!.

5 - Wo alle gehen? S = ", wird durch nichts ersetzt werden!.

6 - Es gibt das Ergebnis zurück.

7 - Enge php tag.

So ist das, was wir tun, nehmen Sie die URL und entfernen Sie alle die Dinge, die nicht dienen uns für unsere id.

Nun wollen wir unserem Körper und wir folgendes anmerken: 

  1

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

Bereit! wird der Körper nehmen Sie die ID der Seite, auf der wir uns befinden.

Wir wenden uns nun zu unserem id hinzufügen Stil für den Körper.

Fügen Sie den folgenden. 

  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;) E-Mail-body # # menu li a post (background: url (images / post-hover.png) Nr. -repeat;) body # kontakt li # menu. Kontakt (background: url (images / contact-hover.png) no-repeat;) body # Ressourcen # menu li a. Ressourcen (background: url (images / Ressourcen-hover . png) no-repeat;)

Normalerweise ist das, was er sagt, ist, dass, wenn der Körper eines dieser id (Index, E-Mail, Kontakt, Ressourcen) hat, wird die "Klasse" nehmen das Bild des schweben zu machen.

Klug! Deshalb haben wir unsere Speisekarte für Wordpress als CMS oder einer anderen Seite abgeschlossen. Php, hier lasse ich die Zip-Down, wo alle Dateien endgültig.

DOWNLOAD DAS ERGEBNIS DIESES TUTORIAL HIER

Michael ist der Schöpfer und Herausgeber skyandstars.net, die Führer und Tutorials zu WordPress, CuteNews, PHP, HTML und mehr veröffentlicht. Acutalmente Student.

Mijael166

Vielleicht eines dieser Einträge können Sie interessieren

7 Kommentare zu "Menü mit drei Staaten, CMS"

  1. Isa

    27. April 2009

    Antwort

    Ich bin ein wenig verwirrt, dass ich meine Menüs, wie ich sehe mit Dreamweaver, und sicherlich einfacher: S

    Go und hat das Niveau der Übungen Michael erhoben! herzlichen Glückwunsch:)

  2. Michael

    28. April 2009

    Antwort

    Jajaja si ... ist grundsätzlich ändern Bilder .. aber die Wirkung, sie wollten zu betonen ist, dass die Seite in diesen .... dificl HACR in WordPress gekennzeichnet ist, dass es die gleiche Überschrift für alle Seiten funktioniert ... ... dann mit php entoncs ist bedeutet dies einen Kuss ... isa =)

  3. Isa

    29. April 2009

    Antwort

    Ahm fair! esque zum ersten Mal sah ich, was nicht hervorgehoben, wenn auf einer anderen Seite pikiert, warum die Nase. Nun, wenn ich sehe es anders, in der Tat habe ich manchmal gefragt, Watt, wie es wäre, wenn, wenn Ich mag dieses Tutorial, eine andere für die Liste der Satzung, dass ich, weil meine Website dienen kann nicht wahr?

  4. Michael

    30. April 2009

    Antwort

    Natürlich: P müssen es nur aus dem Stil zu tun, um die ID, um den Körper add:) ... oder wenn Sie wollen, automatisch der Körper ausgesetzt ist, tun Sie es mit php ... aber gut .. wird nach Ihren Wünschen ... Un beso!

  5. Isa

    30. April 2009

    Antwort

    OK! jeje

  6. graciebird

    30. April 2009

    Antwort

    Sehr gut tuto wird es das nächste Mal verwenden Sie die Version. Danke. Natürlich hinterlassen Sie eine Nachricht auf dem Forum helfen mir sehr viel Hoffnung, der Verzweiflung. Durch das Internet hat mir so viel geholfen.

  7. fran

    22. Juni 2009

    Antwort

    que buen tuto, sehr nützlich, sehr gut erklärt, und mit den fertigen Dateien. wirklich geschätzt

Leave a comment

Name (erforderlich)

E-Mail (Erforderlich, aber nicht veröffentlicht)

Web

Kommentar (Benötigt)

* Ihre E-Mail verwendet wird, um es mit deinem Konto auf Gravatar beziehen