Ads 468x60px

Τετάρτη, 6 Απριλίου 2016

CSS3 Dropdown Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία οριζόντια
μπάρα μενού(menu bar) για τα blog μας!
Έχει drop down submenus
για αρκετές
κατηγορίες και διαθέτει και ένα απλό hover effect!Είναι με κώδικα Css3 κάνει
Load γρήγορα και δεν καθυστερεί το άνοιγμα του blog μας!



Δείτε εδώ το DEMO



και για το εγκαταστήσετε και εσείς

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο  κώδικα--
..........................................................................................................................................................

<center><style>
/* The CSS Code for the menu starts here bloggerspice.com */
 #BloggerSpiceSimpleMenu {
 width:800px;
 background:#005C91;
 border-bottom: 5px solid #1A1A1A;
 border-top: 1px solid #1A1A1A;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #BloggerSpiceSimpleMenu ul {
 float: left;
 width: 100%;
 }
 #BloggerSpiceSimpleMenu li {
 float: left;
 list-style-type: none;
 }
 #BloggerSpiceSimpleMenu li a {
 background:#005C91;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #BloggerSpiceSimpleMenu li a:hover {
 background:#000000;
 color: #fff;
 }
 #BloggerSpiceSimpleMenu li li a {
 background: none;
 background-color: #111111;
 border: 1px solid #1A1A1A;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #BloggerSpiceSimpleMenu li li a:hover {
 background: none;
 background-color: #005C91;
 }
 #BloggerSpiceSimpleMenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #BloggerSpiceSimpleMenu li:hover ul {
 left: auto;
 }

</style>
<div id="BloggerSpiceSimpleMenu">
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">Home</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Sub Menu 1</a>
 <ul>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 1</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 2</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 3</a></li>
</ul>
</li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Sub Menu 2</a>
 <ul>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 1</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 2</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL"> Menu 3</a></li>
</ul>
</li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Menu 1</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Menu 2</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Menu 3</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Menu 4</a></li>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">Menu 5</a></li>
</div>
</center>
 
..............................................................................................................................................................
ΑΛΛΑΓΕΣ
ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!!
Sub Menu -----Menu --Αντικαταστήστε όλα τα  Sub Menu ---Menu   με τους δικούς σας Τίτλους!
Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα
thanks to bloggerspice.com




Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog