Μενού με τρία μέλη για CMS

Μενού με τρία μέλη για CMS

Με βάση την προηγούμενη φροντιστήριο εγώ αποφασίσαμε να δημιουργήσουμε αυτό το σεμινάριο για να εξηγήσει πώς να κάνει ένα μενού με όλες του νόμου, μπορείτε να το χρησιμοποιήσετε σε οποιαδήποτε σελίδα php που έχετε, καθώς και για κάθε CMS ακόμη και ειδικά την περίφημη wordpress.

Προβολή Demo

Εργαλεία

1 - Η εικόνα του κάθε μενού κομμένα ενότητα.

2 - Οι εικόνες πρέπει να χρησιμοποιούνται σε hover ιδιοκτησίας.

3 - Πρόγραμμα για HTML (π.χ. Dreamweaver).

4 - Μερικές γνώση: CSS, HTML και PHP.

HTML Δομή

Πρώτα απ 'όλα θα πρέπει να ανοίξει μια νέα σελίδα PHP και να την HTML δομή του μενού μας, η οποία θα δημιουργήσουμε διέταξε λίστες: 

  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 = "index" href = "index.php"> Αρχική σελίδα </ a> </ li> <li> <μια κατηγορία = "email" href = "enviar.php"> Αποστολή </ a> </ li> <li> class <a = "contact" href = "contacto.php"> Επικοινωνία </ a> </ li> <li > class <a = "resources" href = "recursos.php"> Πόροι </ a> </ li> </ ul> <! - End Μενού ->

Τώρα, έχουμε προσθέσει ένα αναγνωριστικό για την ετικέτα <ul> (πρώτη γραμμή), τότε θα προσθέσετε μια κατηγορία σε κάθε ετικέτα <a>, (μια διαφορετική για κάθε σύνδεση), έτσι θα έχουμε ένα δείκτη, ένα ηλεκτρονικό μήνυμα, επικοινωνήστε με ένα και ένας πόρος.

Αυτό είναι αρκετό για να έχουν την html δομή του μενού μας, να αποθηκεύσετε τη σελίδα ως index.php και πάει με το στυλ.

Προσθήκη στυλ

Έχουμε ανοίξει μια νέα σελίδα css.

css-menu

Η αποθηκεύσετε ως style.css και επέστρεψε στη σελίδα PHP για σύνδεση με το στυλ.

Ξεκινήσαμε δρόμο μας για το στοιχείο "*", η οποία, όπως εξηγείται στην Videotutorial πώς να κάνει ένα WordPress θέμα από μηδενική βάση, χρησιμοποιείται για να προσθέσετε διάφορα χαρακτηριστικά σε όλα τα στοιχεία, κατά συνέπεια, κάθε ακίνητο που προσθέτετε τον αστερίσκο, θα λαμβάνονται από το σύνολο των στοιχείων που περιέχονται στη σελίδα μας, πόσο μάλλον να προσθέσετε περιθώριο και padding: 

  1
 2
 3
 4

 : 0 ; padding : 0 ; } * (Περιθώριο: 0? Padding: 0?)

Συνεχίζουμε με το σώμα, θα πραγματοποιηθεί η ακόλουθη εικόνα φόντου για τις σελίδες μας είναι αισθητικά καλά:

και έτσι είναι το σώμα στο css μας: 

  1
 2
 3
 4
 5

 : url ( imagenes/bg.png ) repeat-x #333333 ; font-size : 12px ; font-family : Arial , Helvetica , sans-serif ; } σώμα (background: url (images / bg.png) επαναλαμβάνω-x # 333333? font-size: 12px? font-οικογένεια: Arial, Helvetica, sans-serif?)

Εντάξει, τώρα αν αρχίσουμε να δώσουν στυλ στο μενού μας, πρώτα απ 'όλα να τα id "μενού" 

  1
 2
 3
 4

  # Μενού (
 none ; list-style: Δεν υπάρχει?
 15px ; margin-top: 15px?
 )

Μόνο παίρνουμε τα σημεία κατά την έναρξη κάθε στοιχείο της λίστας (γραμμή 2) και ανώτερη κλίμακα για την ονομαστική του ubircarlo bg (γραμμή 3).

Συνεχίζουμε με το στοιχείο "li", η οποία θα προσθέσει μόνο το ακίνητο "απεικόνιση: inline" να βρίσκονται το ένα δίπλα στο άλλο. 

  1
 2
 3

  # Li μενού (
 inline ; απεικόνιση: inline?
 )

Τώρα είναι καιρός να επεξεργαστείτε το στοιχείο "α", θα αναλάβει τις ακόλουθες ιδιότητες. 

  1
 2
 3
 4
 5
 6
 7
 8

 display : block ; width : 60px ; height : 102px ; float : left ; text-indent : -5000px ; margin-left : 2px ; } # Menu li α (απεικόνιση: block? Πλάτος: 60px? Ύψος: 102px? Float: αριστερά? Text-indent:-5000px? Margin-left: 2px?)

Το πλάτος και το ύψος του κάθε εικόνα (σειρές 3 και 4 αντίστοιχα), η διασπορά ιδιοκτησίας: αριστερά για να βρίσκεται ένα σχετικά με το δικαίωμα του άλλου κειμένου-περίπτωση, για να εξαλείψει το κείμενο που βρίσκεται μέσα στο tag <a>, και αριστερό περιθώριο να διαχωρίσει το μενού λίγο μεταξύ τους.

Τώρα που χρησιμοποιούνται σε κάθε κατηγορία με τίτλο "α". Έτσι, έχουμε αριστερά. 

  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 ευρετήριο α. (background: url (images / home.png) δεν-επαναλαμβάνω?) # Menu li μετά α. (background: url (images / enviar.png) δεν-επαναλαμβάνω?) # Menu li επαφή α. (background: url (images / contacto.png) δεν-επαναλαμβάνω?) # μενού li πόρων α. (background: url (images / recursos.png) δεν-επαναλαμβάνω?)

απλά προσθέστε το ιστορικό της κάθε στοιχείο.

συνεχίσει με το: hover της κάθε εικόνας σε περίπου αλλάξει όταν το ποντίκι πάνω τους. 

  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 ευρετήριο α.: hover (background: url (images / home-hover.png) δεν-επαναλαμβάνω?) # Menu li α. email: hover (background: url (images / post-hover.png) δεν επαναλαμβάνω - ?) # μενού li Επικοινωνία α.: hover (background: url (images / επικοινωνία-hover.png) δεν-επαναλαμβάνω?) # μενού li πόρων α.: hover (background: url (images / πόροι-hover.png) Δεν -επαναλαμβάνω?)

Συνήθως, απλά προσθέστε "αιωρούνται" στο τέλος του κάθε στοιχείου και να αλλάξετε την εικόνα του κάθε.

Με τι έχει γίνει μέχρι τώρα μόλις θα έχουν στη διάθεσή τους τη δυνατότητα να διέρχεται το ποντίκι πάνω από την εικόνα. Αυτό είναι όπου PHP έρχεται στο παιχνίδι, όπως κάνουμε γι 'αυτό φέρει το τμήμα του μενού που βρισκόμαστε;, Θα το κάνουμε με την απλή προσθήκη ένα αναγνωριστικό για το σώμα.

για παράδειγμα: 

  1

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

Όταν δεν χρησιμοποιείτε το μενού στο wordpress ή οποιοδήποτε άλλο CMS απλά προσθέστε μια ταυτότητα διαφορετική από το σώμα της κάθε σελίδας και μεταβείτε στο επόμενο βήμα κάτω από αυτό το CSS, έχετε εγκαταλείψει το σώμα σας κάτι σαν αυτό:

Φάκελος: index.php

σώμα: 

  1

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

αρχείο: enviar.php

σώμα: 

  1

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

αρχείο: contacto.php

σώμα: 

  1

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

αρχείο: recursos.php

σώμα: 

  1
 2

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

Όπως είπα και πριν, αν το κάνετε αυτό με το χέρι, βρείτε το νέο τμήμα κάτω css ότι σε αυτό το σεμινάριο.

Αν χρησιμοποιείτε αυτό το μενού στο WordPress, θα έχουμε πρόβλημα, πώς θα προστεθεί ένα id σε κάθε οργανισμό με διαφορετικό τρόπο, εάν το μενού είναι σε ένα αρχείο που ονομάζεται "header.php", δηλαδή την ίδια κεφαλίδα του αρχείου ως να αποστείλουν στην κεντρική σελίδα για την επαφή, τότε προσθέστε τον ακόλουθο κώδικα php. στις σελίδες μας.

Πριν <body> γράφουμε τα εξής: 

  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 = $ σελίδα: $ σελίδα: "default";>

Θα εξηγήσω τι κάθε γραμμή:

1 - Ανοίξτε το php code

2 - Φέρτε το URL στο οποίο βρισκόμαστε (θυμηθείτε ότι url wordpress χρησιμοποιείται περισσότερο σε κάτι σαν "http://www.tublog/tu-pagina/").

3 - Που θα πάτε κάθε κάθετος "/", θα αντικατασταθεί από τίποτα! "".

4 - Που θα πάει κάποια. "PHP", θα αντικατασταθεί από τίποτα!.

5 - Που θα πάτε κάθε; S = ", θα αντικατασταθεί από τίποτα!.

6 - Επιστρέφει το αποτέλεσμα.

7 - ετικέτα php Κλείσιμο.

Έτσι αυτό που κάνουμε είναι να το url και να αρθούν όλα εκείνα τα πράγματα που δεν θα μας χρησιμεύσει για την ταυτότητα μας.

Τώρα ας το σώμα μας και εμείς θα προσθέσουμε τα εξής: 

  1

  "<?php echo $pagina ?>" > <Id Body = "<? Php echo $ σελίδα;>">

Έτοιμος! σώμα θα λάβει το αναγνωριστικό της σελίδας στην οποία βρισκόμαστε.

Μπορούμε τώρα να μας ταυτότητα προσθέτουν στυλ στο σώμα.

Προστίθεται το ακόλουθο. 

  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 ; } το δείκτη # # μενού li ευρετήριο α. (background: url (images / home-hover.png) δεν-επαναλαμβάνω?) οργανισμό # # email μενού li μετά α. (background: url (images / post-hover.png) Δεν -επαναλαμβάνω?) οργανισμό # # li επαφή μενού. επαφής (background: url (images / επαφή-hover.png) δεν-επαναλαμβάνω?) οργανισμό πόρων # # μενού li πόρων α. (background: url (images / πόροι-hover . png) δεν-επαναλαμβάνω?)

Συνήθως, αυτό που λέει είναι ότι όταν ο οργανισμός έχει ένα από αυτά id (index, email, επικοινωνία, πόροι), θα κάνει την "κατηγορία" να λάβει την εικόνα της hover.

Έξυπνος! Ως εκ τούτου έχουμε ολοκληρώσει το μενού μας για WordPress ως CMS ή οποιαδήποτε άλλη σελίδα. Php, εδώ αφήνω το φερμουάρ κάτω όπου όλα τα τελικά αρχεία.

ΚΑΤΕΒΑΣΤΕ ΤΟ ΑΠΟΤΕΛΕΣΜΑ Εγχειριδίου ΕΔΩ

Michael είναι ο δημιουργός και εκδότης skyandstars.net οποία δημοσιεύει οδηγούς και tutorials σχετικά με το WordPress, CuteNews, PHP, HTML και περισσότερο. Acutalmente σπουδαστής κολεγίου.

Mijael166

Ίσως μια από αυτές τις καταχωρήσεις σας ενδιαφέρουν

7 Σχόλια στο "μενού με τρία μέλη να CMS"

  1. Isa

    27 Απρίλη 2009

    Απάντηση

    Είμαι λίγο μπερδεμένος, ότι βλέπω μενού μου αρέσει να κάνω με dreamweaver, και σίγουρα είναι πιο εύκολο: S

    Πηγαίνετε και έχει αυξήσει το επίπεδο των tutorials Michael! συγχαρητήρια:)

  2. Michael

    28 Απριλίου 2009

    Απάντηση

    Jajaja si ... αλλάζει ουσιαστικά εικόνες .. αλλά τα αποτελέσματα που ήθελε να τονίσει είναι ότι η σελίδα να αναγράφονται σε αυτά .... Dificl HACR στο wordpress είναι ότι λειτουργεί με τον ίδιο κεφαλίδα για όλες τις σελίδες ... ... τότε με entoncs php είναι κάνει αυτό ... ένα φιλί isa =)

  3. Isa

    29 Απρίλη 2009

    Απάντηση

    AHM δίκαιη! esque η πρώτη φορά που είδα κάτι που δεν τονίζεται όταν τσιμπηθεί πραγματοποιούνται σε άλλη σελίδα, γιατί μύτη. Τώρα αν εγώ το βλέπω διαφορετικά, στην πραγματικότητα, έχω μερικές φορές αναρωτήθηκα βατ που θα εφάρμοζε εάν αν μου αρέσει αυτό το σεμινάριο, μια άλλη για τη λίστα των καταστατικών που κάνω, διότι την ιστοσελίδα μου δεν μπορεί να λειτουργήσει;

  4. Michael

    30 Απριλίου 2009

    Απάντηση

    Φυσικά: P απλά πρέπει να το κάνουμε από το στυλ για να προσθέσετε την ταυτότητα του φορέα:) ... ή αν θέλετε να θέσει αυτόματα το σώμα, το κάνουμε με php ... αλλά καλό .. είναι η προτίμησή σας ... Un beso!

  5. Isa

    30 Απριλίου 2009

    Απάντηση

    εντάξει! jeje

  6. graciebird

    30 Απριλίου 2009

    Απάντηση

    Πολύ καλή tuto θα τη χρησιμοποιήσει την επόμενη φορά που αλλάζετε την έκδοση. Σε ευχαριστώ. Φυσικά αφήσετε ένα μήνυμα στο φόρουμ με βοηθήσει πολύ ελπίδα απελπισίας. Μέσα από το διαδίκτυο με βοήθησαν τόσο πολύ.

  7. fran

    22 Ιουνίου 2009

    Απάντηση

    que buen tuto, πολύ χρήσιμο, πολύ καλά εξήγησε, και με το τελικό αρχείο. πραγματικά εκτίμησα

Αφήστε ένα σχόλιο

Όνομα (Απαιτείται)

Email (Απαιτείται, αλλά δεν έχει δημοσιευθεί)

Web

Σχόλιο (Απαιτείται)

* E-mail σας χρησιμοποιείται για να συνδεθεί με το λογαριασμό σας για Gravatar