Βοήθημα-CSS navigation bar με οριζόντιο dropdοwn.

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
akisplace
Δημοσιεύσεις: 19
Εγγραφή: 29 Μάιος 2010 14:53
Τοποθεσία: Athens
Επικοινωνία:

Βοήθημα-CSS navigation bar με οριζόντιο dropdοwn.

Δημοσίευση από akisplace » 29 Μάιος 2010 19:17

Σε αυτό το web design tutorial θα σας παρουσιαστεί με με πολύ αναλυτικό τρόπο πώς κατασκευάζουμε ένα css navigation menu το οποίο θα έχει και dropdown effect. Για αυτό το CSS βοήθημα χρησιμοποιούμε και 3 αρχεία εικόνων jpg τα οποία μπορείτε να τα κατεβάσετε στο τέλος του βοηθήματος.Δεν θα χρησιμοποιήσουμε καθόλου JavaScript στην δημιουργία της navigation bar.Το βοήθημα αυτό αυτό είναι σε δύο μέρη όπου εξηγείται αναλυτικά και το html αλλά και to CSS κομμάτι. Το tutorial αυτό είναι πολύ αναλυτικό αλλά σας προτείνουμε να διαβάσετε για το css padding και το css margin

1.)Tutorial πάνω στο padding
2.)Tutorial πάνω στο margin
Ξεκινάμε...
Δείτε live demo.

Ξεκινώντας τη δημιουργία του navigation bar.
Έχουμε δημιουργήσει ένα σχέδιο-εξαιρετικά απλό- με τη navigation bar που θέλουμε να φτιάξουμε.Αυτό το κάνουμε απλά για να δούμε πώς θέλουμε περίπου να μοιάζει.Θα είναι κάπως έτσι..

Εικόνα

Πάνω στο σχέδιο έχουμε γράψει ότι έχουμε κάνει hover πάνω στο LINK 2.Άρα,πάνω –κάτω βλέπουμε τη θέλουμε να κάνουμε: Μια navigation bar στην οποία θα δώσουμε στυλ με χρήση CSS και όταν κάποιος περνάει το ποντίκι πάνω από ένα link εάν αυτό έχει sub-links τότε αυτά θα εμφανίζονται οριζόντια και ΟΧΙ κάθετα. Σαν links θα χρησιμοποιήσουμε τη λεγόμενη anchor tag δηλαδή την "#".

Δημιουργία του CSS navigation menu-HTML μέρος
Εδώ θα δούμε τον κώδικα που θα χρησιμοποιήσουμε για να φτιάξουμε αρχικά τα links και τα sub-links που θα υπάρχουν και εν συνεχεία με χρήση CSS δημιουργήσουμε το css navigation menu και τα dropdowns.

Δημιουργήστε ένα αρχείο html και αποθηκεύστε το σαν css_navigation_bar.html.
O κώδικας που έχει μία κενή σελίδα html είναι:

Κώδικας: Επιλογή όλων

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Απλή navigation bar με css.</title>

</head>
<body>
</body>
</html>
Έστω λοιπόν ότι θέλουμε μία navigation bar με τα εξής links: Αρχική σελίδα, Προϊόντα, Υπηρεσίες ,Portfolio και σελίδα επικοινωνίας. Επίσης υποθέτουμε ότι η σελίδα των προϊόντων ,των υπηρεσιών και του portfolio θα έχουν υποσελίδες (αυτά θα είναι τα sub-links) .
Στην html όταν θέλουμε να δημιουργήσουμε ένα τέτοιο μενού χρησιμοποιούμε πρώτα μία unordered list tag δηλαδή μία html ετικέτα

Κώδικας: Επιλογή όλων

<ul></ul>

και μέσα σε αυτή χρησιμοποιούμε την html tag της λίστας δηλαδή την

Κώδικας: Επιλογή όλων

<li></li>
Βασιζόμενοι στα παραπάνω γράφουμε τον κώδικα για τα βασικά links της navigation bar.Οπότε ο html κώδικας γίνεται ως εξής..

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Απλή navigation bar με css.</title>

</head>
<body>
<ul id="mymenu">

        <li><a href="#">Αρχική</a></li>
	<li class="test"><a href="#">Προιόντα</a></li>
	<li class="test"><a href="#">Υπηρεσίες</a></li>
	<li class="test"><a href="#">Portfolio</a></li>
    	<li class="test"><a href="#">Επικοινωνία</a></li>

</ul>
</body>
</html>
Δείτε πώς φαίνεται τώρα το μενού μας.
Εικόνα

Έγινε το πρώτο βήμα..
Τώρα αυτό που μένει είναι να δημιουργήσουμε και της υπο-σελίδες των κύριων σελίδων. Αυτό θα γίνει ως εξής: Θα τοποθετήσουμε unordered list tags μεσα στις list tags των κυρίων σελίδων! Έστω ότι θέλουμε να δημιουργήσουμε 2 sublinks κάτω απο το link "Βασική σελίδα".Ο κώδικας θα μοιάζει ως εξής

Κώδικας: Επιλογή όλων

<li><a href="#">Βασική σελίδα</a>
     <ul>
       <li><a href="#">Yποσελίδα 1</a></li>
       <li><a href="#">Yποσελίδα 2</a></li>
     </ul>
</li>
Με το παραπάνω κομμάτι του κώδικα καταφέρνουμε αυτό που θέλουμε.Δείτε τώρα ολοκληρωμένο τον html κώδικα και ένα στιγμιότυπο της navigation bar μας.

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Απλή navigation bar με css.</title>

</head>

<body>
<ul id="mymenu">

<li><a href="#">Αρχική</a></li>

	<li class="test"><a href="#">Προιόντα</a>

         <ul>
           <li><a href="#">Yπολογιστές</a></li>
           <li><a href="#">Περιφερειακά</a></li>
        </ul>

   	</li>

	<li class="test"><a href="#">Υπηρεσίες</a>

    	 <ul>
           <li><a href="#">Σχεδιασμός</a></li>
           <li><a href="#">Ανακατασκευή</a></li>
           <li><a href="#">Γραφιστική</a></li>
        </ul>	

     </li>

	<li class="test"><a href="#">Portfolio</a> <ul>
           <li><a href="#">Σελίδα 1</a></li>
           <li><a href="#">Σελίδα 2</a></li>
           <li><a href="#">Σελίδα 3</a></li>
           <li><a href="#">Σελίδα 4</a></li>       

        </ul>
   	</li>
    <li class="test"><a href="#">Επικοινωνία</a></li>

</ul>

</body>
</html>
Δείτε πως είναι τώρα η navigation bar μας.
Εικόνα

Έτοιμες και οι υποσελίδες! Ουσιαστικά τελειώσαμε με το html κομμάτι της navigation bar

CSS navigation bar tutorial &#8211;CSS πρώτο μέρος

Δημιουργήστε ένα αρχείο με το όνομα css_navigation_bar.css και αποθηκεύστε στο στον φάκελο που έχετε αποθηκεύσει και το css_navigation_bar.html. Στο αρχείο css_navigation_bar.html ανάμεσα στο

Κώδικας: Επιλογή όλων

<head></head>
τοποθετήστε την ακόλουθη γραμμή κώδικα

Κώδικας: Επιλογή όλων

<link rel="stylesheet" href="css_navigation_bar.css"/>
Με αυτόν τον τρόπο δηλώνουμε ότι το css αρχείο που χρησιμοποιούμε είναι εξωτερικό, δηλαδή δεν είναι ενσωματωμένο στον html κώδικα. Θα μπορούσαμε να το ενσωματώσουμε αλλά δεν το συνιστούμε. Επίσης θα χρησιμοποιήσουμε 3 εικονίδια τα οποία μπορείτε να τα κατεβάσετε στο τέλος του css tutorial.

Ας δούμε τώρα το πρώτο κομμάτι του CSS κώδικα. Αμέσως μετά ακολουθούν εξηγήσεις. Σε κάθε νέο κομμάτι προσθέτουμε το επόμενο κομμάτι κώδικα έτσι ώστε στο τελευταίο κομμάτι να έχουμε ολοκληρωμένο τον css κώδικα που χρησιμοποιούμε.

Κώδικας: Επιλογή όλων

/* CSS Document */
#mymenu&#123;
	margin&#58;0;
	padding&#58;0;
	height&#58;40px;
	overflow&#58;hidden;
	border-left&#58;2px solid #2B358E;
	&#125;
Με αυτό το κομμάτι κώδικα αναφερόμαστε στη εμφάνιση του στοιχείου που έχει id = mymenu .Αυτό το στοιχείο αν κοιτάξουμε τον html κώδικα θα δούμε ότι έιναι λίστα, που περιέχει ουσιαστικά το navigation bar μας. Του δίνουμε ένα ύψος 40px γιατί θα χρησιμοποιήσουμε έν συνεχεία ένα background που έχει ύψος 40px.Επίσης χρησιμοποιουμε overflow:hidden και ο,τιδήποτε περισσεύει κάτω από τα 40px αυτά μέσα στο

Κώδικας: Επιλογή όλων

<ul id= "mymenu"></ud>
κόβεται.Το border-left είναι μια κάθετη γραμμή στα αριστερά που εμφανίζεται και της δίνουμε ένα χρώμα το #2β358Ε.Είναι το ίδιο χρώμα που έχει το γραφικό που θα χρησιμοποιήσουμε( στα σημεία που αυτό είναι σκούρο μπλε).

Για να δούμε ένα στιγμιότυπο:

Εικόνα

Css tutorial-Δεύτερο μέρος κώδικα

Κώδικας: Επιλογή όλων

#mymenu li
  &#123;
	       list-style&#58;none;
	       float&#58;left; 

		  &#125;

#mymenu li a
&#123;
 	       display&#58; block;
	       color&#58; black;
	       font-size&#58;17px;
	       font-family&#58; serif;
	       text-decoration&#58;none;
	       background&#58; url&#40;bluetop.jpg&#41; repeat-x;
	       height&#58;40px;
	       border-right&#58;2px solid #2B358E;

	          &#125;
#mymenu li

Αυτό το κομμάτι ελέγχει οτιδήποτε είναι ανάμεσα σε list tags και βρίσκεται μέσα στο στοιχείο με id mymenu,δηλαδή τα πάντα.Με το list-style:none εξαφανίζουμε αυτές τις κουκίδες που υπήρχαν πριν στις σελίδες- δειτε φωτογραφία πιο πάνω στο html κομμάτι.
Στη συνέχεια με το float:left "αναγκάζετε" κάθε στοιχείο που υπάρχει μέσα σε λίστα -list tags- πάει προς τα αριστερά μέσα στο navigation menu. Το float ουσιαστικά κάνει τα ονόματα των σελίδων μας να ξεκινάνε από όσο αριστερότερα γίνεται μέσα στo navigation bar.Τοποθετούμε επίσης και φόντο και θέτουμε το ύψος επίσης στα 40px όσο είναι και το ύψος της εικόνας φόντου.

#mymenu li a
Αυτό το κομμάτι ελέγχει την εμφάνιση των link των σελίδων μας. Με το text decoration:none αφαιρούμε την γραμμή κάτω από το κάθε link.
Δείτε στιγμιότυπο μετά το δεύτερο μέρος του css κώδικα.

Εικόνα

Παρατηρείστε τι κάνει το float:left.Όλα τα links μας ξεκινάνε όσο πιο αριστερά γίνεται.Το float αναγκάζει το html στοιχείο που του έχει εφαρμοστεί να πηγαίνει όσο το δυνατόν αριστερότερα ή δεξιότερα στο στοιχείο που το περιέχει δηλαδή στο container element.
Επίσης παρατηρήστε το κενό που υπάρχει μετά τα «προϊόντα» ,τις «υπηρεσίες» και το "portfolio".Είναι ουσιαστικά χώρος ο οποίος εμφανίζεται λόγω των υποσελίδων που υπάρχουν στα συγκεκριμένα links.Αυτό τον κενό χώρο θα τον εξαφανίσουμε στο αμέσως επόμενο κομμάτι του CSS κώδικα.Για να κάνουμε το css navigation menu μας να φαίνεται πιο όμορφο προσθέτουμε τον εξής κώδικα στο #mymenu li a

Κώδικας: Επιλογή όλων

padding-right&#58;8px;
padding-top&#58;10px;
padding-left&#58;8px;
Εάν το σώσουμε και τρέξουμε τη σελίδα θα δούμε:
Εικόνα

CSS tutorial-Τρίτο μέρος κώδικα

Κώδικας: Επιλογή όλων

#mymenu li a&#58;hover&#123;
	background&#58; url&#40;bluetop2.jpg&#41; repeat-x;

	&#125;
Με το #mymenu li a:hover δηλώνουμε μια ψευδοκλάση css ,την hover.Η hover είναι μία ψευδοκλάση στα css όπου ουσιαστικά λειτουργεί μόνο όταν περνάμε το ποντίκι πάνω από ένα συγκεκριμένο στοιχείο. Εδώ ορίζουμε ότι όταν περάσουμε το ποντίκι πάνω από ένα link που υπάρχει στη navigation bar μας τότε αυτό το link αυτό "a" αποκτά ένα διαφορετικό background το οποίο εξαφανίζεται μόλις τελειώσει το mouseover. Δείτε τι συμβαίνει όταν περνάμε το ποντίκι μας πάνω από το link «Προϊόντα».

Εικόνα
Συνεχίζουμε προσθέτοντας τον παρακάτω κώδικα.

Κώδικας: Επιλογή όλων

	#mymenu li ul
&#123;
	display&#58;none;
	&#125;
Θυμάστε τον «κενό χώρο»που μιλήσαμε λίγο πριν; Με το display:none ουσιαστικά δεν αφήνουμε να εμφανίζεται οτιδήποτε βρίσκεται μέσα στο "ul" που ανήκει στο "li" που ανήκει στο στοιχείο με id το "mymenu".Δηλαδή μιλάμε πλέον για τις υποσελίδες! Δείτε τι συμβαίνει τώρα στο css navigation menu.
Εικόνα

Τέλεια. Ήρθε η ώρα να δημιουργήσουμε τις υποσελίδες.

Δημιουργία subpages-Τελευταίο μέρος css κώδικα
Σε αυτό το τελευταίο κομμάτι θα χρησιμοποιήσουμε την ψευδοκλάση hover ώστε να ελέγχουμε την εμφάνιση των υποσελίδων που εμφανίζονται όταν κάποιος κάνει mouseover πάνω από ένα link στο navigation bar.

Κώδικας: Επιλογή όλων

#mymenu li&#58;hover ul &#123;
	display&#58; block;
	position&#58; absolute;
	overflow&#58;hidden;
	margin-top&#58;-10px;
	margin-left&#58;-2px;
	padding&#58;0;
	border-left&#58;2px solid #2B358E;
	&#125;
Ας κοιτάξουμε την πρώτη-πρώτη γραμμή: #mymenu li:hover ul. Το κομμάτι αυτό του κώδικα ελέγχει την εμφάνιση του ul το οποίο εμφανίζεται αφού γίνει hover σε κάποιο li το οποίο ανήκει στο #mymenu. Δηλαδή πλέον μιλάμε για τις υποσελιδές της css navigation bar τις οποίες θα τις εμφανίζουμε όταν περνάμε το ποντίκι πάνω από τις αντίστοιχες κύριες σελίδες Συνεχίζουμε με τον κώδικα..

Κώδικας: Επιλογή όλων

#mymenu .test li a&#123;
height&#58;30px;

	&#125;

#mymenu .test li a&#58;hover&#123;
	color&#58; #30C;
	background&#58;url&#40;bluetop3.jpg&#41; repeat-x;

	&#125;
Επειδή θέλουμε να μπορούμε να διαχειριστούμε καλύτερα την εμφάνιση των links μας έχουμε δημιουργήσει μία κλάση την «test» την οποία την ενσωματώνουμε στα list tags στον html κώδικα.Επειδή τα κύρια links -οι σελίδες μας- έχουν προσαρμοστεί σε αυτή την κλάση τότε και οι υποσελίδες μας θα προσαρμοστούν.

Με το #mymenu .test li a ελέγχουμε την εμφάνιση του link (a) το οποίο ανήκει στο li και στο οποίο κάνουμε hover . Αν δούμε τον html κώδικα, θα δούμε ότι αυτό το link είναι το link της υποσελίδας.

Με το #mymenu .test li a:hover ελέγχουμε τι θα συμβεί στο sublink αν κάνουμε mouseover από πάνω του.

Προσοχή:To sublink παίρνει το background του βασικού link.Το ύψος το ορίζουμε στα 30px και ΟΧΙ στα 40px διότι πιο πάνω στο #mymenu li a χρησιμοποιήσαμε "padding-top:10px".Οπότε το ύψος που πρέπει να δώσουμε είναι 40-10=30px ώστε να εμφανιστεί σωστά.
Και εδω κάπου όλα τελειώνουν.To navigation bar το τέσταρα σε mozilla-IE8-Chrome-Opera τελευταίες εκδόσεις.
Κατεβάστε τα αρχεία που χρησιμοποιήθηκαν.



Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

Βοήθημα-CSS navigation bar με οριζόντιο dropdοwn.

Δημοσίευση από cyberfreak » 29 Μάιος 2010 23:58

πολυ καλο!! και καλως ηρθες στην οικογενεια του freestuff


Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Βοήθημα-CSS navigation bar με οριζόντιο dropdοwn.

Δημοσίευση από Basilakis » 30 Μάιος 2010 20:19

Πάρα πολύ καλό βοήθημα, καλή αρχή και απο εμένα

Άβαταρ μέλους
joia
Δημοσιεύσεις: 108
Εγγραφή: 15 Σεπ 2005 23:22
Επικοινωνία:

Βοήθημα-CSS navigation bar με οριζόντιο dropdοwn.

Δημοσίευση από joia » 28 Ιούλ 2010 14:14

Έχω ένα μικρό προβληματάκι με jquerymenu (drupal module). Την παραμετροποίηση εμφάνισης την κάνω στο βασικό css για το συγκεκριμένο block που εμφανίζεται το μενού αλλά έχω το εξής πρόβλημα
αν ορίσω bagkround picture για εικονίδιο εμφανίζεται παντού #block-jquerymenu-1 .

Κώδικας: Επιλογή όλων

content ul.menu li a &#123; background&#58;url&#40;images/a2.gif&#41; no-repeat 0 
 5px; padding-left&#58;14px; color&#58;#3d4902; font-size&#58;11px; 
 text-decoration&#58;none; font-weight&#58;bold; text-transform&#58;none;&#125;
Με το παρακάτω δεν εμφανίζεται πουθενά

Κώδικας: Επιλογή όλων

#block-jquerymenu-1 &#91;u&#93;.content ul.menu li.collapsed a &#91;/u&#93;&#123;
 background&#58;url&#40;images/a2.gif&#41; no-repeat 0 4px;&#125;
Αν μπορεί κανείς να βοηθήσει  ας ρίξει μια ματιά εδώ http&#58;//1im-giann.pel.sch.gr

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες