Δημιουργώντας menu με CSS

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

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

Απάντηση
panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 10 Ιουν 2006 19:39

Ας αρχίσουμε από το σκαρί της σελίδας

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>

<body>
</body>
</html>
Μέσα στο body θα τοποθετήσουμε το menu που επιθυμούμε με την χρήση τον elements <div>, <ul> & <li>
το οποιο θα είναι αυτής της μορφής:

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

<div id="Menu">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
		<li><a href="#">Link 4</a></li>
	</ul>
</div>
Έπειτα θα προσθέσουμε ένα Stylesheet με το όνομα Menu.css

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

#Menu &#123;
	float&#58; left;
	width&#58; 200px;
	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
&#125;

#Menu ul &#123;
	margin&#58; 0px;
	padding&#58; 0px;
	list-style-type&#58; none;
&#125;

#Menu li &#123;
	margin&#58; 0px;
&#125;

#Menu a &#123;
	display&#58; block;
	padding&#58; 4px 4px 4px 25px;
	border-right&#58; 1px solid #000000;
	border-left&#58; 1px solid #000000;
	border-bottom&#58; 1px solid #000000;
	background-color&#58; #599d7e;
	color&#58; #ffffff;
&#125;

#Menu a&#58;link, #Menu a&#58;visited &#123;
	color&#58; #ffffff;
	background-color&#58; #599d7e;
	text-decoration&#58; none;
&#125;

#Menu a&#58;hover, #Menu a&#58;active &#123;
	color&#58; #333333;
	background-color&#58; #599d7e;
	text-decoration&#58; none;
&#125;
Τώρα θα εισάγουμε το StyleSheet που φτιάξαμε μέσα στην σελίδα μας, οποτε πάνω από το </head> τοποθετούμε τον ακόλουθο κώδικα:

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

<style type="text/css">
<!--
@import url&#40;Menu.css&#41;;
-->
</style>
Τώρα το menu αυτό λειτουργεί σε Firefox και σε Opera (μπορεί και αλλου αλλα δεν έχω δοκιμάσει άλλους) για να λειτουργήσει σε IE 5 πρέπει να εισάγουμε ένα CSS hack το οποιο θα το εισάγουμε μέσα σε Conditional Commentο κώδικας θα τοποθετηθεί πάνω από το </head>

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

<!--&#91;if IE 5&#93;>
<style type="text/css">
#Menu a &#123;
	height&#58; 1em;
	float&#58; left;
	clear&#58; both;
	width&#58; 100%;
&#125;
</style>
<!&#91;endif&#93;-->
το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι η έκδοση 5
Παρ' ολ' αυτά το menu δεν λειτουργεί σε IE 6 και σε IE 7 οποτε θα πρέπει να ορίσουμε άλλο ένα CSS Hack το οποιο θα είναι μέσα σε Conditional Comment

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

<!--&#91;if gte IE 6&#93;>
<style type="text/css">
#Menu a &#123;
	height&#58; 1em;
&#125;
</style>
<!&#91;endif&#93;-->
το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι 6 η μεγαλύτερη
gte = greater than or equal to (=μεγαλύτερο η ίσο με)

Τώρα με μερικές αλλαγές στον κώδικα μπορούμε να μετατρέψουμε το κάθετο menu σε οριζόντιο.

στο Menu.css θα πρέπει να εφαρμόσουμε τις εξής αλλαγές:


από:

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

#Menu &#123;
	float&#58; left;
	width&#58; 200px;
	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
&#125;
σε:

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

#Menu &#123;
	float&#58; left;
	width&#58; 100%;
	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
&#125;
από:

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

#Menu li &#123;
	margin&#58; 0px;
&#125;
σε:

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

#Menu li &#123;
	float&#58; left;
	white-space&#58; nowrap;
	margin&#58; 0 0 1em 0;
	padding&#58; 0;
&#125;
από:

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

#Menu a &#123;
	display&#58; block;
	padding&#58; 4px 4px 4px 25px;
	border-right&#58; 1px solid #000000;
	border-left&#58; 1px solid #000000;
	border-bottom&#58; 1px solid #000000;
	background-color&#58; #599d7e;
	color&#58; #ffffff;
&#125;
σε:

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

#Menu a &#123;
	padding&#58; 4px 50px 4px 25px;
	border-right&#58; 1px solid #000000;
	border-left&#58; 1px solid #000000;
	border-bottom&#58; 1px solid #000000;
	background-color&#58; #599d7e;
	color&#58; #ffffff;
&#125;
από:

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

<!--&#91;if IE 5&#93;>
<style type="text/css">
#Menu a &#123;
	height&#58; 1em;
	float&#58; left;
	clear&#58; both;
	width&#58; 100%;
&#125;
</style>
<!&#91;endif&#93;-->
<!--&#91;if gte IE 6&#93;>
<style type="text/css">
#Menu a &#123;
	height&#58; 1em;
&#125;
</style>
<!&#91;endif&#93;-->
σε:

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

<!--&#91;if gte IE 5&#93;>
<style type="text/css">
#Menu a &#123;
	position&#58; relative;
	height&#58; 1em;
&#125;
</style>
<!&#91;endif&#93;-->
και έτσι έχουμε δημιουργήσει ένα οριζόντιο menu απλά και γρήγορα! :D

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 10 Ιουν 2006 21:07

Με τον ίδιο τρόπο μπορούμε να φτιάξουμε και dropdown menus

manu.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style type="text/css">
<!--
@import url&#40;menu.css&#41;;
-->
</style>
<script type="text/javascript">
<!--
subHover = function&#40;&#41; 
&#123;
	var subEls = document.getElementById&#40;"Menu"&#41;.getElementsByTagName&#40;"LI"&#41;;
	for &#40;var i=0; i<subEls.length; i++&#41; 
	&#123;
		subEls&#91;i&#93;.onmouseover=function&#40;&#41; 
		&#123;
			this.className+=" subhover";
		&#125;
		subEls&#91;i&#93;.onmouseout=function&#40;&#41; 
		&#123;
			this.className=this.className.replace&#40;new RegExp&#40;"subhover\\b"&#41;, ""&#41;;
		&#125;
	&#125;
&#125;
if &#40;window.attachEvent&#41; window.attachEvent&#40;"onload", subHover&#41;;
//-->
</script>
</head>

<body>
<div id="Menu">
	<ul>
		<li><a href="#">Category 1</a></li>
		<li><a href="#">Category 2</a>
			<ul>
				<li><a href="#">Sub Category 1</a></li>
				<li><a href="#">Sub Category 2</a>
					<ul>
						<li><a href="#">Sub Category 2.1</a></li>
						<li><a href="#">Sub Category 2.2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Category 3</a></li>
		<li><a href="#">Category 4</a></li>
	</ul>
</div>
</body>
</html>
menu.css

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

#Menu, #Menu ul &#123;
	list-style&#58; none;
	padding&#58; 0;
	margin&#58; 0 0 1em 0;
	width&#58; 60em;
	line-height&#58; 1em;
&#125;

#Menu li &#123;
	float&#58; left;
	white-space&#58; nowrap;
	margin&#58; 0;
	padding&#58; 0;
	width&#58; 10em;
&#125;

#Menu a &#123;
	background-color&#58; #599d7e;
	color&#58; #ffffff;
	padding&#58; 4px 70px 4px 25px;
	border-right&#58; 1px solid #000000;
	border-left&#58; 1px solid #000000;
	border-bottom&#58; 1px solid #000000;
	display&#58; block;
	width&#58; 10em;
	text-decoration&#58; none;	
	/*/*/ width&#58; 6em; /* */
&#125;

#Menu a&#58;link, #Menu a&#58;visited &#123;
	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
	color&#58; #ffffff;
	background-color&#58; #599d7e;
	white-space&#58; nowrap;
&#125;

#Menu a&#58;hover, #Menu a&#58;active &#123;
	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
	color&#58; #000000;
	background-color&#58; #599d7e;
	white-space&#58; nowrap;
&#125;

#Menu a.parentItem &#123;
	background&#58; url&#40;images/arrow.gif&#41; center right no-repeat;
&#125;

#Menu li ul &#123;
	position&#58; absolute;
	left&#58; -999em;
	height&#58; auto;
	width&#58; 8em;
	margin&#58; 0;
&#125;

#Menu li&#58;hover ul ul, #Menu li.subhover ul ul &#123;
	left&#58; -999em;
&#125;

#Menu li&#58;hover ul, #Menu li li&#58;hover ul, #Menu li.subhover ul, #Menu li li.subhover ul &#123;
	left&#58; auto;
&#125;

#Menu li&#58;hover ul ul, #Menu li&#58;hover ul ul ul, #Menu li.subhover ul ul, #Menu li.subhover ul ul ul &#123;
	left&#58; -999em;
&#125;

#Menu li&#58;hover ul, #Menu li li&#58;hover ul, #Menu li li li&#58;hover ul, #Menu li.subhover ul, #Menu li li.subhover ul, #Menu li li li.subhover ul &#123;
	left&#58; auto;
&#125;

#Menu li li &#123;
	padding-right&#58; 0;
	width&#58; 8em;
&#125;

#Menu li li a &#123;
	width&#58; 10em;
	width&#58; 4em;
&#125;

#Menu li ul ul &#123;
	margin&#58; -1.55em 0 0 8.8em;
&#125;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Δημιουργώντας menu με CSS

Δημοσίευση από skeftomilos » 11 Ιουν 2006 03:47

Αυτό το @import url(Menu.css); δεν ξέρω πόσο καλή ιδέα είναι. Υποτίθεται ότι μπαίνει για graceful degradation στον NN4, αλλά αυτό που κάνει τελικά είναι να εμποδίζει το σώσιμο του stylesheet όταν ο χρήστης αποπειραθεί να σώσει τη σελίδα με Save As.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 11 Ιουν 2006 11:31

nai ontos den to apothikeyei... alla den blaipo pou to problhma sto na mhn to apothikeyei... :roll:

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Δημιουργώντας menu με CSS

Δημοσίευση από skeftomilos » 11 Ιουν 2006 13:55

Το πρόβλημα είναι του επισκέπτη που θα δει την όμορφη σελίδα μας, γεμάτη χρήσιμες και οργανωμένες πληροφορίες, και θα σκεφτεί να τη σώσει για να την έχει για reference όταν θα είναι off-line, ή για να τη δώσει σε ένα φίλο του που δεν έχει σύνδεση Internet (λέμε τώρα!). Μόλις ανοίξει λοιπόν τη σωσμένη σελίδα θα πάθει σοκ ο άνθρωπος.

Το θέμα είναι ότι αυτό μπορεί πολύ εύκολα να αποφευχθεί με τη χρήση του παλιομοδίτικου (και 100% αξιόπιστου) στοιχείου link:

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

<link href="Menu.css" type="text/css" rel="stylesheet">
Εκτός αν θέλουμε σκόπιμα να δυσκολέψουμε την αποθήκευση του stylesheet, οπότε πάσο.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 11 Ιουν 2006 14:16

a nai ntaksi edo exeis dikio ;)

Άβαταρ μέλους
Figaro
Honorary Member
Δημοσιεύσεις: 2706
Εγγραφή: 08 Φεβ 2004 19:48

Δημιουργώντας menu με CSS

Δημοσίευση από Figaro » 18 Ιουν 2006 22:02

Ektos twn allwn.. den vlepw pou exeis valei to preview.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Δημιουργώντας menu με CSS

Δημοσίευση από cherouvim » 18 Ιουν 2006 23:59

Kalo einai na anaferoume kai ti pigi tou arthrou gia na min mas theopoioune adika.

http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/dropdowns

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 19 Ιουν 2006 01:55

to sigkekrimeno den to egrapsa apo kapoia phgh :D apla exo diabasei apo pantou kai apo ebooks kai apo web sites kai eipa na grapso ena synolo ap' osa diabasa an eperna kapoio arthro tha egrafa kai phgh safos

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 19 Ιουν 2006 01:56

Figaro έγραψε:Ektos twn allwn.. den vlepw pou exeis valei to preview.
kai pou na to balo? skeytika na balo alla meta leo asto mhn mou poun ki' olas pos pao na proothiso to site me "kakous" tropous :P

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Δημιουργώντας menu με CSS

Δημοσίευση από chchrist » 19 Ιουν 2006 15:09

Μια παρατήρηση. Το div που περικλείεις την λίστα είναι περιττό. Καλύτερα <ul id="menu"></ul>

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 19 Ιουν 2006 15:43

chchrist έγραψε:Μια παρατήρηση. Το div που περικλείεις την λίστα είναι περιττό. Καλύτερα <ul id="menu"></ul>
mou to exoun pei kai allou ayto den thymamai, pantos emena me boleyei perisotero me div giati thymamai kapou pou hthela na kano kati kai gia kapoio logo den mou ebgaine opos to hthela xoris to div opote apo tote bazo kai ena div eksoteriko

mishale
Δημοσιεύσεις: 9
Εγγραφή: 12 Απρ 2006 10:45

Δημιουργώντας menu με CSS

Δημοσίευση από mishale » 04 Ιούλ 2006 15:12

bravo ayto ithela!! se eyxaristw!!

alla exw kanei ena menou diko mou kai tha ithela na xrisimopoiisw ayto gia design.alla me ti diki sou leitourgikotita.diladi ayto pou itehla einai na ekana expand to diko mou menou wste na bgazei kai trito epipedo giati mexri to deytero stamataei.mexri to submenou diladi.opote o dikos sou kodikas me boithise na exo kai category3.
alla oso kai na prospathisa den katafera tipota antithetos ta mperdepsa pio poi.mperdeutika ekei me ta ul kai li kai den mporesa na kano to diko mou san to diko sou opote tha sas to dwsw edw ton kwdika mou kai opoios mporesei na kanei kati tah ioun poli eugnomon.sas eyxaristwwwww


diko mou menu:
----------------------


<UL id=nav>
<LI class="first active"><A href="#">Home</A> </LI>

<LI><A href="">Τηλεφωνία</A>
<UL>
<LI class="first"><A href="#">Κινητή Τηλεφωνία</A>

<ol>
<li class="first"><a href="#" >Vodafone</a></li>
<li class="last"><a href="#" >Q Telecom</a></li>
</ol>

<LI class=last><A href="">Σταθερή Τηλεφωνία</A> </LI></UL></LI>

<!-- 2 -->

<LI><A href="#">Τηλεφωνικά Κέντρα</A>
<UL>
<LI class=first><A href="panas/panasonic.html">Panasonic</A>
<LI class=last><A href="">Siemen</A> </LI></UL></LI>

<!-- 3 -->
<LI><A href="#">Συστήματα Ασφαλείας</A>
<UL>
<LI class=first><A href="dion/cctv_.html">C.C.T.V.</A>
<LI><A href="dion/lexus_.html">Lexus Guard</A>
<LI><A href="dion/control_.html">Access Control</A>
<LI><A href="dion/trofodotika_.html">Τροφοδοτικά κ.ά.</A>
<LI class=last><A href="/dion/xrisima_arxeia_.html">Χρήσιμα Αρχεία</A> </LI>
</UL>
</LI>

<!-- 4 -->

<LI class=last><A href="#">Υποδομή/Συνδέσεις</A>
<UL>
<LI class=first><A href="dion/kalwdiwsi_.html">Δομημένη Καλωδίωση</A>
<LI class=last><A href="#">Internet</A> </LI></UL>

<!-- 5 -->

<LI><A href="#">Ταμειακά Συστήματα</A>
<UL>
<LI class=first><A href="dion/tameiakes_.html">Ταμειακές Μηχανές</A>
<LI><A href="dion/bar_code_.html">BarCode, Εκτυπωτές κλπ</A>
<LI><A href="dion/fhm_.html">Φ.Μ.Η.</A>
<LI class=last><A href="dion/asirm_parag_.html">Ασύρματη Παραγγελιοληψία</A> </LI>
</UL>


</LI></UL></DIV> <!-- Menu End -->



diko mou css:
----------------


#nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#nav {
MARGIN: 0px 105px 0px 40px; FONT: bold 90% arial; HEIGHT: 2.09em
}
#nav LI {
BORDER-RIGHT: #252525 3px solid; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: #999; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 10em; PADDING-TOP: 0px; BORDER-BOTTOM: #666 3px solid; POSITION: relative
}
#nav A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
#nav A:link {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
#nav A:visited {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
#nav A:hover {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
#nav A:active {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
#nav A:hover {
COLOR: #000
}
#nav LI UL {
MARGIN-TOP: 3px; FONT-WEIGHT: normal; FONT-SIZE: 90%; BACKGROUND: url(images/featurebox_bg.gif) #f6f6f6 no-repeat 100% 100%; LEFT: -999em; BORDER-LEFT: #c00 1px solid; WIDTH: 15.8em; POSITION: absolute
}
#nav LI:hover UL {
Z-INDEX: 99999; LEFT: 0px
}
#nav LI.sfhover UL {
Z-INDEX: 99999; LEFT: 0px
}
#nav LI LI {
BORDER-RIGHT: #999 1px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: none; BORDER-LEFT: #999 1px; BORDER-BOTTOM: #999 1px solid
}
#nav LI LI.last {
BORDER-BOTTOM-STYLE: none
}
#nav LI LI A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 14em; COLOR: #000; PADDING-TOP: 3px
}
#nav LI LI A:link {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 14em; COLOR: #000; PADDING-TOP: 3px
}
#nav LI LI A:visited {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 14em; COLOR: #000; PADDING-TOP: 3px
}
#nav LI LI A:hover {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 14em; COLOR: #000; PADDING-TOP: 3px
}
#nav LI LI A:hover {
BACKGROUND: #c00; COLOR: #fff
}
#nav LI.active {
BACKGROUND: #c00; BORDER-BOTTOM: #c00 3px solid
}
#nav LI.active UL {
BACKGROUND: url(images/featurebox2_bg.gif) #c00 no-repeat 100% 100%; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
#nav LI.active A:link {

}
#nav LI.active A:visited {

}
#nav LI.active A:hover {

}
#nav LI.active A:active {

}
#nav LI.active A:hover {
COLOR: #000
}
#nav LI.active LI {
BORDER-TOP: #c15c5c 1px solid; BORDER-BOTTOM: #870000 1px solid; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none
}
#nav LI.active LI.last {
BORDER-BOTTOM-STYLE: none
}
#nav LI.active LI A:link {
COLOR: #fff
}
#nav LI.active LI A:visited {
COLOR: #fff
}
#nav LI.active LI A:hover {
COLOR: #fff
}
#nav LI.active LI A:active {
COLOR: #fff
}
#nav LI.active LI A:hover {
BACKGROUND: url(images/sprites.gif) #666 repeat-x 0px 99%; COLOR: #fff
}
#nav LI.active LI.active A:link {
FONT-WEIGHT: bold; BACKGROUND: url(images/sprites.gif) #666 repeat-x 0px 99%; COLOR: #fff
}
#nav LI.active LI.active A:visited {
FONT-WEIGHT: bold; BACKGROUND: url(images/sprites.gif) #666 repeat-x 0px 99%; COLOR: #fff
}
#nav LI.active LI.active A:hover {
FONT-WEIGHT: bold; BACKGROUND: url(images/sprites.gif) #666 repeat-x 0px 99%; COLOR: #fff
}
#nav LI.active LI.active A:active {
FONT-WEIGHT: bold; BACKGROUND: url(images/sprites.gif) #666 repeat-x 0px 99%; COLOR: #fff
}
#nav LI {
WIDTH: auto
}

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 17 Ιούλ 2006 11:16

ayth thn stigmi eimai sto kazakstan 26 tou mhnos pao mosxa kai 1h aygoustou gyrnao ellada an thes mporeis na perimeneis na ertho kai na se bohthiso giati tora den exo kai poly xrono :)
Τελευταία επεξεργασία από το μέλος panosru την 14 Νοέμ 2008 20:54, έχει επεξεργασθεί 1 φορά συνολικά.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Δημιουργώντας menu με CSS

Δημοσίευση από panosru » 20 Σεπ 2006 16:14

oops esena se ksexasa teleios :oops: sorry :/ exeis akoma to problhma h to elyses?

Απάντηση

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

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

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