Δημιουργία σταθερού μενού πλοήγησης
Το concept πίσω από αυτού του είδους τα μενού, είναι να καθιστούμε δυνατό στους χρήστες μας να έχουν πρόσβαση στο μενού μας και να μπορούν να πλοηγηθούν σε όλες τις σελίδες μας ανεξάρτητα από το πόσο “κάτω” στην σελίδα μας βρίσκονται.
Σχεδιασμός του μενού
Πρίν ξεκινήσουμε να σχεδιάζουμε το μενού μας πρέπει να λάβουμε υπ’όψη μας κάποια βασικά στοιχεία χρηστικότητας. Το μενού μας δεν πρέπει να είναι υπερφορτωμένο με πληροφορία και γενικά πρέπει να είναι όσο πιο περιεκτικό γίνεται ώστε να μην επιρεάζει την αισθητική της ιστοσελίδας μας όταν ο χρήστης διαβάζει τις επιμέρους σελίδες μας.
Επίσης καλό είναι το νέο μας μενού να μην περιέχει υπομενού (και ειδικότερα drop downs) καθώς έτσι θα μπλέξουμε το περιεχόμενο μας με την πλοήγηση. Με άλλα λόγια το μενού μας πρέπει να περιλαμβάνει τα απολύτως βασικά και να είναι όσο το δυνατόν minimal.
Μετατροπή του εικαστικού σε HTML/CSS
Τέλεια! Έχουμε έτοιμο το μενού μας στο Photoshop. Τώρα πρέπει να το “κόψουμε” σε HTML και CSS.
Ξεκινάμε δημιουργώντας το index.html και γράφοντας τον παρακάτω κώδικα:
<!DOCTYPE html> <html lang="el"> <head> <meta charset="utf-8"> <title>Δημιουργία σταθερού μενού πλοήγησης | GreekTuts - Ελληνικά Βοηθήματα</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" media="screen" /> <link rel="shortcut icon" href="images/favicon.png"/> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="common.js"></script> </head> <body> </body> </html>
Συνεχίζουμε γράφοντας μέσα στο body τον κώδικα για το header
<div id="header"> <div class="container"> <div class="head"> <nav> <ul> <li><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Αρχική</a></li> <li><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Blog</a></li> <li><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Υπηρεσίες</a></li> <li><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Προϊόντα</a></li> <li><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Επικοινωνία</a></li> </ul> </nav> <div class="logo"> <a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html"><img src="images/logo.png" alt="" /></a> </div> </div> </div> </div>
Μετά τον κώδικα για το περιεχόμενο
<div id="content"> <div class="container"> <div class="row"> <div class="article"> <img src="images/thumb.png" alt="" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="article last"> <img src="images/thumb.png" alt="" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <divclass="row link"> <a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">« Πίσω στο βοήθημα</a> </div> </div> </div>
Και τέλος τον κώδικα για το footer
<div id="footer"> <div class="container low"> <p><a href="http://foulscode.blogspot.gr/2013/01/blog-post_8.html">Δημιουργία σταθερού μενού πλοήγησης</a> | <a href="http://greektuts.net">FoulsCode - Ελληνικά Βοηθήματα</a></p> </div> </div>
Δημιουργούμε το αρχείο styles.css και μέσα γράφουμε
body {
font-family: 'Open sans';
background:#f7f7f7;
font-size:14px;
color:#333;
}
a {
color:#333;
text-decoration:none;
}
a:hover {
color:#3A9EF4;
}
#header {
background: url(images/header.png) repeat-x scroll center top transparent;
border-bottom: 2px solid #D1D1D1;
margin-bottom: 15px;
}
#header.floater {
background: url(images/header-float.png) repeat-x scroll center top transparent;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
box-shadow: 0 0 5px #000000;
-o-box-shadow: 0 0 5px #000000;
-webkit-box-shadow: 0 0 5px #000000;
-moz-box-shadow: 0 0 5px #000000;
}
#content.padd {
padding-top:85px;
}
.logo {
float: left;
position: relative;
top: 17px;
}
nav {
float: right;
position: relative;
top: 30px;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
float: left;
list-style: none outside none;
margin: 0 3px;
}
nav ul li a {
color: #333;
display: block;
font-size: 14px;
padding: 5px 10px;
text-decoration: none;
}
nav ul li a.active,
nav ul li a:hover {
background-color: #3A9EF4;
border-radius: 3px 3px 3px 3px;
color:#fff;
}
.head {
display: inline-block;
height: 85px;
width: 980px;
}
.container {
display: block;
margin: 0 auto;
width: 980px;
}
.row {
display: inline-block;
width: 100%;
}
.row.link {
display: inline-block;
margin-bottom: 25px;
text-align: center;
}
.article {
border-bottom: 1px dashed #CECECE;
float: left;
margin-bottom: 15px;
padding-bottom: 15px;
width: 480px;
}
.article.last {
margin-left:20px;
}
.article img {
float: left;
margin-right: 10px;
position: relative;
top: 3px;
}
.article p {
font-size:14px;
color:#333;
}
#footer {
background: none repeat scroll 0 0 #333333;
padding: 25px;
text-align: center;
}
#footer p {
color: #CECECE;
}
#footer a {
color:#CECECE;
}
#footer a:hover {
color:#3A9EF4;
}
Και έχουμε έτοιμη την σελίδα μας σε HTML/CSS !
Προσθήκη λειτουργικότητας με jQuery
Ο πρώτος τρόπος για να προσθέσουμε την λειτουργικότητα που εποθυμούμε στο μενού μας, τώρα που έχουμε έτοιμο και τον κώδικα μας, είναι με την χρήση της jQuery.
Δημιουργούμε ένα νέο αρχείο με το όνομα common.js και μέσα γράφουμε
$(function() {
// Detach NavBar
var $top= $('#header').offset().top + 100;
$(window).scroll(function()
{
if ($(window).scrollTop()>$top)
{
$('#header').addClass('floater');
$('#content').addClass('padd');
}
else
{
$('#header').removeClass('floater');
$('#content').removeClass('padd');
}
});
});
Αν δούμε το demo και θα διαπιστώσουμε πως όταν κάνουμε scroll την σελίδα, προσθέτεται μια κλάση στο header και στο content. Αυτές τις κλάσεις τις έχουμε δημιουργήσει στο CSS μας και κάνουν το μενού να “ξεκολήσει” από την θέση του και να ακολουθάει το scroll.
Έλεγχος συμβατότητας στους browsers
Ένα τελευταίο βήμα που πρέπει να μην ξεχάσουμε να ακολουθήσουμε είναι το να ελέγξουμε το αποτέλεσμα του μενού που δημιουργήσαμε σε όσους περισσότερους browsers μπορούμε. Ο λόγος που αυτό το βήμα είναι πολύ σημαντικό είναι επειδή είναι ο μόνος (ή τουλάχιστον ο βασικός) τρόπος που δίνουμε στον χρήστη να πλοηγηθεί στην ιστοσελίδα μας. Έτσι ακόμα και αν το αποτέλεσμα δεν είναι 100% ίδιο ανάμεσα στους διάφορους browsers, πρέπει τουλάχιστον να φροντίσουμε να μπορεί να χρησιμοποιηθεί κανονικά από τους χρήστες ασχέτως από τον browser με τον οποίο βλέπουν την ιστοσελίδα μας.
Σχόλια