javascript web menu με χρήση images

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

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

Απάντηση
Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

javascript web menu με χρήση images

Δημοσίευση από zekia » 02 Μαρ 2007 02:04

Αυτό που θέλω να κάνω είναι να δημιουργήσω ένα μενού με τον τρόπο που γίνεται στο dreamweaver αλλα προσθέτωντας και submenus, κατι που δεν είδα να υποστηρίζεται απο το πρόγραμμα.
Βρήκα κάποια plugins τα οποία όμως προσθέτουν με κάποιο τρόπο βελάκια, περιγράμματα κ.α τα οποία δεν μπορώ όμως να αφαιρέσω και έτσι να έχω το αποτέλεσμα που θέλω.

Ψάχνω ένα προγραμματάκι με λειτουργία απλή ακριβώς όπως αυτή στον dreamweaver (εικόνα) που όμως να υποστηρίζει και submenus. Δηλ τα κουμπιά των υπομενού να είναι εικόνες δικές μου. Συγκεκριμένα σε ένα οριζόντιο μενου να έχω κάθετα submenus.

Επειδή δε θέλω να μπλεχτώ με layers και να γράφω κώδικα στη συγκεκριμένη περίπτωση... Μπορεί να με βοηθήσει κάποιος?
Συνημμένα
dreamweaver create navigation bar.png

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

javascript web menu με χρήση images

Δημοσίευση από lakritidis » 02 Μαρ 2007 10:03

Πολύ καλό το AllWebMenus

http://www.likno.com/

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

javascript web menu με χρήση images

Δημοσίευση από zekia » 08 Μαρ 2007 23:25

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

Έχω ένα πρόβλημα όμως. Δημιούργησα το μενού που ήθελα και το τοποθέτησα στις σελίδες μου. Τα links των κουμπιών λειτουργούν κανονικά σε firefox αλλα όχι σε internet explorer.....
Όταν κάνω κλικ σε κάποιο κουμπί του μενού εμφανίζεται κάτω αριστερά στον browser μήνυμα πως υπάρχει σφάλμα στη σελίδα. Οι λελπτομέρειες λένε πως δεν επιτράπηκε η πρόσβαση....

Αν το έχεις χρησιμοποιήσει το εργαλείο αυτό και με βοήθούσες θα με έσωζες πραγματικά!! Γιατί δυστυχώς δεν κατάφερα να βρω τη λύση ακόμη.

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

javascript web menu με χρήση images

Δημοσίευση από zekia » 10 Μαρ 2007 20:22

Τελικά ανακάλυψα πως κανένα οποιοδήποτε link δε λειτουργεί στη σελίδα στον explorer. Γνωρίζει κάποιος που μπορεί να οφείλεται??

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

javascript web menu με χρήση images

Δημοσίευση από RADICAL » 10 Μαρ 2007 23:59

Γενικά αυτά τα ετοιματζίδικα menu generator είναι μπελάς...
ούτε crossbrowser είναι ούτε και πολύ σωστό κώδικα φτιάχνουν,

Αν θες κάτι δοκιμασμένο και σωστό δες αυτό το άρθρο:

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

και εδώ έχει demo:

http://www.htmldog.com/articles/suckerfish/example/

Σε γενικές γραμμές δεν χρειάζεται να κάνεις πολλά πράγματα


εδώ γράφεις html και βάζεις τις επιλογές του menu

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

<ul id="nav">

	<li>Sunfishes
		<ul>
			<li><a href="">Blackbanded sunfish</a></li>
			<li><a href="">Shadow bass</a></li>
			<li><a href="">Ozark bass</a></li>
			<li><a href="">White crappie</a></li>

		</ul>
	</li>

	<li>Grunts
		<ul>
			<li><a href="">Smallmouth grunt</a></li>
			<li><a href="">Burrito</a></li>
			<li><a href="">Pigfish</a></li>

		</ul>
	</li>

	<li>Remoras
		<ul>
			<li><a href="">Whalesucker</a></li>
			<li><a href="">Marlinsucker</a></li>
			<li><a href="">Ceylonese remora</a></li>

			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Slender suckerfish</a></li>
		</ul>
	</li>

</ul>

βάζεις αυτά στο css, η στο head της σελίδας σου

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

<style type="text/css">

body &#123;
	font-family&#58; arial, helvetica, serif;
&#125;

ul &#123; /* all lists */
	padding&#58; 0;
	margin&#58; 0;
	list-style&#58; none;
&#125;

li &#123; /* all list items */
	float&#58; left;
	position&#58; relative;
	width&#58; 10em;
&#125;

li ul &#123; /* second-level lists */
	display&#58; none;
	position&#58; absolute;
	top&#58; 1em;
	left&#58; 0;
&#125;

li>ul &#123; /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top&#58; auto;
	left&#58; auto;
&#125;

li&#58;hover ul, li.over ul &#123; /* lists nested under hovered list items */
	display&#58; block;
&#125;

#content &#123;
	clear&#58; left;
&#125;

</style>
και ένα μικρό scriptaki πάλι στο head η σε ένα εξωτερικό .js

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

<script type="text/javascript"><!--//--><!&#91;CDATA&#91;//><!--
startList = function&#40;&#41; &#123;
	if &#40;document.all&&document.getElementById&#41; &#123;
		navRoot = document.getElementById&#40;"nav"&#41;;
		for &#40;i=0; i<navRoot.childNodes.length; i++&#41; &#123;
			node = navRoot.childNodes&#91;i&#93;;
			if &#40;node.nodeName=="LI"&#41; &#123;
				node.onmouseover=function&#40;&#41; &#123;
					this.className+=" over";
				&#125;
				node.onmouseout=function&#40;&#41; &#123;
					this.className=this.className.replace&#40;" over", ""&#41;;
				&#125;
			&#125;
		&#125;
	&#125;
&#125;
window.onload=startList;

//--><!&#93;&#93;></script>
και είσαι έτοιμος.

Το css που παρέθεσα είναι για βασικό layoyt,
άμα θες να το ομορφύνεις παίξε με τα χρώματα η δες το demo στο htmldog
για να πάρεις ιδέες και να καταλάβεις πώς δουλεύει.
Εικόνα

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

javascript web menu με χρήση images

Δημοσίευση από skeftomilos » 12 Μαρ 2007 01:25

Το μειονέκτημα των CSS-only menus είναι ότι δε μπορούν να μπουν delays, και γενικά να γίνουν διάφορα εφέ όπως sliding που αξιοποιούν τη διάσταση του χρόνου.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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