Cool Blue Drop-Down Μενού

Γεια σας και πάλι, η σημερινή ανάρτηση είναι αφιερωμένη στον φίλο μας τον DimP, όπου επειδή δεν δούλεψε το προηγούμενο Drop-Menu όπου είχαμε ανεβάσει και επειδή του υποσχέθηκα ότι θα του ανεβάσω μετά τον διαγωνισμό ένα άλλο, έτσι λοιπόν δικό σου φιλέ μου. Πιο αναλυτικά το παρακάτω Gadgetaki είναι ένα πολλή όμορφο Drop-Menu στο οποίο για να βεβαιωθώ ότι όντως θα δουλέψει όπως κάνω και σε πολλά αλλά Gadgets το δοκίμασα στο Demosite μου (όπου είναι φτιαγμένο από ένα απλό πρότυπο) και όπως διαπίστωσα δουλεύει μια χαρά. Το μόνο που έμεινε είναι να το δοκιμάσετε και εσείς τώρα και να μου πείτε την γνώμη σας. (Το Demo όπως πάντα είναι στο τέλος της ανάρτησης).

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

  Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το πρότυπο σας σε ασφαλή μέρος (Στον υπολογιστή σας).

3) Ψάξτε για τον παρακάτω κώδικα (Ctl+F):

]]></b:skin>

4) Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ακριβώς πάνω από το ]]></b:skin>.

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsE1CgmLjlFIQ6mFaFF9KRnmB74Ssk6QsyH4DnxMV5BHGSMAZl8auYwiv5QEkAqRbz1j4GakCLm0aWDooUgLIBYNxmwKgX1vOgYOrct66jLF7SwE0Lhc9ksLI0kDtztuOjJ6V-5J0TGtyl/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
color:#999999;
}

-Αποθηκεύσετε το πρότυπο.


5) Κάντε παλι κλικ στο Σχεδίαση. και επιλέξτε Διάταξη (στα αριστερά της οθόνης σας).
-Πατήστε Προσθηκη Gadget και έπειτα HTML/JavaScript .

6) Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα μέσα στο πλαίσιο HTML/JavaScript.  

<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul></li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul></li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul></div>

Σημιώσεις:

Μπορείτε να αλλάξετε τα κόκκινα γράμματα, τα μπλε γράμματα.
 
Τα κόκκινα γράμματα είναι οι τίτλοι από τις σελίδες που θέλετε να βάλετε.
Τα μπλε γράμματα είναι το λινκ/url των αναλόγων τίτλων. 

- Για το Demo είναι το παρακάτω βίντεο:




- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
 
-Άμα σας αρέσουν οι αναρτήσεις μας παρακαλώ προωθήστε την ιστοσελίδα μας ή πατήστε το κουμπί παρακολούθηση στα δεξιά.
Ευχαριστούμε.

Copyrights: BlogyTricks©   

Πηγη κωδικα: Blogspot Tutorial