HTTP/1.0 200 OK Accept-Ranges: none Content-Location: http://www.skyandstars.net/menu-con-tres-estados-para-cms/ Content-Type: text/html; charset=UTF-8 Date: Mon, 30 Aug 2010 02:22:58 GMT Set-Cookie: PREF=ID=45d90e7b30464326:TM=1283134978:LM=1283134980:S=tl00lYgH27N5lg8V; expires=Wed, 29-Aug-2012 02:23:00 GMT; path=/; domain=translate.googleusercontent.com X-Content-Type-Options: nosniff Server: translation Expires: Mon, 30 Aug 2010 02:22:58 GMT Cache-Control: private Menü mit drei Staaten auf CMS | Himmel und Sterne - Kostenloses Web-Tutorials für Ihre Reach

Menü mit drei Staaten auf CMS

Menü mit drei Staaten auf CMS

Basierend auf den vorherigen Tutorial habe ich beschlossen, dieses Tutorial zu erstellen, zu erklären, wie man Gesetze machen ein Menü mit allen, können Sie nutzen es für jeden PHP-Seite, und sogar für jeden CMS vor allem die berühmte Version von WordPress.

Demo anzeigen

Tools

1 - Das Bild der einzelnen Abschnitte geschnitten Menü.

2 - Die Bilder werden im Schwebeflug Eigenschaft verwendet werden.

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

4 - Einige Kenntnisse: CSS, HTML und PHP.

HTML-Struktur

Zunächst müssen wir eine neue PHP-Seite öffnen und die HTML-Struktur unserer Speisekarte, die wir geordnete Listen erstellen soll: 

  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 Id = "menu"> <! - Start Menu -> <li> <a class = "index" href = "index.php"> Home </ a> </ li> <li> <a class = "submit" 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 Menü ->

Nun fügen wir eine ID mit dem Tag <ul> (erste Zeile), dann fügen wir eine Klasse auf allen Etiketten <a> (eine andere für jeden Link), so dass wir einen Kontakt wird ein Index, eine E-Mail, eine Ressource.

Das ist genug, um die HTML-Struktur unserer Speisekarte haben Speichern Sie die Seite index.php und gehen mit dem Stil.

Hinzufügen Stil

Öffnen Sie eine neue Seite CSS.

css-menu

Wir halten es als style.css und kehrte in die PHP-Seite auf Stil Link zur .

Wir begannen unseren Weg, um das Element "*", die, wie Kratzer erklärt in dem Video-Tutorial, wie man einen von WordPress-Theme wird verwendet, um Elemente hinzuzufügen, um alle verschiedenen Funktionen, so dass jede Eigenschaft, die Sie fügen das Sternchen, es wird genommen von allen Elementen in unserer Website, wir fügen Sie einfach margin und padding: 

  1
 2
 3
 4

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

Wir fahren mit dem Körper, werden wir die folgenden Hintergrundbild für unsere Website Platz ist ä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, wenn wir jetzt anfangen, Stil geben unser Menü, in erster Linie auf die ID "menu" 

  1
 2
 3
 4

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

Er nahm nur Punkte am Anfang jedes Element in der Liste (Linie 2) und oberen Bereich für das Paar ubircarlo bg (Linie 3).

Wir fahren mit dem Element "li", die wir nur noch hinzufügen, die Eigenschaft "display: inline" auf jeden anderen werden neben. 

  1
 2
 3

  # Menu li (
 inline ; display: inline;
 )

Jetzt ist es Zeit zum Bearbeiten der Position "a", wird sie die folgenden Eigenschaften. 

  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 jedes Bild (Linien 3 und 4), die Eigenschaft float: left zu werden und befindet sich zur Rechten des anderen text-indent <a> zu löschen Label Text, der sich innerhalb der linken Rand zu trennen das Menü ein wenig miteinander.

Wir haben jetzt in jeder Klasse verwendet "A". so haben wir links. 

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

  { # Menu li a. Index (
 url ( imagenes/home.png ) no-repeat ; background: url (images / home.png) no-repeat;
 )
 { # Menu li a. Submit (
 url ( imagenes/enviar.png ) no-repeat ; background: url (images / enviar.png) no-repeat;
 )
 { # Menu li a. Kontakt (
 url ( imagenes/contacto.png ) no-repeat ; background: url (images / contacto.png) no-repeat;
 )
 { # Menu li a. Resources (
 url ( imagenes/recursos.png ) no-repeat ; background: url (images / recursos.png) no-repeat;
 )

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

Fahren Sie mit der: 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;) # Menü li a. senden: hover (background: url (images / submit-hover.png) no-repeat ;) # Menü li a. Kontakt: hover (background: url (images / Kontakt-hover.png) no-repeat;) # Menü li a. Ressourcen: hover (background: url (images / Ressourcen-hover.png) Nr. -repeat;)

Ready, fügen Sie einfach "schweben" am Ende jedes Element, und ändern Sie das Bild von jedem.

Mit dem, was bisher nur gehen zu müssen Verfügung die Möglichkeit der Weitergabe der Maus über das Bild fertig. Dies ist, wo PHP ins Spiel kommt, wie wir so, dass es den Abschnitt des Menüs, wo wir sind markiert tun?, Wir tun dies, indem sie einfach eine ID für den Körper.

Zum Beispiel: 

  1

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

Wenn Sie nicht über dieses Menü in WordPress oder anderen CMS id fügen Sie einfach eine andere Stelle auf jeder Seite und springen Sie zum nächsten Schritt unter css, dass Sie Ihrem Körper davon haben:

Datei: index.php

Körper: 

  1

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

file: enviar.php

Körper: 

  1

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

file: contacto.php

Körper: 

  1

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

file: recursos.php

Körper: 

  1
 2

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

Wie ich schon sagte, wenn Sie dies manuell, finde die css, dass dieser neue Abschnitt weiter unten in diesem Tutorial.

Wenn Sie dieses Menü in WordPress sind, werden wir ein Problem haben, wie können wir fügen eine ID zu jeder Körper anders, wenn das Menü in einem ist die Datei "header.php", dh den gleichen Header-Datei als für das Senden und Homepage zu kontaktieren, dann fügen wir den folgenden PHP-Code. unseren Seiten.

<body> Bevor wir schreiben das Folgende: 

  1
 2
 3
 4
 5
 6
 7

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

Ich werde erklären, was jeder Zeile:

1 - Öffnen Sie den PHP-Code

2 - Bringen Sie die URL in die wir uns erinnern werden (url, dass WordPress ist "verwendet mehr in so etwas wie http://www.tublog/tu-pagina/).

3 - Wo Schrägstrich einen Shout "/" wird etwas durch ersetzt werden! "."

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

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

6 - Es gibt das Ergebnis zurück.

7 - Close php tag.

Also, was wir tun, ist die URL zu entfernen und alle jene Dinge, die nicht dazu dienen, uns für unsere id.

Jetzt gehen wir zu unserem Körper und wir hinzufügen: 

  1

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

Ready! der Körper nimmt die ID der Seite, wo wir sind.

Wir wenden uns nun zu unserem Stil "ID hinzufügen, um den Körper.

Fügen Sie die folgende. 

  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 ; } Körper # Index # Menü li a. Index (background: url (images / home-hover.png) no-repeat;) Körper # email # Menü li a. submit (background: url (images / submit-hover.png) Nr. -repeat;) Körper # # Kontakt Menü li a. Kontakt (background: url (images / Kontakt-hover.png) no-repeat;) # # Stelle im Menü li eine Ressource. Ressourcen (background: url (images / Ressourcen-hover . png) no-repeat;)

Ready, das ist, was sagt uns ist, dass, wenn der Körper hat jeder dieser ID (Index, senden, wenden, Ressourcen), wird die "Klasse" nehmen das Bild des zu schweben.

Ready! Wir fertigen unsere Speisekarte sowohl WordPress als CMS oder jede andere Seite. Php, hier unten, wo ich aus dem zip-Dateien sind alle Letztverbraucher.

DOWNLOAD THE Ergebnis dieses Tutorial hier

Michael ist der Begründer und Herausgeber der skyandstars.net die Guides und Tutorials für WordPress, CuteNews, PHP, HTML und mehr veröffentlicht. Sind eine aktuelle Student.

Mijael166

Vielleicht einen dieser Einträge könnte Sie interessieren

7 Responses to "Menü mit drei Staaten auf CMS

  1. Isa

    27. April 2009

    Antwort

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

    Go und hat das Niveau des Tutorials Michael erhoben! Ich gratuliere euch:)

  2. Michael

    28. April 2009

    Antwort

    Haha ja ... ist grundsätzlich verändern Bilder .. aber die Wirkung, er wolle betonen, dass die Seite in diesen .... HACR dificl WordPress ist hervorgehoben wird, weil die gleichen Header, der für alle Seiten funktioniert ... ... denn mit PHP entoncs bedeutet dies einen Kuß ... isa =)

  3. Isa

    29. April 2009

    Antwort

    Ahm geht! esque das erste Mal sah ich nicht verlassen, nichts markiert, wenn Sie auf einer anderen Seite klicken Sie auf, warum die Nase. Nun, wenn ich es anders sehen, in der Tat habe ich manchmal gefragt, wie es Watt, yeah yeah würde, Ich mag dieses Tutorial, einen anderen, um die Liste der Satzung, dass ich zu tun habe, weil meine rechte Seite kann dienen?

  4. Michael

    30. April 2009

    Antwort

    Natürlich: P nur um es aus der ID zu tun haben mehr Stil auf den Körper:) ... oder wenn Sie automatisch den Körper wollen, tun Sie es mit php ... aber gut .. wird nach Ihren Wünschen ... Un beso!

  5. Isa

    30. April 2009

    Antwort

    ok! hehe

  6. graciebird

    30. April 2009

    Antwort

    Sehr gute tuto wird es einsetzen, beim nächsten Mal ändern Sie die Version. Danke. Natürlich hinterlassen Sie eine Nachricht auf dem Forum mit einer Menge von Verzweiflung, Hoffnung kann mir helfen. Über die Website hat mir so viel geholfen.

  7. fran

    22. Juni 2009

    Antwort

    dass gute tuto, sehr nützlich, sehr gut erklärt, und die fertigen Dateien. wirklich geschätzt wird

Hinterlasse einen Kommentar

Name (Erforderlich)

Email (benötigt, aber nicht veröffentlicht)

Netz

Kommentar (Benötigt)

* Ihre E-Mail-Konto wird verwendet, um in Beziehung zu Ihrem in Gravatar