Ένα παρόμοιο dhtml menu

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

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

Απάντηση
Άβαταρ μέλους
GRaecuS
Δημοσιεύσεις: 113
Εγγραφή: 02 Απρ 2003 10:21
Τοποθεσία: Thessaloniki
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από GRaecuS » 18 Αύγ 2005 21:04

Θέλω να κάνω ενα μενού όπως του www.lineage2.com
Δηλαδή να κάνω click και να μου ανοίγει στην ίδια σελίδα ένα μενού μέσω expand του κυρίως μενού και με όλο το μενού να είναι text και οχι images όπως στο site.

Επίσης θα ήθελα να περνάω μια μεταβλητή στο τέλος των url του μενού (για την ακρίβεια το ?<?=SID?> ώστε να μεταφέρεται το session_id στην επόμενη σελίδα όταν αυτό υπάρχει και όχι όταν φυσικά δεν υπάρχει)

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Ένα παρόμοιο dhtml menu

Δημοσίευση από emphasy » 18 Αύγ 2005 22:08

Exw dei kati paromoio me CSS kai javascript, alla epidei endiferomai kai egw, 8a perimenw na sou apanthsoun!

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από cordis » 18 Αύγ 2005 22:54

ε! θα περιμένω τότε κι εγώ να σου απαντήσουν.
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Ένα παρόμοιο dhtml menu

Δημοσίευση από fafos » 18 Αύγ 2005 23:08

Auta ta menus onomazontai collapse kai synhthos xrhsimopoioun dhtml kai css.. To parageigma pou mas edoses xrhsimopoiei eikones kai katholou keimeno.. auto orizete eukola (na exeis dhl keimeno h eikones gia links) mesa apo ton kodika.. Oraia paradeigmata tha vreis edo:

http://www.4thorder.us/Scripts/Scripts/ ... amples.htm

kai ton kodika edo:

http://www.4thorder.us/Scripts/Scripts/ ... uExpander/

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Ένα παρόμοιο dhtml menu

Δημοσίευση από fafos » 18 Αύγ 2005 23:30

Yparxei kai enas allos tropos me ena aplo javascript kai css..

O kodikas:

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


<link rel="stylesheet" href="menu.css" type="text/css"> //to link gia to arxeio css


//arxh javascript
<script>

var ns4class=''
</script>
<script type="text/javascript">



if &#40;document.getElementById&#41;&#123; 
document.write&#40;'<style type="text/css">\n'&#41;
document.write&#40;'.submenu&#123;display&#58; none;&#125;\n'&#41;
document.write&#40;'</style>\n'&#41;
&#125;

function SwitchMenu&#40;obj&#41;&#123;
	if&#40;document.getElementById&#41;&#123;
	var el = document.getElementById&#40;obj&#41;;
	var ar = document.getElementById&#40;"masterdiv"&#41;.getElementsByTagName&#40;"span"&#41;; 
		if&#40;el.style.display != "block"&#41;&#123; 
			for &#40;var i=0; i<ar.length; i++&#41;&#123;
				if &#40;ar&#91;i&#93;.className=="submenu"&#41; 
				ar&#91;i&#93;.style.display = "none";
			&#125;
			el.style.display = "block";
		&#125;else&#123;
			el.style.display = "none";
		&#125;



	&#125;
&#125;

</script>
//telos javascript

//arxh kodika pou tha mpei sthn selida
<CENTER>
<TABLE cellpadding="3" cellspacing="0" style="font-size &#58; 10px;font-family &#58; Verdana;">
<TBODY>
<TR>
<TD style="font-size &#58; 14px;font-family &#58; Arial;font-weight &#58; bold;color &#58; #990000;" align="center" width="164">MENOY</TD>
</TR>
<TR>
<TD style="font-size &#58; 11px;font-family &#58; Verdana;color &#58; black;" align="center" width="164">Kati grafoume edo an thelete fysika</TD>
</TR>
<TR>
<TD style="color &#58; #0000cc;" align="center" width="164">
<DIV id="masterdiv" align="center">
<DIV class="menutitle" onclick="SwitchMenu&#40;'sub1'&#41;"  >&#58;&#58; Menu 1</DIV>
<span class="submenu" id="sub1">
&raquo;<a  href="http&#58;//istopoli.com/pages/think/siteindex.php" class="menulink">Περιεχόμενο Ιστοσελίδας</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/tools.php" class="menulink">Εργαλεία Κατασκευής</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/domain.php" class="menulink">Το Όνομα</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/host.php" class="menulink">Φιλοξενία</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/devel.php" class="menulink">Προγραμματισμός</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/struct.php" class="menulink">Η Δομή της Ιστοσελίδας</a><br>
&raquo;<a href="http&#58;//istopoli.com/pages/think/infos.php" class="menulink">Συλλογή Πληροφοριών</a></span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub2'&#41;" >&#58;&#58; Menu 2</DIV>
<span class="submenu" id="sub2">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub3'&#41;" >&#58;&#58; Menu 3</DIV>
<span class="submenu" id="sub3">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub4'&#41;" >&#58;&#58; Menu 4</DIV>
<span class="submenu" id="sub4">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub5'&#41;" >&#58;&#58; Menu 5</DIV>
<span class="submenu" id="sub5">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub6'&#41;" >&#58;&#58; Menu 6</DIV>
<span class="submenu" id="sub6">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub7'&#41;" >&#58;&#58; Menu 7</DIV>
<span class="submenu" id="sub7">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>

<DIV class="menutitle" onclick="SwitchMenu&#40;'sub8'&#41;" >&#58;&#58; Menu 8</DIV>
<span class="submenu" id="sub8">
&raquo;<a  href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a><br>
&raquo;<a href="new.htm" class="menulink">Συμβουλές</a><br>
&raquo;<a href="hot.htm" class="menulink">Περιεχόμενο</a><br>
&raquo;<a href="revised.htm" class="menulink">Κοινό</a><br>
&raquo;<a href="morezone/" class="menulink">Συλλογή Πληροφοριών</a> </span>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
//telos kodika pou tha mpei sthn selida
Edo aplos allazeis to keimeno me allo keimeno h me eikona (p.x. opou Συμβουλές vazete to path ths eikonas <IMG src="url/to/eikona.gif" width="150" height="20" border="0">) kai ta links fysika.. xromata klp allazoun mesa sto css arxeio...
Συνημμένα
css-menu.zip
To arxeio css pou tha anevasete ston server sas
(475 Ψηφιολέξεις) Μεταφορτώθηκε 327 φορές

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Ένα παρόμοιο dhtml menu

Δημοσίευση από emphasy » 18 Αύγ 2005 23:52

cordis έγραψε:ε! θα περιμένω τότε κι εγώ να σου απαντήσουν.
diakrinw kapia hrwnia, pros to prohgoumeno mou post ? kai genikos parathrhseis, pros to "proswpo" mou, e mallon kanw kati la8os... enta3ei to dior8wnw amesa...

alasondro
Δημοσιεύσεις: 18
Εγγραφή: 07 Ιαν 2005 01:02

Ένα παρόμοιο dhtml menu

Δημοσίευση από alasondro » 18 Αύγ 2005 23:57

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

<html>
<head>
<script language="Javascript" type="text/javascript">

function hide&#40;&#41;&#123;
	document.getElementById&#40;'childone'&#41;.style.display="none";
	document.getElementById&#40;'childtwo'&#41;.style.display="none";
	
&#125;

function show&#40;objId&#41;&#123;
	hide&#40;&#41;;
	document.getElementById&#40;objId&#41;.style.display="block";
&#125;
</script>
</head>
<body onload="hide&#40;&#41;;">
	<div id="menu">
		<ul id="first">
			<li ><a href="#" onclick="show&#40;'childone'&#41;;">Πρώτη Επιλογή</a></li>
			<div id="childone">hehehe<br /><br /><br /></div>
			<li ><a href="#" onclick="show&#40;'childtwo'&#41;;">Δεύτερη Επιλογή</a></li>
			<div id="childtwo">hahaha</div>
		</ul>
	</div>
</body>
</html>

Σε λίγο πιο απλή μορφή....
Το session id δεν κατάλαβα γιατί θες να το περνάς μέσω του url...

Άβαταρ μέλους
GRaecuS
Δημοσιεύσεις: 113
Εγγραφή: 02 Απρ 2003 10:21
Τοποθεσία: Thessaloniki
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από GRaecuS » 19 Αύγ 2005 01:41

@fatos: θα το δοκιμάσω, πάντως μου φαίνεται εύκολο

@alasandro: θα δοκιμάσω και το δικό σου, να δώ και ποιο με βολεύει περισσότερο. Όσον αφορά με τα sessions id, ενδιαφέρομαι επειδή τα περνάω μέσω get και άρα χρειάζονται στα url, αλλά αφού ο κώδικας που μου δώσατε είναι σε div δεν είναι καθόλου δύσκολο, πιστεύω και άλλωστε περιμένω και κάποια βοήθεια από άλλο thread.

και guys, thankz για της γρήγορες απαντήσεις! :D

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

Ένα παρόμοιο dhtml menu

Δημοσίευση από skeftomilos » 19 Αύγ 2005 08:20

Ένα άλλο παράδειγμα:

Live Demo

Δεν είναι τίποτα εντυπωσιακό αλλά έχει δωθεί προσοχή σε κάποιες λεπτομέρειες:

- Πολύ καθαρός HTML κώδικας στο body χωρίς καθόλου JS. Όλος ο JS κώδικας σε εξωτερικό αρχείο.
- Το περιεχόμενο είναι προσβάσιμο και χωρίς JavaScript.
- Λειτουργεί και χωρίς mouse, μόνο με το keyboard.
- Λύνει ένα πρόβλημα του IE με τα δύο συνεχόμενα click. Πιάνει και τα δύο.
- Αν σωθεί με οποιονδήποτε browser και ανοιχτεί μετά με οποιονδήποτε άλλο, δε θα εμφανιστεί πρόβλημα.
- Ελεγμένο σε IE5, IE6, Firefox, Opera.
- Χωρίς memory leaks στον IE.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από Rapid-eraser » 19 Αύγ 2005 10:47

gia va kavei casecade to session apo selida se selida
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από iffor » 19 Αύγ 2005 23:26

Δες και το μενου Switch Menu
Το χρησιμοποιώ καιρό και με έχει ικανοποιήσει σχεδόν απόλυτα!
Και είναι σχετικά εύκολο στο hacking!

Ούπς...!!! Ο κώδικας είναι σχεδόν ίδιος με αυτόν που έδωσε ο fafos...!!!
Έχει και την ίδια λογική...!!!

Το καλό με αυτό το μενουδάκι είναι ότι χρησιμοποιεί coocies για την εμφάνιση του στην προηγούμενη κατάστασή του, αν βέβαια χρησιμοποιείται σε διαφορετικές σελίδες!!!
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

Ένα παρόμοιο dhtml menu

Δημοσίευση από xmavidis » 20 Αύγ 2005 01:14

Πολύ ωραία τα scriptakia που παραθέσατε παραπάνω. Έψαχνα πολύ καιρό να βρω κάτι τέτοιο. :)
I want to know God’s thoughts; the rest are details.
Albert Einstein

Άβαταρ μέλους
Dr_Java
Δημοσιεύσεις: 218
Εγγραφή: 15 Αύγ 2003 16:42
Τοποθεσία: πειραιας
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από Dr_Java » 20 Αύγ 2005 10:03

Εεεε.... ε...... είμαι και εγώ εδω :P !!!!
κοιτα μια και αυτό... :arrow: http://www.htmlportal.gr/tips_gr.html

:D :D :D
Εικόνα

Άβαταρ μέλους
GRaecuS
Δημοσιεύσεις: 113
Εγγραφή: 02 Απρ 2003 10:21
Τοποθεσία: Thessaloniki
Επικοινωνία:

Ένα παρόμοιο dhtml menu

Δημοσίευση από GRaecuS » 20 Σεπ 2005 18:49

thx guys για τις προτάσεις

@iffor:

χρησιμοποιώ το Script Menu που μου πρότεινες. Βέβαια δεν μπόρεσα να κάνω ένα υπομενού του υπομενού.

Βασικά, εσένα σου δουλεύουν τα cookies του γιατί σ'εμένα δεν θυμάται την κατάσταση του μενού στην επόμενη σελίδα που με πάει αλλά ούτε και όταν κάνω back?

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

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