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

panosru · 10 Ιουνίου 2006

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

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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 {
float: left;
width: 200px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

#Menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

#Menu li {
margin: 0px;
}

#Menu a {
display: block;
padding: 4px 4px 4px 25px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #599d7e;
color: #ffffff;
}

#Menu a:link, #Menu a:visited {
color: #ffffff;
background-color: #599d7e;
text-decoration: none;
}

#Menu a:hover, #Menu a:active {
color: #333333;
background-color: #599d7e;
text-decoration: none;
}

Τώρα θα εισάγουμε το StyleSheet που φτιάξαμε μέσα στην σελίδα μας, οποτε πάνω από το </head> τοποθετούμε τον ακόλουθο κώδικα:

><style type="text/css">
<!--
@import url(Menu.css);
-->
</style>

Τώρα το menu αυτό λειτουργεί σε Firefox και σε Opera (μπορεί και αλλου αλλα δεν έχω δοκιμάσει άλλους) για να λειτουργήσει σε IE 5 πρέπει να εισάγουμε ένα CSS hack το οποιο θα το εισάγουμε μέσα σε Conditional Commentο κώδικας θα τοποθετηθεί πάνω από το </head>

><!--[if IE 5]>
<style type="text/css">
#Menu a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->

το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι η έκδοση 5

Παρ' ολ' αυτά το menu δεν λειτουργεί σε IE 6 και σε IE 7 οποτε θα πρέπει να ορίσουμε άλλο ένα CSS Hack το οποιο θα είναι μέσα σε Conditional Comment

><!--[if gte IE 6]>
<style type="text/css">
#Menu a {
height: 1em;
}
</style>
<![endif]-->

το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι 6 η μεγαλύτερη

gte = greater than or equal to (=μεγαλύτερο η ίσο με)

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

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

από:

>#Menu {
float: left;
width: 200px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

σε:

>#Menu {
float: left;
width: 100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

από:

>#Menu li {
margin: 0px;
}

σε:

>#Menu li {
float: left;
white-space: nowrap;
margin: 0 0 1em 0;
padding: 0;
}

από:

>#Menu a {
display: block;
padding: 4px 4px 4px 25px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #599d7e;
color: #ffffff;
}

σε:

>#Menu a {
padding: 4px 50px 4px 25px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #599d7e;
color: #ffffff;
}

από:

><!--[if IE 5]>
<style type="text/css">
#Menu a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->
<!--[if gte IE 6]>
<style type="text/css">
#Menu a {
height: 1em;
}
</style>
<![endif]-->

σε:

><!--[if gte IE 5]>
<style type="text/css">
#Menu a {
position: relative;
height: 1em;
}
</style>
<![endif]-->

και έτσι έχουμε δημιουργήσει ένα οριζόντιο menu απλά και γρήγορα!

panosru · 10 Ιουνίου 2006

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

manu.html

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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(menu.css);
-->
</style>
<script type="text/javascript">
<!--
subHover = function() 
{
var subEls = document.getElementById("Menu").getElementsByTagName("LI");
for (var i=0; i<subEls.length; i++) 
{
	subEls[i].onmouseover=function() 
	{
		this.className+=" subhover";
	}
	subEls[i].onmouseout=function() 
	{
		this.className=this.className.replace(new RegExp("subhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", subHover);
//-->
</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 {
list-style: none;
padding: 0;
margin: 0 0 1em 0;
width: 60em;
line-height: 1em;
}

#Menu li {
float: left;
white-space: nowrap;
margin: 0;
padding: 0;
width: 10em;
}

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

#Menu a:link, #Menu a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #ffffff;
background-color: #599d7e;
white-space: nowrap;
}

#Menu a:hover, #Menu a:active {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
background-color: #599d7e;
white-space: nowrap;
}

#Menu a.parentItem {
background: url(images/arrow.gif) center right no-repeat;
}

#Menu li ul {
position: absolute;
left: -999em;
height: auto;
width: 8em;
margin: 0;
}

#Menu li:hover ul ul, #Menu li.subhover ul ul {
left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul {
left: auto;
}

#Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.subhover ul ul, #Menu li.subhover ul ul ul {
left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul, #Menu li li li.subhover ul {
left: auto;
}

#Menu li li {
padding-right: 0;
width: 8em;
}

#Menu li li a {
width: 10em;
width: 4em;
}

#Menu li ul ul {
margin: -1.55em 0 0 8.8em;
}

--b}{d-- · 11 Ιουνίου 2006

Ωραία πρωτοβουλία μπράβο. Αν τα συνόδευες με κανα 2 demo links θα ήταν τέλεια.

panosru · 11 Ιουνίου 2006

nai to skeytika ayto me ta demo links alla den goustaro na mou lene pos ebala epitides ta links gia na diafhmiso to site mou (to opoio einai emporikou skopou gi' ayto) alla gia ton logo ayton trith pou tha pao sto grafeio tha paro ena domain

ALR · 14 Οκτωβρίου 2006

Μπράβο ρε Πάνο. Απλά μπράβο.

Mystirios · 14 Οκτωβρίου 2006

var subEls = document.getElementById("Menu").getElementsByTagName("LI");

Το συγκεκριμένο κομμάτι κώδικα δε φτουράει! έχει κανείς ιδέα πως θα γίνει να δουλέψει?

panosru · 14 Οκτωβρίου 2006

diladi? ti problhma exeis?

Mystirios · 14 Οκτωβρίου 2006

Το τέσταρα σε firefox & opera (τελευταίες εκδόσεις). Και στα getElementById("Menu") & getElementsByTagName("LI") επιστρέφει null.Με αποτέλεσμα να μη εκτελείται το script.

Γενικά και document.getΕlementsbyTagName('*') που δοκίμασα , τα tags μέσα στο body δε τα επιστρέφει.Επιτρέφει html,head,script ktl μέχρι πριν το body.Επίσης ούτε το document.body.getΕlementsbyTagName('*') μου επιστρέφει τα επιθυμητά.Το ίδιο ισχύει και για το getElementById("*") που επιστρέφει null.

edited : τα δοκίμασα όλα και το body & head & στο ενδιάμεσο

panosru · 14 Οκτωβρίου 2006

To dokimasa ksana se Firefox, Opera, IE6, IE7, Netscape kai douleyei mia xara.

Mystirios · 14 Οκτωβρίου 2006

γαμωτ... γιατί σε μένα?

panosru · 15 Οκτωβρίου 2006

isos sthn selida pou pas na to ensomatoseis exei kapoio JavaScript kodika pou to ephreazei.

Mystirios · 16 Οκτωβρίου 2006

Βασικά μαλακία έκανα... κανονικά παίζει.Το μενού το CSS το κάνει όχι το script.Το script είναι για να παίζει και σε ΙΕ =< 6 νομίζω

panosru · 16 Οκτωβρίου 2006

oxi, to script einai gia na douleyei to dropdown menu.

Mystirios · 16 Οκτωβρίου 2006

Δοκίμασε το dropdown παράδειγμα χωρίς το javascript κώδικα.

Εδω τουλάχιστον παίζει κανονικά , εκτος κι αν έχω κάνει καμιά χοντρή πάλι (το συνηθίζω απ'οτι κατάλαβες )

>#Menu li ul {
position: absolute;
left: -999em;
height: auto;
width: 8em;
margin: 0;
}

#Menu li:hover ul ul, #Menu li.subhover ul ul {
left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul {
left: auto;
}

#Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.subhover ul ul, #Menu li.subhover ul ul ul {
left: -999em;
}

#Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul, #Menu li li li.subhover ul {
left: auto;
}

#Menu li li {
padding-right: 0;
width: 8em;
}

#Menu li li a {
width: 10em;
width: 4em;
}

#Menu li ul ul {
margin: -1.55em 0 0 8.8em;
}

Αυτό το κομμάτι με τα hover&subhover τη κάνει τη δουλειά

panosru · 16 Οκτωβρίου 2006

me thn bohtheia tou javascript aytou epitynxaneis thn leitourgia tou mouseover kai tou mouseout sta li.

Σύνδεση

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

Προτεινόμενες αναρτήσεις

panosru

panosru

--b}{d--

panosru

ALR

Mystirios

panosru

Mystirios

panosru

Mystirios

panosru

Mystirios

panosru

Mystirios

panosru

Αρχειοθετημένο

Σύνδεση