Blogger Tips: Οριζόντιο μενού drop down

18/10/13


Μπορεί να άργησα όμως δεν το είχα ξεχάσει απλά ήθελα λίγο χρόνο για να βρω έναν κώδικα εύκολο στην χρήση και ρυθμίσω και τα χρώματα όποτε σήμερα σας έχω τρεις κώδικες για το οριζόντιο μενού drop down

drop down menu blogger
Blogger Tips: Οριζόντιο μενού drop down 


Η διαδικασία που πρέπει να ακολουθήσετε:

Διάταξη=>Προσθήκη gadget=>HTML/JavaScript 

όπου εκεί πρόσθετε τον κώδικα





Οριζόντιο μενού drop down μαύρο 


ΚΩΔΙΚΑΣ

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#000000;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#dcdcdc;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
font-size: 14px;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#fff;
  padding:0 10px;
background:#BDBDBD;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #000000;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #BDBDBD;
  color: #fff;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}


</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Αρχική Σελίδα</a></li>
           <li><a href='#'>Μενού 1 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>
           </li>
      
          
           <li><a href='#'>Μενού 2 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                 
               </ul>
          <li><a href='#'>Μενού 3 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

<li><a href='#'>Μενού 4 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>
<li><a href='#'>Μενού 5 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>


 </li>
    <li><a href='#'>Για μένα</a>
             
           </li>
             <li><a href='#'>Επικοινωνία</a>          
           </li>
         </li></li></li></ul>
      </div>



   </div>



Το συγκεκριμένο drop down μενού έχει μέχρι 8 οριζόντιες κατηγορίες δηλαδή 
Αρχική Σελίδα, Μενού 1-5, Για μένα, Επικοινωνία 
μπορείτε να αλλάξατε και δώσετε το όνομα που επιθυμείτε και ταιριάζει στο blog σας.
Αν  θέλετε να λιγότερες κατηγορίες απλά σβήστε ένα τέτοιο κομμάτι 

<li><a href='#'>Μενού 5 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

και αφήστε όσα μενού σας αρέσει.




Ενώ στις κατηγορίες του υπομενού (Υπομενού 1-6)  μπορείτε να βάλετε όσες θέλετε (εγώ το δοκίμασα μέχρι 30 όμως στην εικόνα δεν το έπαιρνε και φαίνεται μέχρι 20).

Αν θέλετε να προσθέσετε υπομενού απλά τοποθετήστε όσες φορές θέλετε τον κωδικά πριν το </ul> όπως βλέπετε το παραπάνω  Μενού 5

 <li><a href='#'>Υπομενού 7</a></li>

και αν θέλετε να αφαιρέσετε απλά σβήστε το παραπάνω με προσοχή μην σβηστούν τα  </ul> 




Αντικαταστήστε blog.homepageUrl με το λινκ (url) της αρχικής σας σελίδας και όπου βλέπετε # το λινκ (url) που θέλετε να οδηγεί το υπομενού και οι δυο κατηγορίες.


Μπορείτε να αλλάξετε με λινκ (url) και τα για το που θέλετε να οδηγεί συνολικά το μενού, εγώ θα προτιμούσα να μην μπερδεύονται με λινκ όταν πατάνε στην μπάρα του μενού δηλαδή να μη το αλλάξετε αφήστε το όπως είναι. 



Σας έχω άλλα δυο χρώμα άσπρο και ροζ, μόνο το χρώμα αλλάζει οι οδηγίες είναι ίδιες.


Οριζόντιο μενού drop down άσπρο

ΚΩΔΙΚΑΣ

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background: #FFFEFE;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#080000;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
font-size: 14px; bold;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#080000;
  padding:0 10px;
background:#DFDDDD;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #FFFEFE;
  color: #080000;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #DFDDDD;
  color: #080000;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}


</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Αρχική Σελίδα</a></li>
           <li><a href='#'>Μενού 1 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>
           </li>
      
          
           <li><a href='#'>Μενού 2 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                 
               </ul>
          <li><a href='#'>Μενού 3 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

<li><a href='#'>Μενού 4 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

 <li><a href='#'>Μενού 5 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>
           </li>

 </li>
    <li><a href='#'>Για μένα</a>
             
           </li>
             <li><a href='#'>Επικοινωνία</a>          
           </li>
         </li></li></ul>
      </div>


     

   </div>




Οριζόντιο μενού drop down ροζ


ΚΩΔΙΚΑΣ

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#F5A9E1;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#000000;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
font-size: 14px;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#000000;
  padding:0 10px;
background:#F6CEEC;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #FA58F4;
  color: #000000;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #F6CEF5;
  color: #000000;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}


</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Αρχική Σελίδα</a></li>
           <li><a href='#'>Μενού 1 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>
           </li>
      
          
           <li><a href='#'>Μενού 2 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                 
               </ul>
          <li><a href='#'>Μενού 3 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

<li><a href='#'>Μενού 4 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

<li><a href='#'>Μενού 5 »</a>
               <ul>
                  <li><a href='#'>Υπομενού 1</a></li>
                  <li><a href='#'>Υπομενού 2</a></li>
                  <li><a href='#'>Υπομενού 3</a></li>
                  <li><a href='#'>Υπομενού 4</a></li>
                  <li><a href='#'>Υπομενού 5</a></li>
                  <li><a href='#'>Υπομενού 6</a></li>
               </ul>

 </li>
    <li><a href='#'>Για μένα</a>
             
           </li>
             <li><a href='#'>Επικοινωνία</a>          
           </li>
         </li></li></li></ul>
      </div>


   </div>





Ελπίζω να σας αρέσει και να το χρησιμοποιήσετε!

Για οποιαδήποτε απορία αφήστε μου στα σχόλια και θα σας βοηθήσω.



Δημιουργία ή ανανέωση blog, περισσότερες πληροφορίες διαβάστε στο El Design, καθώς μπορείτε να στείλε και μήνυμα στο email
eleftheraki0000@gmail.com



14 σχόλια:

  1. Πολυ σημαντικο και αυτο Ελευθερια μου! Μπραβο και ευχαριστουμε!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ!
      Ήθελα να σας δώσω ένα εύκολο στην χρήση για να μπορούν όλες να το χρησιμοποιήσουν!

      Διαγραφή
  2. Πολύ χρήσιμα tips, θα τα κοιτάξω σίγουρα! :)

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Σε ευχαριστώ!
      Αν χρειαστείς κάποια άλλη βοήθεια πες μου!

      Διαγραφή
  3. Ευχαριστούμε Ελευθερία! Πολύ χρήσιμο....

    ΑπάντησηΔιαγραφή
  4. αχχχχχχχ ευχαριστω χιλια ευχαριστω! Το εψαχνα εδω και καιρο αυτο και ΕΠΙΤΕΛΟΥΣ μπορω να οργανωσω τις πολλες πολλες κατηγοριες του blog οπως ηθελα!!
    :)

    xoxo

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Ελπίζω να σε βοηθήσει να οργανώσεις το blog σου όπως θέλεις! ;)

      Διαγραφή
  5. Επιτέλους! Ξέρεις πόσο ανυπομονούσα γι αυτό Ελευθερία μου :)
    Θα το δοκιμάσω οπωσδήποτε..(για οποιαδήποτε βοήθεια..να υποθέσω πως μπορώ να σου στείλω ε;) <3

    Alexandra by beautydiarybyalexandra.blogspot.gr

    ΑπάντησηΔιαγραφή
  6. Ξεκινάω την προσπάθεια-με τους κώδικες Html ποτέ δεν τα πάω καλά!!!
    Σε ευχαριστούμε πολύ Ελευθερία, πραγματικά έψαχνα καιρό να το κάνω <3
    Αν χρειαστώ κάτι θα σου αφήσω κι εγώ comment ,πιστεύω να μην πειράζει :)

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Ότι χρειαστείς άφησε μου ένα σχόλιο και θα σε βοηθήσω! :)

      Διαγραφή
  7. Έψαχνα καιρό κάτι τέτοιο Ελευθερία μου! Μακάρι να βρω λίγο χρόνο να το δοκιμάσω!! Ευχαριστούμε πολύ πολύ!!

    ΑπάντησηΔιαγραφή

Σας ευχαριστώ για την επίσκεψη στο blog μου❣
Thank you for visiting my blog❣

Copyright © by Diary Of A Beauty Addict. All rights reserved. Designed By El Design

UP
Blogger Widget