Από την αρχή που ξεκίνησα να ασχολούμαι με το blogging θέλησα να φτιάξω ένα μενού με υποκατηγορίες αλλά δυσκολευόμουν παρά πολύ να βρώ κάτι λειτουργικό και απλό.Γι'αυτό για να απαλλάξω εσάς από τον κόπο και ψάξιμο σας δίνω σήμερα τον κώδικα για φτιάξετε ένα απλό μενού με υποκαρτέλες.
Ακολουθείστε τα βήματα προσεκτικά ένα προς ένα:
- Πανόπτης> Σχεδίαση> Επεξεργασία html
- Πατήστε cntrl+f για να εμφανιστεί η μπάρα αναζήτησης και βρείτε το </head>.Αν δεν βρίσκει τίποτα γράψτε το πιο απλά /head.
- Ακριβώς πάνω από από αυτό αντιγράψτε και επικολλήστε τον παρακάτω κώδικα
| <style type="text/css"> #catmenucontainer{ height:29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) repeat-x; display:block; padding:0px 0 0px 0px; font: 14px "Century gothic",verdana, Arial, sans-serif; font-weight:normal; border-top:1px solid #686D6F; } #catmenu ,#catmenu ul { margin: 0px 5px; padding: 0px; list-style: none; height:29px; } #catmenu a { color: #999; display: block; font-weight: normal; padding: 4px 10px 6px 10px; } #catmenu a:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/) repeat-x; color: #fff; display: block; text-decoration: none; } #catmenu li { float: left; margin: 0px; padding: 0px; } #catmenu li li { float: left; margin: 0px 0px 0px 0px; padding: 0px; width: 130px; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) repeat-x; width: 150px; float: none; margin: 0px; padding: 4px 10px 5px 10px; color:#E8EBEE; border-bottom:1px solid #2C3133; } #catmenu li li a:hover, #catmenu li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/) repeat-x; width: 150px; float: none; margin: 0px; padding: 4px 10px 5px 10px; color:#fff; border-bottom:1px solid #2C3133; } #catmenu li ul { position: absolute; width: 10em; left: -999em; z-index:1; } #catmenu li:hover ul { left: auto; display: block; } #catmenu li:hover ul, #catmenu li.sfhover ul { left: auto; } </style> |
- Κάνουμε πρώτα Προεσκόπηση μήπως βγάζει κανένα σφάλμα και αν όχι,στη συνέχεια Αποθήκευση
- μετά Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript
- και προσθέτουμε τον παρακάτω κώδικα
<div id='catmenucontainer'> <div id='catmenu'> <ul> <li><a href='#' title='#'>Home</a></li>
<li><a href='#' title='#'>Tab 1</a>
<ul class='children'>
<li><a href='#' title='#'>1</a></li>
<li><a href='#' title='#'>2</a></li>
<li><a href='#' title='#'>3</a></li>
</ul></li> <li><a href='#' title='#'>Tab 2</a> <ul class='children'> <li><a href='#' title='#'>1</a></li> <li><a href='#' title='#'>2</a></li> <li><a href='#' title='#'>3</a></li> <li><a href='#' title='#'>4</a></li> </ul> </li> <li><a href='#' title='#'>About</a></li> <li><a href='#'' title='#'>Contact</a></li> </ul> </div> |
Στη συνέχεια απλά κάνουμε αντικατάσταση το πρώτο # μετά το href= με το λινκ της κατηγορίας και δίπλα ανάμεσα στα >όνομα< αλλάζουμε το όνομα της κατηγορίας
Αποθήκευση και τελειώσαμε.
Προσοχή!Σε περίπτωση που το μενού σταταματήσει να δουλεύει κανονικά απλά σώσε τις παρακάτω εικόνες στην επιφάνεια εργασίας και ανέβασέ τες π.χ. στο google sites .Στη συνέχεια αντικατέστησε από δύο φορές το λινκ (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) με αυτό της εικόνας που έχεις στο google sites και το ίδιο κάνε δύο φορές για το δεύτερο λινκ (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/).
πηγή κώδικα
Σχετική ανάρτηση
οριζόντιο μενού με κατηγορίες (ανοιχτό γκρι)
0 σχόλια:
Δημοσίευση σχολίου