Ads 468x60px

Τετάρτη, 15 Μαρτίου 2017

Tooltip navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο και 
πρωτότυπο navigation bar widget!Μπαίνει οριζόντια στην σελίδα μας, είναι ελαφρύ
δεν καθυστερεί το άνοιγμα της, και διαθέτει  hover tooltip effect όταν 
κάνουμε mouseover με τον κέρσορα μας!






Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

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

και στο παράθυρο που θα ανοίξει  


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

<style type="text/css">
nav {
  margin : 50px auto;
  width  : 100%;
}
menu {
  border-radius : 3px;
}
menu:after , menu:before {
  display : block;
  content : ' ';
}
menu:after {
  clear : both;
}
li {
  list-style-type : none;
  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
  float   : left;
  cursor  : pointer;
  padding : 3px 10px;
  border-top    : 2px solid rgba(200,200,255,0.5);
  border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
  border-radius : 5px 0 0 5px;
}
li:last-child {
  border-radius : 0 5px 5px 0;
}
a {
  display : block;
  padding : 10px 13px;
  font-size : 26px;
  text-decoration : none;
  border-radius   : 5px;
  position        : relative;
  top   : 0;
  color : #FFF;           
  transition : all .4s;
}
li:hover a {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}
li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}
li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}
/*************************************/
.menu2 {
  width : 100%;
}
.menu2 a {
  font-family : georgia;
  font-size   : 14px;
  font-style  : italic;
  text-transform : capitalize;
}
.menu2 li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2);
}
.selected {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}
.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}
</style>

<nav>
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
  <menu>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
  </menu>
</nav>

....................................................................................................................................................
ΑΛΛΑΓΕΣ 

Αντικαταστήστε όλα τα #  με τις δικές σας διευθύνσεις urls!

TΙΤΛΟΣ: Εδώ βάζετε τον τίτλο σας!


✈            Αντικαταστήστε τα εικονίδια με

❄             δικά σας, η εναλλακτικά αν δεν θέλετε
☎            εικονίδια βάλτε τίτλους!

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


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


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



 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog