Tech Time: CSS3 Sonar Menu

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Τρίτη 12 Νοεμβρίου 2013

CSS3 Sonar Menu

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα οριζόντιο μενού για τα blog μας!
Είναι με κώδικα Css3 δεν καθυστερεί καθόλου το άνοιγμα του blog μας, η
εγκατάσταση του πολύ εύκολη και εχει ενσωματωμένο ένα πολύ ωραίο
Sonar hover effect!

Δείτε εδώ το DEMO

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

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

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

<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
   list-style: none;
}

ul.sonarmenu li{
display: inline;
}

ul.sonarmenu a{
   position: relative;
   display: inline-block;
   color: black; /* font color */
   text-decoration: none;
   margin: 10px 20px;
   text-transform: uppercase;
   font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
   font-size: 22px; /* font size */
   letter-spacing: 2px; /* letter spacing */
   border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
   outline: none;
   border-bottom: 2px solid #eee; /* Bottom border style on hover */
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
   position: absolute;
   top: 50%;
   left: 50%;
   width: 70px; /* width of outer circle */
   height: 70px; /* height of outer circle */
   border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
   border-radius: 50%;
   content: '';
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
   -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
   transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
   width: 60px; /* width of inner circle */
   height: 60px; /* width of inner circle */
   border-width: 6px;
   -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
   -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
   transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
   -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
   -moz-animation: pulsate 1.2s infinite;
   -ms-animation: pulsate 1.2s infinite;
   animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

30%{
   opacity: 1;
   -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}

   100%{
   opacity: 0.3;
   -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
   }

}

@-moz-keyframes pulsate{

30%{
   opacity: 1;
   -moz-transform: translateX(-50%) translateY(-50%) scale(1);
}

   100%{
   opacity: 0.3;
   -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
   }

}

@-ms-keyframes pulsate{

30%{
   opacity: 1;
   -ms-transform: translateX(-50%) translateY(-50%) scale(1);
}

   100%{
   opacity: 0.3;
   -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
   }

}

@-keyframes pulsate{

30%{
   opacity: 1;
   transform: translateX(-50%) translateY(-50%) scale(1);
}

   100%{
   opacity: 0.3;
   transform: translateX(-50%) translateY(-50%) scale(0.5);
   }

}

</style>
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>

<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
    list-style: none;
}

ul.sonarmenu li{
display: inline;
}

ul.sonarmenu a{
    position: relative;
    display: inline-block;
    color: black; /* font color */
    text-decoration: none;
    margin: 10px 20px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
    font-size: 22px; /* font size */
    letter-spacing: 2px; /* letter spacing */
    border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
    outline: none;
    border-bottom: 2px solid #eee; /* Bottom border style on hover */
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px; /* width of outer circle */
    height: 70px; /* height of outer circle */
    border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
    width: 60px; /* width of inner circle */
    height: 60px; /* width of inner circle */
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
    -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
    -moz-animation: pulsate 1.2s infinite;
    -ms-animation: pulsate 1.2s infinite;
    animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{

30%{
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
}

    100%{
    opacity: 0.3;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
    }

}

@-moz-keyframes pulsate{

30%{
    opacity: 1;
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
}

    100%{
    opacity: 0.3;
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
    }

}

@-ms-keyframes pulsate{

30%{
    opacity: 1;
    -ms-transform: translateX(-50%) translateY(-50%) scale(1);
}

    100%{
    opacity: 0.3;
    -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
    }

}

@-keyframes pulsate{

30%{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

    100%{
    opacity: 0.3;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
    }

}

</style>
<ul class="sonarmenu">
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>
........................................................................................................................................................

ΑΛΛΑΓΕΣ

ΔΙΕΥΘΥΝΣΗ URL-- Eδώ βάζετε το link της διεύθυνση σας!

ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο που θα φαίνεται στην μπάρα του μενού!

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

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

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

Edit by

0 σχόλια :

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

Εγγραφή σε: Σχόλια ανάρτησης ( Atom )

beauty

Smart Defrag 2

Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...

Συνέχεια...

beauty

Auto Scrolling Recent Posts

Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...

Συνέχεια...

beauty

Free YouTube Uploader

Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...

Συνέχεια...

beauty

Social media

Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...

Συνέχεια...

Back to top button

Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...

Συνέχεια...

beauty

Sitemap Widget

Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...

Συνέχεια...