Πλέον οι περισσότερες ιστοσελίδες έχουν εγκαταλήψει το flash και έχουν στραφεί στο Javasxript για την δημιουργία των μενού τους. Στο βοήθημα αυτό θα δούμε πως μπορούμε να δημιουργήσουμε ένα απλό μενού, για την ιστοσελίδα μας, με πολύ όμορφο animation όταν ο χρήστης περνάει τον δείκτη πάνω από το μενού, χρησιμοποιώντας μόνο CSS και jQuery.
Θα υποθέσουμε ότι έχουμε ήδη το αρχείο index.html έτοιμο, και αν δεν το έχουμε θα το δημιουργήσουμε.
Στην αρχή θα χρειαστεί να δημιουργήσουμε το μενού μας. Έτσι ανάμεσα στα tags <body> της ιστοσελίδας μας θα προσθέσουμε τον κώδικα
<div> <ul id="topnav"> <li><a href="#">Κεντρικη</a></li> <li><a href="#">Σχετικα</a></li> <li><a href="#">Υπηρεσιες</a></li> <li><a href="#">Φωτογραφιες</a></li> <li><a href="#">Πελατες</a></li> <li><a href="#">Επικοινωνια</a></li> </ul> </div>
Επίσης πρέπει να δημιουργήσουμε την εικόνα που θα χρησιμοποιηθεί για το animation στο μενού μας. Δημιουργούμε λοιπόν μια εικόνα 1×80, Φροντίζουμε να καλύψουμε τα πρώτα 40 pixels με ένα χρώμα και τα άλλα 40 pixels με άλλο χρώμα. Κάτι σαν την εικόνα που ακολουθεί.
Πλέον έχουμε το μενού μας σε μορφή unordered list και την εικόνα για το μενού μας. Τώρα θα μορφοποιήσουμε λίγο την εμφάνιση και θα προσθέσουμε την εικόνα παρασκηνίου του μενού. Δημιουργούμε το αρχείο style.css στο οποίο γράφουμε τον παρακάτω κώδικα. Έχουμε προσθέσει και κάποια σχόλια για καλύτερη κατανόηση του κώδικα.
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Σημαντικό - Απόκρύπτει την εικόνα μας πρίν το hover--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--Tα <a> και <span> έχουν τις ίδιες ιδιότητες--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 19px;
line-height: 20px; /*--Κάθετη διαμόρφωση του κειμένου--*/
}
ul#topnav a{ /*--Το hover state του μενού μας--*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*--Η αρχική κατάσταση του μενού μας--*/
background-position: left top;
}
.container {
height:330px;
left:50%;
margin:-140px 0 0 -450px;
overflow:hidden;
position:absolute;
top:50%;
width:978px;
}
Θα συνδέσουμε το αρχείο του στυλ με την ιστοσελίδα μας πρεοσθέτωντας τον παρακάτω κώδικα στο <head> κομμάτι της σελίδας μας
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
Τέλος θα συμπεριλάβουμε την βιβλιοθήκη jQuery και θα προσθέσουμε και το script που θα κάνει όλη την δουλειά. Πρώτα από όλα λοιπόν γράφουμε στο <head> μέρος της σελίδας μας τον εξής κώδικα για να συμπεριλάβουμε την βιβλιοθήκη
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Τελευταίο βήμα είναι να προσθέσουμε τον παρακάτω κώδικα ώστε να δημιουργήσουμε την κίνηση στο μενού όταν ο χρήστης περνάει τον δείκτη πάνω από το μενού μας. Αυτό το κάνουμε γράφοντας τον εξής κώδικα στο <head> μέρος της σελίδας μας. Έχουμε προσθέσει και κάποια σχόλια για καλύτερη κατανόηση του κώδικα.
<script>
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Προσθέτουμε ένα κενό span tag πρίν το a tag
$("#topnav li").each(function() { //Για κάθε list item...
var linkText = $(this).find("a").html(); //Βρές το κείμενο μέσα στο <a> tag
$(this).find("span").show().html(linkText); //Και βάλε το κείμενο στο <span> tag
});
$("#topnav li").hover(function() { //Όταν ο χρήστης κάνει hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Βρές το <span> tag και μετακίνησε το 40 pixels πρός τα πάνω
}, 250);
} , function() { //Όταν ο χρήστης κάνει hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Μετακίνησε το <span> πίσω στην αρχική θέση (0px)
}, 250);
});
});
</script>
Αυτό ήταν. Δείτε το αποτέλεσμα κάνοντας κλίκ στο παρακάτω κουμπί
Τα αρχεία του βοηθήματος είναι διαθέσιμα σε όλους τους συνδρομητές του GreekTuts.
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
47 Σχόλια
Ευχαριστούμε για άλλη μια φορά. Με την πρώτη ευκαιρία θα προσθέσω κάτι τέτοιο στην σελίδα μου που είναι ακόμη σε δοκιμαστική φάση.
Σε ότι βοήθεια χρειαστείς εδώ είμαστε
καλησπέρα …σου έστειλα και στο twitter αλλά μάλον δεν το είδες .Η ερώτηση μου είναι .Ο κώδικας αυτός μπορεί να δουλέψει και στο blogger .. Αν θέλεις ρίξε μια ματιά στο site μου …να δεις τι μπάρα έκανα εγώ .Καλά η μπάρα του μαγκάιβερ …έκοψα και έραψα …
Καλησπέρα
Ναι γίνεται και στο blogger
Απλά πρέπει να κάνεις το style inline και να προσθέσεις ένα HTML/JavaScript gadget mε όλο τον κώδικα εκεί που θέλεις να είναι το menu
δηλαδή …υπάρχει κάποιος οδηγός για να ακολουθήσω δεν είμαι Power user ….βασικά θέλω να αντικαταστήσω την μπάρα που έχω κάνει custom δες εδώ http://mousikes-an.blogspot.com/
σε ευχαριστώ πολύ ….πάρα πολύ …δεν ταιριάζει πολύ θα την μικρύνω είναι μεγάλο ….αλλά ξέρεις τι δεν μπορεί να μου κάνει να μου βρει τα Links που έχω για παράδειγμα πίσω απο το Βίντεο για παράδειγμα
Το μενού που έχεις τώρα δεν είναι HTML/Javascript gadget?
Είναι αρκετά εύκολο
Κάνεις add a gadget και επιλέγεις HTML/Javascript
Μέσα λοιπόν σε αυτό θα κάνεις paste τον εξής κώδικα
http://rapidshare.com/files/311552655/code.txt.html
Το μόνο που έχεις να κάνεις τώρα είναι να αλλάξεις την εικόνα (γραμμή 48)
και να παίξεις λίγο με τα margin στην γραμμή 66 για να φέρεις το μενού εκεί που το θές.
Ρίξε μια ματιά σε αυτό
http://galacticreaction.blogspot.com/
Λάθος τοποθέτηση μέν αλλά το αποτέλεσμα θέλω να σου δείξω
Τα links θα τα βάλεις εσύ. Δές τα links που έχεις τώρα στα κουμπιά, και κάντα paste στο νέο μενού
Παράδειγμα
σε ευχαριστώ για άλλη μια φορά .αν έχεις πάντως κάποια άλλες μπάρες η από κάποιο site Μπορείς να μου στείλεις στο mail το έχεις εξάλου ε ….αν και έλα να σε κάνω add
Τέλειο! Thanks
Πολύ ωραίο!!!
Ήθελα να ρωτήσω αν υπάρχει δυνατότητα να στοιχίζεται αυτόματα στο κέντρο της σελίδας, γιατι (μάλλον λόγω javascript) φέυγει προς τα αριστερά πάντα.
Μπορείς να δώσεις στο body ένα margin:auto; και έτσι το μενού σου θα κεντράρεται αυτόματα
oraio alla pos 8a mporousa na to allakso 8esh? diladi na t pao sto kentro i opou allou 8elw?
Αν παίξεις λίγο με τα CSS μπορείς να το τοποθετήσεις όπου θέλεις. Στο παράδειγμα παραπάνω έχω χρησιμοποιήσει ένα div με class .container. Αν το βγάλεις από εκεί ή πειράξεις τις ιδιότητες του .container μπορείς να το τοποθετήσεις όπως θες
to ebgala kai to peiraksa alla pali tpt mporeis na to diefkriniseis akrivos ? gt eimai arxarios akoma
Σε τι αρχείο προσπαθείς να το βάλεις?
ti akrivos ennoeis?
To παραπάνω παράδειγμα είναι ενα μενού σε μια στατική σελίδα html. Όταν τοποθετήσεις τον κώδικα μέσα στα body tags της σελίδας λοιπόν θα εμφανιστεί το μενού. Μετά λοιπόν μέσω των css απλά προσθέτουμε το στύλ. Αν μου δείξεις ένα live παράδειγμα του τι προσπαθείς να κάνεις μπορεί να μπορέσω να βοηθήσω περισσότερο
aaa brika 1 paradeigma apo 1 free template p eixa apo palia
http://www.agriculturaambiental.com/vitruvius/examples.html
des p.x ekei sto menu p lei home examples solutions k auta pws mporo na balw to menu auto edw?
Θα βρείς αυτό
και θα το αντικαταστήσεις με αυτό
Μετά στο head θα προσθέσεις και τις γραμμές
και
Λογικά θα παίξει
mP@ den epaixe m ebgale oti na ne. . sto index.html allaksa ta names p.x Solutions k auta alla eida oti sto style.css einai auto p prepei na allakso
}
div.menu {
background:#2f2f2f;
height:45px;
}
div.menu ul {
list-style:none;
margin:0;
padding:0;
}
div.menu ul li {
float:left;
display:block;
}
div.menu ul li a,
div.menu ul li a:visited {
color:#FFFFFF;
display:block;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
padding:15px 20px 15px;
text-transform:uppercase;
text-decoration:none;
}
div.menu ul li a:hover {
text-decoration:underline;
background:#222;
color:#fff;
}
olo auto einai gia to menu profanos . pws akrivos prepei na t kanw gia na m emfanisei t allo?
Oκ μισό να στο φτιάξω και στο δείχνω
Ορίστε http://demo.greektuts.net/css&jquerymenu/2/
Αν πατήσεις δεξί κλίκ και View Source (Προβολή Κώδικα) θα δείς τι ακριβώς έχω κάνει
hmmz akou na deis tora allaksa to code sto index.html olo auto allaksa kai sto style.css opws t exeis alla pali. tpt. mporeis na m postareis t code akrivos gia na dw? (se euxaristo para poli pantos p me boithas)
Δες λίγο το αρχείο styles.css εδώ
και παρατήρησε τις γραμμές που ξεκινάνε με ul#topnav,
Επίσης πρέπει να έχεις αυτή την εικόνα
και να προσθέσεις και στο head του html σου το script της jQuery
Τέλος να προσέξεις η λίστα με το μενού να έχει
okay to brika ola ok doulevei t slide mono tn eikona dn exw alla okay
se euxaristo para poli ektimo tn boitheia sou k kati akoma 8a i8ela teleutaio an bebaia mporeis einai 1 VERTICAL jquery menu p eida apo 1 boithima alla k auto den ksero pws na to entakso opws kaname s auto t template . exeis ligo xrono na m peis?
Γενικά να καταλάβεις ότι πρέπει η unordered list του μενού σου να έχει id=”topnav”, στο head να έχεις συμπεριλάβει το script και την jquery, να έχεις την εικονίτσα, και από το css κώδικα που έχει σε αυτότο άρθρο να πάρεις και να βάλεις τις γραμμές 1-33 στο δικό σου style.css
Πες μου το tutorial και θα το δώ να σου πω
!!
dn 8ymame akrivos p itan tcp. autos einai o kodikas
menu#1
* {
margin: 1px;
padding: 0px;
}
ul li {
background-color: gray;
width: 160px;
height: 40px;
line-height: 40px;
list-style-type:none;
}
ul li ul {
display: none;
}
ul li:hover {
background-color: green;
}
ul li:hover ul {
display: block;
position: relative;
left: 158px;
top: -41px;
}
test
test
test
test
test
ptotogenhs
deyterogenhs
tritogenhs
fysiognomia
test
test
test
einai 1 vertical menu me submenu
k p.x egw pes 8elw na to entakso sto proigoumeno template s tin stilh LINKS apo ta aristera pws 8a ginei auto?
Κάτι σαν και αυτό δηλαδή?
http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html
oxi oxi apo8ikeuse ton kodika p ebala pano se ena arxeio .html k 8a katalabeis t ennow . pes m
autos eiani o code
menu#1
* {
margin: 1px;
padding: 0px;
}
ul li {
background-color: gray;
width: 160px;
height: 40px;
line-height: 40px;
list-style-type:none;
}
ul li ul {
display: none;
}
ul li:hover {
background-color: green;
}
ul li:hover ul {
display: block;
position: relative;
left: 158px;
top: -41px;
}
test
test
test
test
test
ptotogenhs
deyterogenhs
tritogenhs
fysiognomia
test
test
test
basika ekei p lei protogenhs test ola auta
eixe kai alla ta ebgale gt?
basika exei bgalei ta (li kai ta UL ) alla dn ksero gt tcp mporeis na m boithiseis?
Επειδή υπήρχε ένα θέμα με τα comments το διόρθωσα. Οποτε ξανακάντον paste να τον δώ κανονικά αυτήν την φορά
aaa okay. Oriste kai o kodikas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>menu#1</title>
<style type="text/css">
* {
margin: 1px;
padding: 0px;
}
ul li {
background-color: gray;
width: 160px;
height: 40px;
line-height: 40px;
list-style-type:none;
}
ul li ul {
display: none;
}
ul li:hover {
background-color: green;
}
ul li:hover ul {
display: block;
position: relative;
left: 158px;
top: -41px;
}
</style>
</head>
<Body>
<ul>
<li>test</li>
<li>test
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
<li>ptotogenhs</li>
<li>deyterogenhs</li>
<li>tritogenhs</li>
<li>fysiognomia
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</body>
</html>
checkare to kai pes mou
to checkares ka8olou ?
Ωραία και θέλεις έτσι να κάνεις το μενού στα αριστερά?
nai etsi pantso. alla to 8ema pws 8a to entakso p.x s ekeino to template den ksero prospa8isa asxoli8ika alla m bgike i apo ekso i strava an mporeis helpare me
loipon brikes kamia lysh?
Θα σου έχω λύση την Δευτέρα
okay euxaristo
ta leme tn deutera 
s euxaristo p me boithas pantos
hey na me ksana…. loipon pantso brikes kamia lysh?
pantso please me sozeis ama m apanthseis …kegome alliws…prospa8ise please
pantso? ekanes tpt?
pantzo tora 8elw na balw pali auto to menu s 1 allo menu bar apo 1 template please boithise me se auto