Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τετάρτη, Νοεμβρίου 18

0

MAC Style Dock Menu Για το Blog σας




     Εάν είστε ένας μεγάλος θαυμαστής της 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>

Συμβατότητα μηχανής αναζήτησης

 

Είναι δοκιμασμένο σε IE 6, IE 7, Opera 9, Firefox , και  Safari 2

Script credits :   ndesign studio 


0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS