Αναρτήθηκε από
On
Παρασκευή, Οκτώβριος 30, 2009
Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε ένα όμορφο και κομψό πτυσσόμενο Slashdot sidebar μενού .
1 ) Πρώτα απ’όλα θα κατεβάστε sdmenu.zip , αμέσως μετά κάνετε Extract στο rar και ανοίξτε το αρχείο .
Μέσα στο φάκελο θα βρείτε κάποια GIF εικονίδια , sdmenu.js και sdmenu.css αρχεια . Ανεβάστε όλα τα GIF εικονίδια και το sdmenu.js στο δικό σας Free file hosting and file sharing site Αμέσως μετά , ανοίγετε το sdmenu.css :div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
Ψάχνετε μέσα στο css script τις εξής γραμμές : bottom.gif , title.gif , toptitle.gif , expanded.gif , collapsed.gif και linkarrow.gif και αντικαταστήστε τις με τα URL των αντιστοίχων εικονιδίων σας . Αποθηκεύετε το css script και το ανεβάζετε κ’ αυτό στο δικό σας Free file hosting and file sharing site
2) Τώρα πηγαίνουμε Διάταξη
Επεξεργασία HTML Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε στο πρότυπο μας το <head> και κολλάμε ακριβώς κατω από το <head> τον παρακάτω κώδικα :<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" /> <script type="text/javascript" src="sdmenu/sdmenu.js"> /*********************************************** * Slashdot Menu script- By DimX * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script type="text/javascript"> // <![CDATA[ var myMenu; window.onload = function() { myMenu = new SDMenu("my_menu"); myMenu.init(); }; // ]]> </script>
Αλλάζετε τα sdmenu.css και sdmenu.js με τα URL των αντιστοίχων αρχείων σας και αποθηκεύετε το πρότυπο . 3 ) Ενεργοποιήστε το Slashdot sidebar Menu :
Πηγαίνουμε Διάταξη Στοιχεία Σελίδας Προσθήκη gadget HTML/JavaScript και εισάγουμε τον παρακάτω κώδικα : Αλλάζετε τα links με τα δικά σας ,κάντε αποθήκευση και ανανεώστε την σελίδα σας για να δείτε το αποτέλεσμα .
Καλή επιτυχία σε όλους !!! 
Δείτε το Slashdot Menu σε λειτουργία εδώ :
Αναρτήσεις
0 σχόλια:
Ανάρτηση Σχολίου