3D flip menu


Ένα πολύ όμορφο και βολικό menu για το blog και site σας.


Όταν κάνετε κλικ εμφανίζεται το αναπτυσσόμενο menu.

Αντιγράψτε τον παρακάτω κώδικα και αλλάξτε τα στοιχεια που είναι μαρκαρισμένα με τα δικά σας!

[DEMO]



CSS

<style>
/* foulscode.com */
body {  /* webkit adjacent sibling bug fix */
-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
from {padding:0;} 
to {padding:0;} 
}

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;
}
/* foulscode.com */
</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]-->

HTML

<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">TEXT MENU</a></li>
<li><a href="URL">TEXT MENU</a></li>
<li><a href="URL">TEXT MENU</a></li>
<li><a href="URL">TEXT MENU</a></li>
<li><a href="URL">TEXT MENU</a></li>
<li><a href="URL">TEXT MENU</a></li>
</ul>
<label for="togglebox" class="close">x</label>
</div>

</div>



Κατηγορίες:
Σχόλια