Drop Down Menu

CSS3 Drop Down Menu For Blogger

Το CSS3 Drop Down Menu For Blogger v2 είναι ένα πολύ απλό menu για το blog σας. Είναι πολύ εύκολο και μπορείτε να το βάλετε όλοι στο blog σας. Το συγκεκριμένο menu όμως θα δώσει την ευκαιρία σε όσους θέλουν να μάθουν πώς δουλεύει ένα menu και να μάθουν πώς θα φτιάξουν ένα δικό τους μενού από την αρχή.

Πάμε όμως να το δούμε στη πράξη

1.. Σύνδεση στον Blogger
2.. Πρότυπο  
3.. Δημιουργία αντίγραφου ασφαλείας / Λήψη πλήρους προτύπου
4.. Επεξεργασία HTML
5.. Συνέχεια
6.. Πατάμε ctrl + f για να ανοίξει το παραθυράκι αναζήτησης και εκεί ψάχνουμε να βρούμε το παρακάτω κώδικα:  

]]></b:skin>

 7.. Αφού το βρούμε ακριβώς από πάνω του κάνουμε επικόλληση τον παρακάτω κώδικα:

/*----- My Blogger Tricks Drop Down Menu v1 ----*/#mbtnavbar {     background: #060505;     width:960px;     color: #FFF;         margin: 0px;         padding: 0;         position: relative;         border-top:0px solid #960100;         height:35px;}#mbtnav {    margin: 0;     padding: 0; } #mbtnav ul {     float: left;     list-style: none;     margin: 0;     padding: 0; } #mbtnav li {     list-style: none;     margin: 0;     padding: 0;         border-left:1px solid #333;         border-right:1px solid #333;         height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {     color: #FFF;     display: block;    font:normal 12px Helvetica, sans-serif;    margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none;       } #mbtnav li a:hover, #mbtnav li a:active {     background: #BF0100;     color: #FFF;     display: block;     text-decoration: none;         margin: 0;     padding: 9px 12px 10px 12px;       }#mbtnav li {     float: left;     padding: 0; } #mbtnav li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0;     padding: 0; } #mbtnav li ul a {     width: 140px; } #mbtnav li ul ul {     margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {     left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {     left: auto; } #mbtnav li:hover, #mbtnav li.sfhover {     position: static; }#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {     background:#BF0100;     width: 120px;     color: #FFF;     display: block;     font:normal 12px Helvetica, sans-serif;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border-bottom:1px dotted #333;    } #mbtnav li li a:hover, #mbtnavli li a:active {     background: #060505;     color: #FFF;     display: block;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; }

Σημειώσεις - Παρατηρήσεις

1. #060505; ==> Είναι το χρώμα που θα έχει το menou (μαύρο)   

2. width: 960px;  ==> είναι το πλάτος που θα έχει το menu 

3. border-left:1px solid #333;  ==> είναι η διαχωριστική γραμμή που υπάρχει ανάμεσα στης κατηγορίες (αριστερά) 

      border-right:1px solid #333;  (δεξιά)

4. #BF0100; ==> είναι το χρώμα όταν που βλέπουμε όταν ο δείκτης  περνάει πάνω από το menu (κόκκινο)

5. #BF0100;  ==> είναι το χρώμα που έχουν οι υποκατηγορίες του menu (κόκκινο)

6. 

#060505;  ==> 

είναι το χρώμα που έχουν οι υποκατηγορίες του menu όταν περνάει ο δείκτης πάνω από τις 

υποκατηγορίες

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

8.. Κάνουμε προεπισκόπηση, και αν δεν μας βγάλει κάποιο λάθος κάνουμε αποθήκευση.

9.. Διάταξη

10.. Προσθήκη gadget
11.. HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα:   

<div id='mbtnavbar'>       <ul id='mbtnav'>         <li>           <a href='#'>Home</a>         </li>         <li>           <a href='#'>About</a>        </li>         <li>           <a href='#'>Contact</a>         </li>   <li>            <a href='#'>Sitemap</a>            <ul>                 <li><a href='#'>Sub Page #1</a></li>                 <li><a href='#'>Sub Page #2</a></li>                 <li><a href='#'>Sub Page #3</a></li>               </ul>         </li>     </ul>     </div>

Σημειώσεις - Παρατηρήσεις

1. 

 

Home, 

 

About, 

 

Contact, 

 

Sitemap  ==> είναι τα ονόματα που θα έχουν οι κατηγορίες στο κύριο menu

 

2. # ==> είναι το url που θα οδηγείτε κάποιος όταν πατάει πάνω σε κάποια κατηγορία

 

3. 

 

Sub Page #1, 

 

Sub Page #2, 

 

Sub Page #3 ==> Είναι τα ονόματα που θα έχουν οι κατηγορίες όταν κάποιος πατήσει στο Sitemap

 

4. Για να προσθέσετε άλλη μια κατηγορία προσθέτουμε πριν από το τελευταίο </li>

 

<li>
    <a href='#'>Nea Katigoria</a>
</li> 

5. Για να προσθέσετε άλλη μια κατηγορία με υποκατηγορίες προσθέτουμε πριν  

από το τελευταίο 

 

 </ul>

 <li>
<a href='#'>Nea Katigoria me ipokatigories</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>

12.. Κάντε  αποθήκευση