Ads 468x60px

Πέμπτη, 5 Μαΐου 2016

Black Responsive drop down menu

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα απλό και εύχρηστο widget το
οποίο είναι ένα drop down menu bar για τα blog μας!Είναι απλό στην
εγκατάσταση, σε μαύρο χρώμα ιδανικό για μαύρα πρότυπα αλλά μπορείτε
να το δοκιμάσετε και με διαφορετικού τύπου χρωμάτων templates!




Δείτε εδώ το DEMO



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

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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
........................................................................................................................................ - See more at: http://cris-dio4.blogspot.gr/2013/09/css-pink-social-networking-widget_23.html?zx=a38fa214da55973#sthash.yU5D6Vbn.dpuf
 Πηγαίνετε blogger--> Διάταξη -->

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

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

..............................................................................................................................................................

<style>
/*Responsive Menu by www.bloggerspice.com */
#BSResponsivemenu{background:#1a1a1a;color:#fefefe;height:35px;}
#BSResponsivemenu ul,#BSResponsivemenu li{margin:0;padding:0;list-style:none}
#BSResponsivemenu ul{height:35px}
#BSResponsivemenu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#BSResponsivemenu li a{color:#ccc}
#BSResponsivemenu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#fefefe;}
#BSResponsivemenu li:hover > a,#BSResponsivemenu li a:hover{color:#ffffff}
#BSResponsivemenu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#BSResponsivemenu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#BSResponsivemenu label span{font-size:13px;position:absolute;left:35px}
#BSResponsivemenu ul.BSResponsivemenus{height:auto;overflow:hidden;width:180px;background:#000000;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus a{color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#BSResponsivemenu li:hover ul.BSResponsivemenus{display:block}
#BSResponsivemenu a.prett,#BSResponsivemenu a.trigger2{padding:0 27px 0 14px}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#000000;color:#fefefe}
#BSResponsivemenu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#1a1a1a;}
#BSResponsivemenu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}

@media screen and (max-width: 768px){
#BSResponsivemenu{position:relative}
#BSResponsivemenu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#BSResponsivemenu ul.BSResponsivemenus{width:100%;position:static;border:none}
#BSResponsivemenu li{display:block;float:none;width:auto;text-align:left}
#BSResponsivemenu li a{color:#000000}
#BSResponsivemenu li a:hover{color:#fefefe}
#BSResponsivemenu li:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu ul.BSResponsivemenus a{background:#1a1a1a;}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#000000;}
#BSResponsivemenu input,#BSResponsivemenu label{position:absolute;top:0;left:0;display:block}
#BSResponsivemenu input{z-index:4}
#BSResponsivemenu input:checked + label{color:white}
#BSResponsivemenu input:checked ~ ul{display:block}
}
</style>
<nav id='BSResponsivemenu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a class='prett' href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
</ul>
</li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a class='prett' href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ1</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
<li><a href='#' title="
ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ">ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ</a></li>
</ul>
</li>
</ul>
</nav>

.............................................................................................................................................................
ΑΛΛΑΓΕΣ
και για το εγκαταστήσετε και εσείς

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

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

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
........................................................................................................................................ - See more at: http://cris-dio4.blogspot.gr/2013/09/css-pink-social-networking-widget_23.html?zx=a38fa214da55973#sthash.yU5D6Vbn.dpuf

 Αντικαταστήστε όλα τα <<  ΟΝΟΜΑ ΕΤΙΚΕΤΑΣ  >>με τον ανάλογο δικό σας τίτλο!

 Στα οριζόντια βάζετε το ίδιο όνομα 2 φορές:ΠΧ: Αρχική - Αρχική

 Αντικαταστήστε όλα τα #  με το δικό σας url!

 Μόλις τελειώσετε  Αποθήκευση και έτοιμοι!

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


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



 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog