Ads 468x60px

Τετάρτη, 20 Ιουλίου 2016

Vertical 3D Flip Menu


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

Είναι κάθετο (vertical) και έχει ενσωματωμένο ένα πολύ ωραίο 3D flip effect!Είναι
κρυφό φαίνεται ο τίτλος μόνο και όταν το κλικάρουμε τότε αναδύονται οι κατηγορίες του!!











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

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


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

<style>

div.nav{
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;

}

div.nav input{
    display: none;
}


div.nav label.mainlabel, div.nav div.menuflip{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; /* transition speed etc */
}


div.nav label.mainlabel{ /* menu anchor text style */
    width: 200px; /* width of anchor text */
    font: bold 20px Tahoma;
    position: relative;
    top: 0;
    display: block;
    padding-left: 34px; /* add left padding to make room for icon */
    cursor: pointer;
}

div.nav label.mainlabel:before{ /* menu anchor icon */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border:7px solid darkgreen;
    -webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
    box-shadow: inset 0 0 2px gray, 0 0 5px gray;
    border-radius: 30px;
}


div.nav div.menuflip{ /* DIV that flips over to reveal main menu */
    position: absolute;
    margin: 0;
    top: 0;
    padding: 4px;
    background: white;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    width: 200px;
    border: 1px solid gray;
    -webkit-box-shadow: 2px 2px 15px #B5B5B5;
    box-shadow: 2px 2px 15px #B5B5B5;
    border-radius: 10px;
    background: #eee;
}


div.nav div.menuflip h4{
    margin: 0;
    margin-bottom: 4px;
    font-size: 20px;
    padding: 4px 0 0 6px;
}


div.nav div.menuflip ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

div.nav div.menuflip ul li{
    border-bottom: 1px inset gray;
}

div.nav div.menuflip ul li:last-of-type{
    border-bottom: none;
}

div.nav div.menuflip ul li:hover{
    border-bottom-color: transparent;
}


div.nav div.menuflip ul li a{
    display: block;
    color: blue;
    text-decoration: none;
    padding: 6px;
    border-radius: 10px 0 10px;
    -webkit-transition: none;
    transition: none;
}


div.nav div.menuflip ul li a:hover{
    background: #515151;
    color: white;
}


div.nav div.menuflip label.close{ /* close button */
    position: absolute;
    right: 5px;
    top: 8px;
    padding-top: 1px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    color: white;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 5px gray;
    box-shadow: 0 0 5px gray;
    width: 20px;
    height: 20px;
    background: black;
    font-size: 18px;
}

div.nav input:checked ~ label.mainlabel{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

div.nav input:checked ~ div.menuflip{
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

</style>

<!--[if lte IE 9]>
    <style>
   
        div.nav div.menuflip{
            visibility: hidden;
        }
        div.nav input:checked ~ div.menuflip{
            visibility: visible;
        }
   
    </style>

<![endif]-->

<!--[if lte IE 8]>
    <style>
   
        div.nav label.mainlabel{
            padding-left: 0;
    }
   
        div.nav div.menuflip{
            displayz: none;
    }
   
    </style>


    <script>

    window.onload = function(){ // ie 8 menu compatibility code
        var mainlabel = document.getElementById('mainlabel_ie')
        var    menuflip = document.getElementById('menuflip_ie')
                menuflip.style.top = mainlabel.offsetHeight
                mainlabel.onmouseover = function(){
                    menuflip.style.visibility = 'visible'
                }
                menuflip.onclick = function(){
                    menuflip.style.visibility = 'hidden'
                }
    }

    </script>

<![endif]-->
<div class="nav">

<input type="checkbox" id="togglebox" />
<label for="togglebox" class="mainlabel" id="mainlabel_ie">Site Menu</label>

<div class="menuflip" id="menuflip_ie">
<h4>Site Navigation</h4>
<ul>
<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>
<li><a href="
ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li> 

</ul>
<label for="togglebox" class="close">x</label>
</div>

</div>

................................................................................................................................................................
ΑΛΛΑΓΕΣ 
ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!
ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! 
 Site Menu-----Site Navigation

 Αλλάζετε και τους δύο τίτλους με τους δικούς σας!
 Αποθήκευση και έτοιμοι!

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


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



 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog