GreekTuts » Μενού http://greektuts.net Ελληνικά Βοηθήματα Mon, 30 Jan 2012 13:52:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Δημιουργία μενού πλοήγησης με το Adobe Photoshophttp://greektuts.net/create-navigation-menu-in-photoshop/ http://greektuts.net/create-navigation-menu-in-photoshop/#comments Thu, 04 Mar 2010 22:32:04 +0000 Στράτος Ιορδανίδης http://greektuts.net/?p=2779 Παρακάτω θα δούμε πως μπορούν να δημιουργήσουμε ένα μενού πλοήγησης με το Adobe Photoshop. Είναι σχετικά εύκολο και γρήγορο.

Τελικό Αποτέλεσμα

menu_final

Βήμα 1: Δημιουργία νέας εικόνας

Αρχικά δημιουργήστε μια νέα εικόνα με πλάτος 920 και μήκος 170 pixels.

menu_final

Βήμα 2: Μενού πλοήγησης

Φτιάξτε έναν καινούργιο layer Layer > New > Layer … και ονομάστε τον “Menu“. Ορίστε ως foreground color το χρώμα #1Ε1Ε1Ε και πάρτε το Rounded Rectangle Tool, μετά ορίστε το radius σε 6 px και ζωγραφίστε το μενού όπως το παράδειγμα παρακάτω.

draw_menu

Βήμα 3: Δώστε στυλ στο μενού πλοήγησης

Ξεκινήστε από το Layer > Layer Style > Blending Options… και επιλέξτε τοOuter Glow. Ακολουθήστε τις παρακάτω ρυθμίσεις.

outer_glow

Μετά επιλέξτε Gradient Overlay και ακολουθήστε τις παρακάτω ρυθμίσεις.

gradient_overlay

Βήμα 4: Προσθήκη κειμένου

Αρχικά ορίστε το foreground color σε #FFFFFF (άσπρο). Επιλέξτε το Horizontal Type Tool, ως γραμματοσειρά την Myriad Pro (Regular) ή την Arial και 14 pt μέγεθος.

Γράψτε κάποιες λέξεις όπως “Home“, “About“, “Blog” κ.α. και ανοίξτε τα blending options Layer -> Layer Style -> Blending Options…. Ακολουθήστε τις παρακάτω ρυθμίσεις.

drop_shadow

Τώρα το μενού σας πρέπει να είναι κάπως έτσι:

example

Βήμα 5: Προσθήκη ενός σχεδίου

Με ένα σχέδιο το μενού μας θα φαίνεται καλύτερο. Κατεβάστε την παρακάτω εικόνα: Paint canvas texture και ανοίξτε την. Επιλέξτε την (Ctrl + A) και αντιγράψτε την (Ctrl + C).  ΠΡΟΣΟΧΗ: τo παρακάτω μέρος είναι λίγο δυσνόητο και αν δεν έχετε το επιθυμητό αποτέλεσμα με την πρώτη προσπάθεια, παρακαλώ διαβάστε το ξανά και ξανά. Φτιάξτε έναν καινούργιο layer Layer > New > Layer… και κάντε επικόληση (Ctrl + V). Μετά κρατήστε πατημένο το Ctrl και κάνε ένα κλικ στον layer “Menu” για να επιλέξετε το σχήμα του. Ενώ έχετε επιλεγμένο το σχήμα του layer “Menu”, κάντε κλικ στον layer με το σχέδιο και αντιγράψτε τον (Ctrl + C). Μετά κρύψτε αυτόν τον layer (με το σχέδιο) και κάντε επικόλληση (Ctrl + V). Το αποτέλεσμα:

example2

Μετά απλά ακολουθήστε τις παρακάτω ρυθμίσεις.

blending

Αποτέλεσμα:

example3

]]> http://greektuts.net/create-navigation-menu-in-photoshop/feed/ 8 Μενού με CSS και jQueryhttp://greektuts.net/css-and-jquery-menu/ http://greektuts.net/css-and-jquery-menu/#comments Mon, 23 Nov 2009 10:20:13 +0000 Pantso http://greektuts.net/?p=2123 Θα υποθέσουμε ότι έχουμε ήδη το αρχείο 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 με άλλο χρώμα. Κάτι σαν την εικόνα που ακολουθεί.

cssjquerymenu1

Πλέον έχουμε το μενού μας σε μορφή 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.

btn


Member Area
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

]]> http://greektuts.net/css-and-jquery-menu/feed/ 47