Εάν είστε ένας μεγάλος θαυμαστής της MAC, θα αγαπήσετε αυτό το Dock Menu
Χρησιμοποιεί Jquery , Javascript και συστατικό Fisheye από Interface και μερικές εικόνες .
Εδώ θα σας παρουσιάσω πώς να το εφαρμόσετε στην ιστοσελίδας σας.
1. Μεταφορτώστε τα αρχεία πηγής
Μεταφορτώστε το dock menu zip package .
Αποσυμπιέστε το zip αρχείο και ανοίξτε το . Εκεί θα βρείτε 3 βασικά αρχεία που θα χρησιμοποιήσουμε : images , js και style, όπως φαίνετε στο παρακάτω σχήμα
Ανεβάστε το iepngfix , το περιεχόμενο του φακέλου images και του φακέλου js σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών << π.χ. http://www.4shared.com/ , http://sites.google.com/ >> η όποια εσείς χρησιμοποιείτε . Τώρα ανοίγετε το αρχείο style και αλλάζετε τα url εικόνων με τα url των αντίστοιχων αρχείων σας ,( εκτός από menu/main-bg.gif ) αποθηκεύουμε και ανεβάζουμε και αυτό το αρχείο σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών
2. Εισάγετε των Κώδικα
Πάνω από την ετικέτα </head> προσθέτετε τον ακόλουθο κώδικα :<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/interface.js"></script><link href="style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style><![endif]--> Αλλάζετε τις γραμμές js/jquery.js , js/interface.js , style.css , iepngfix.htc με τα url των αντίστοιχων αρχείων σας .
3. Διαμόρφωση
Για να βάλουμε το Dock Menu :Προσθέτετε τον ακόλουθο κώδικα κάτω από στην ετικέτα <body> :
<div class="dock" id="dock"> <div class="dock-container"> <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a> </div></div><!--dock menu JS options --><script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 40, proximity: 90, halign : 'center' } ) } );</script>Αλλάζετε τα url εικόνων με τα url των αντίστοιχων αρχείων σας και αποθηκεύετε
Δείτε το τελικό αποτέλεσμα εδώ
4. Προσθέστε ή αφαιρέστε το στοιχείο
Για να προσθέσετε ένα στοιχείο menu στο top dock ( σημείωση: η ετικέτα span είναι μετά από την ετικέτα img ) :
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
Δημοσίευση σχολίου Blogger Facebook
Παρακαλώ, την προσοχή σας ! ! !
* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.
Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:
* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.
Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"
Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!