Incredible Menu

by achudars

HTML

<div id="menu">
     
    <input type="checkbox" id="on-check" name="on-check" />
     
    <label id="on-button" for="on-check">
        <span><span class="ss-plus"><!-- Put plus icon here if not using symbol set --></span></span>
        <span><span class="ss-hyphen"><!-- Put minus icon here if not using symbol set --></span></span>
    </label>
     
    <input type="radio" id="info-home" name="radio-check" />
    <input type="radio" id="info-compass" name="radio-check" checked />
    <input type="radio" id="info-heart" name="radio-check" />
    <input type="radio" id="info-rss" name="radio-check" />
    <input type="radio" id="info-refresh" name="radio-check" />
    <input type="radio" id="info-star" name="radio-check" />
     
    <div id="menu-items">
        <div class="middle">
            <div class="top">
                <span class="bg-piece"> </span> 
                <label class="ss-home" for="info-home"><!-- Put home icon here if not using symbol set --></label>
                <span class="bg-piece"> </span> 
                <label class="ss-compass" for="info-compass"><!-- Put compass icon here if not using symbol set --></label>
                <span class="bg-piece"> </span> 
                <label class="ss-heart" for="info-heart"><!-- Put heart icon here if not using symbol set --></label> 
            </div>
            <div class="bottom">
                <span class="bg-piece"> </span> 
                <label class="ss-rss" for="info-rss"><!-- Put rss icon here if not using symbol set --></label> 
                <span class="bg-piece"> </span> 
                <label class="ss-refresh" for="info-refresh"><!-- Put refresh icon here if not using symbol set --></label> 
                <span class="bg-piece"> </span> 
                <label class="ss-star" for="info-star"><!-- Put icon here if not using symbol set --></label> 
            </div>
        </div>
         
    </div>
     
    <div class="info home-info">Lets go home</div>
   ...

CSS

/* Just for positioning the menu correctly */
#menu {
    position: relative;
    width: 230px;
    margin: 0px auto;
    top: 100px;
    left: 37px;
}
 
/* We're using overflow: hidden; so we need to create a fake shadow */
.faux-shadow {
    position: absolute;
    content:  " ";
    width: 150px;
    height: 150px;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
    border-radius: 300px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    z-index: -9999;
}
 
/* The button in the middle the user will press to activate the menu */
#on-button {
    border-radius: 100px;
    width: 150px;
    height: 150px;
    color: #fff;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    background-color: #313b3d;
    pointer-events: none;
    font-size: 5em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);
}
 
/* On hover */
#on-button:hover {
    box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);    
}
 
/* On click */
#on-button:active {
    box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.3);
}
 
/* The spans inside the on button will rotate */
#on-button > span {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;   
    -ms-backface-visibility: hidden;    
    -o-backface-visibility: hidden; 
    -webkit-transition: -webkit-transform 0.2s linear;
    -moz-transition: -moz-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    transition: transform 0.2s linear;
    display: block;
    width: 122px;
    height: 122px;
    background: #313b3d;
    border-radius: 120px;
    pointer-events:...