Zablokowane Nowoczesne i latwe menu w css

[blanken]

Autor: Phenax (Akshay Nair)
Demo:
Przed kliknieciem 

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

http://beproleague.pl/upload/pliki/menu1_55cd7d484d8f0.png[/img]
Po kliknieciu

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

http://beproleague.pl/upload/pliki/menu_55cd7d484eecc.png[/img]
 
<b>HTML</b>
  [quote]<input type='checkbox' id='mmeennuu'>
<label class='menu' for='mmeennuu'>
<div class='barry'>
    <span class='bar'></span>
    <span class='bar'></span>
    <span class='bar'></span>
    <span class='bar'></span>
</div>
    
<ul>
    <li><a id='home' href='#home'>BeProLeague.pl</a></li>
    <li><a id='about' href='#about'>Liga</a></li>
    <li><a id='contact' href='#contact'>Cs</a></li>
    <li><a id='link' href='#link'>GO</a></li>
</ul>
</label>
  [/quote] 
<p style=""><b>CSS</b>
<p style="">  [quote]$lred:#E57373;
$red:#F44336;
@mixin transition($in) {
    transition:$in;
    -webkit-transition:$in;
    -moz-transition:$in;
    -o-transition:$in;
    -ms-transition:$in;
}
body {
    margin:0;
    padding:0;
    background-color:#222;
}
* {
    font-family:Helvetica,sans-serif;
    color:#555;
}
#mmeennuu {
    display:none;
}
#mmeennuu:checked ~ .menu {
    width:500px;
    border-radius:5px;
    background-color:transparent;
    border:3px solid $red;
    height:85px;
    &>ul {
        display:block;
        opacity:1;
    }
    &>.barry {
        display:none;
    }
}
.menu {
    display:block;
    margin:30px auto;
    width:100px;
    height:100px;
    background-color:$red;
    border:3px solid transparent;
    border-radius:50%;
    overflow:hidden;
    cursor:pointer;
    @include transition(all 0.5s ease-in-out);
    div.barry {
        width:40px;
        margin:35px auto;

        .bar {
            display:block;
            width:100%;
            height:5px;
            margin-top:3px;
            border-radius:2px;
            background-color:#fff;
        }
    }
    ul {
        opacity:0;
        display:none;
        @include transition(all 0.5s ease-in-out);
        list-style-type:none;
        padding:0;
        width:500px;
        text-align:center;
        li {
            display:inline-block;
            a {
                text-decoration:none;
                display:inline-block;
                padding:15px 25px;
                color:$red;
                font-size:20px;
                @include transition(all 0.3s ease-in-out);
                border:3px solid transparent;
                border-radius:5px;
                &:hover {
                    border-color:$red;
                }
                
                &:target {
                    border-bottom-color:$red;
                }
            }
        }
    }
}
<p style="">  [/quote] Edytowane 14 Sierpnia 2015 przez Gość