Δευτέρα 22 Ιανουαρίου 2018
CSS3 Dropdown Menu
Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία οριζόντια
μπάρα μενού(menu bar) για τα blog μας!
Έχει drop down submenus
για αρκετές
κατηγορίες και διαθέτει και ένα απλό hover effect!Είναι με κώδικα Css3 κάνει
Load γρήγορα και δεν καθυστερεί το άνοιγμα του blog μας!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to bloggerspice.com
Edit by
μπάρα μενού(menu bar) για τα blog μας!
Έχει drop down submenus
για αρκετές
κατηγορίες και διαθέτει και ένα απλό hover effect!Είναι με κώδικα Css3 κάνει
Load γρήγορα και δεν καθυστερεί το άνοιγμα του blog μας!
Δείτε εδώ το DEMO
και για το εγκαταστήσετε και εσείς
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..........................................................................................................................................................
Πηγαίνετε 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
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου