CSS menu

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

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

Απάντηση
kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

CSS menu

Δημοσίευση από kosmas » 24 Οκτ 2007 20:25

Γεια σας !

Προσπαθώ να φτιάξω εδώ και καιρό ένα drop-down menu μόνο με τη χρήση css. Βρήκα κάποια site και κουτσοέφτιαξα ένα :D . Στο κώδικα ,σε css, δεν καταλαβαίνω τον τρόπο σκέψης των τεσσάρων τελευταίων παραγράφων... Μπορείτε να μου τις εξηγήσετε λίγο αναλυτικά ? Επίσης υπάρχει κάποιος τρόπος να μη φαίνεται διπλή η γραμμή ανάμεσα σε κάθε κατηγορία ? Τέλος το menu αυτό λειτουργεί μόνο σε firefox έχετε κάποια ιδέα γιατί δεν ακολουθεί ο ie ?

html

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

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">

 <link
 rel="stylesheet"
 href="css.css"
 type="text/css"> 

</head>

<body>

<div id="menu">
<ul>
  <li> <h2> Αρχική Σελίδα </h2> 
  <li> <h2> Χλωρίδα </h2> 
    <ul> 
      <li> <a href="#"> Πεύκο </a>
      <li> <a href="#"> Κυπαρίσσι </a>
      <li> <a href="#"> Πλάτανος </a>
    </ul>
  <li> <h2> Πανίδα </h2> 
    <ul>
      <li> <a href="#"> Πέρδικα </a>
      <li> <a href="#"> Ασβός </a>
      <li> <a href="#"> Αλεπού </a>
    </ul>
  <li> <h2> Αραχαιολογικοί Χώροι </h2> 
    <ul>
      <li> <a href="#"> Μονή Καισσαριανής </a>
      <li> <a href="#"> Σπήλαιο Νυμφόληπτου </a>
      <li> <a href="#"> Σπήλαιο Λιονταριού </a>
    </ul>
</ul>
css

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

#menu &#123;
width&#58; 200px;
background&#58; #CCCC99;&#125;


#menu ul &#123;
list-style&#58; none;
margin&#58; 0;
padding&#58; 0;&#125;


#menu a, #menu h2 &#123;
font&#58; bold 70% arial, helvetica, sans-serif;
display&#58; block;
border-width&#58; 1px 1px 1px 1px;
border-style&#58; solid;
border-color&#58; #000000;
margin&#58; 0;
padding&#58; 2px 3px;&#125;


#menu a, #menu h2 &#123;
color&#58; #000;
background&#58; #CCCC99;
text-decoration&#58; none;&#125;


#menu h2&#58;hover &#123;
color&#58; #FFFFFF;
background&#58; #CCCC66;&#125;


#menu a&#58;hover &#123;
color&#58; #FFFFFF;
background&#58; #CCCC66;&#125; 


#menu ul ul &#123;
position&#58; absolute;
top&#58; 0;
left&#58; 0;&#125;

/* Μέχρι εδώ ok */

#menu li &#123;
position&#58; relative;&#125;


#menu ul ul &#123;
position&#58; absolute;
top&#58; 0;
left&#58; 100%;
width&#58; 100%;&#125;


div#menu ul ul &#123;
display&#58; none;&#125;


div#menu ul li&#58;hover ul &#123;
display&#58; block;&#125;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

CSS menu

Δημοσίευση από patriot » 27 Οκτ 2007 19:43

Γειά σου Κοσμά! Να οι απαντήσεις που ψάχνεις:
kosmas έγραψε:Στο κώδικα ,σε css, δεν καταλαβαίνω τον τρόπο σκέψης των τεσσάρων τελευταίων παραγράφων... Μπορείτε να μου τις εξηγήσετε λίγο αναλυτικά ?
1) Το #menu li {position: relative;} σημαίνει ότι θα έχουν position:relative ΟΛΑ τα li που βρίσκονται μέσα στο #menu.

2) Το #menu ul ul {position: absolute;} σημαίνει ότι θα έχουν position:absolute όλα τα ul που βρίσκονται μέσα σε άλλα ul, τα οποία άλλα ul βρίσκονται μέσα στο #menu

3) Το div#menu ul ul {display: none;} ακριβώς το ίδιο με τα αποπάνω, με την διαφορά ότι διευκρινίζουμε ότι το #menu είναι div και όχι class για να έχουμε το κεφάλι μας ήσυχο.. να το βλέπουμε καλύτερα και εμείς και ο browser (για καλύτερα δηλ... θα μπορούσε και να μην υπάρχει το div)

4) Όσο για το div#menu ul li:hover ul {display: block;} σημαίνει ότι τα ul που βρίσκονται μέσα στο li θα φανερώνονται όταν το li θα γίνεται hovered*. Το οποίο li βρίσκεται μέσα σε κάποιο άλλο ul, το οποίο ul βρίσκεται μέ την σειρά του, μέσα σε ένα div το οποίο λέγεται #menu. (!!!!.... Αν δεν μπερδεύτηκα κιόλας με τόση σαρανταποδαρούσα!!!!!!)

* hover = η όποια αλλαγή (π.χ να αλλάζει χρώμα) γίνεται στο link όταν βάζεις το mouse επάνω του.

Σημ: Υπόψην ότι ενώ ουσιαστικά "hover" θα πει "απο πάνω" και εννοούμε γενικότερα ένα κάποιο επάνω, ο explorer θέλει αυτό το "από πάνω" να γίνεται σώνει και καλά μόνο πάνω από τα links (ενώ εδώ έχουμε li) κάτι που ειναι λάθος. Κατά πάσα πιθανότητα αυτός είναι ο λόγος που δεν δουλεύει σε explorer. Το έψαξα λιγάκι αλλά κόλλησα και δεν το βρίσκω... τι να πω; Ίσως επειδή ασχολούμαι όλη την ημέρα σήμερα με τα css και το κεφάλι μου είναι καζάνι.... πάντως δεν μπορώ να το βρω... Ίσως ο lunarmedia ή ο skeftomilos να μπορέσουν να βοηθήσουν....
Επίσης υπάρχει κάποιος τρόπος να μη φαίνεται διπλή η γραμμή ανάμεσα σε κάθε κατηγορία ?
Η γραμμή αυτή είναι το περίγραμμα (border). Αυτήν την στιγμή είναι έτσι:
#menu a, #menu h2 {
font: bold 70% arial, helvetica, sans-serif;
display: block;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000000;

margin: 0;
padding: 2px 3px;}
Μπορείς να αλλάξεις τα properties σε ότι θες. Να μερικές σελίδες με την λίστα των properties:

http://htmlhelp.com/reference/css/properties.html
http://www.htmldog.com/reference/cssproperties/
http://www.eskimo.com/~bloo/indexdot/cs ... ex/all.htm
http://www.w3.org/TR/REC-CSS2/propidx.html

Αν δεν θες να αλλάξεις το border μπορείς να προσθέσεις λίγο εξωτερικό περιθώριο (margin). Και αν θες μπορείς να αλλάξεις και το εσωτερικό για να φαίνεται ποιο όμορφο αλλά δεν έχει σχέση με το border:
#menu a, #menu h2 {
font: bold 70% arial, helvetica, sans-serif;
display: block;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000000;
margin:2px; /* Άλλαξε το "2" με ότι θες*/
padding: 2px 3px;}

ΥΓ άσχετο: Έκανες ένα λάθος. Το:

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
όπως και ΟΛΑ τα meta tags πρέπει να βρίσκεται ΑΜΕΣΩΣ μετά την λέξη <head> όχι απλά μέσα στο <head></head>, κάτω από το <title></title> ή κάπου αλλού.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

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

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

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