如何創建CSS滑動菜單？

Question

我試圖創建一個類似的漢堡包菜單：

參考：http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

然而，對於這裏的一些原因是我得到的：

這裏是我的CSS ：

/*= ICON BOXES 
--------------------------------------------------------*/ 

ul.icon-menu {margin-top:29px;} 
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;} 
li.icon-box.home {background: #e74c3c;} 
li.icon-box.aboutme {background: #1dd0ad;} 
li.icon-box.portfolio {background: #3498db;} 
li.icon-box.blog {background: #f1c40f;} 
li.icon-box.contact {background: #f39c12;} 
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);} 

.icon-box a {display: block;} 
i.fa { 
    position:absolute; 
    pointer-events:none; 
    color:white ; 
    margin:20px 0 0 20px 
} 


/*= TITLE BOXES 
--------------------------------------------------------*/ 
.icon-box.home h2 { 
    z-index: -999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    background: #E74C3C; 
    line-height: 120px; 
    width: 120px; 
    -webkit-transition: all .3s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
     border-left: 3px solid #a7382d; 

} 

.icon-box.home a:hover h2 { 
    opacity: 1; left: 120px; margin: 0; 
    text-align: center; 

} 

.icon-box.aboutme h2 { 
    z-index: -999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    background: #1dd0ad; 
    line-height: 120px; 
    width: 120px; 
    -webkit-transition: all .3s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
    border-left: 3px solid #0d866e; 
} 

.icon-box.aboutme a:hover h2 { 
    opacity: 1; left: 120px; margin: 0; 
    text-align: center; 

} 


.icon-box.portfolio h2 { 
    z-index: -999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    background: #3498db; 
    line-height: 120px; 
    width: 120px; 
    -webkit-transition: all .3s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
    border-left: 3px solid #2177b1; 
} 

.icon-box.portfolio a:hover h2 { 
    opacity: 1; left: 120px; margin: 0; 
    text-align: center; 

} 


.icon-box.blog h2 { 
    z-index: -999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    background: #f1c40f; 
    line-height: 120px; 
    width: 120px; 
    -webkit-transition: all .3s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
    border-left: 3px solid #b8960e; 
} 

.icon-box.blog a:hover h2 { 
    opacity: 1; left: 120px; margin: 0; 
    text-align: center; 

} 

.icon-box.contact h2 { 
    z-index: -999; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    background: #f39c12; 
    line-height: 120px; 
    width: 120px; 
    -webkit-transition: all .3s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
    border-left: 3px solid #bc780d; 
} 

.icon-box.contact a:hover h2 { 
    opacity: 1; left: 120px; margin: 0; 
    text-align: center; 

} 



/*= MENU ICONS 
--------------------------------------------------------*/ 


span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;} 
span.icon.home { background-position: 0px 0px;} 
span.icon.aboutme { background-position: -36px 0px;} 
span.icon.portfolio { background-position: -72px 0px;} 
span.icon.blog { background-position: -109px 0px;} 
span.icon.contact { background-position: -145px 0px;} 

.icon-box a { 
    padding: 120px; 
} 

.icon-menu i { 
     border-radius: 50%; 
     box-shadow: 0 0 0 50px transparent; 
    padding: 0.2em 0.25em; 
     background: rgba(255,255,255,0.1); 
     -webkit-transform: translate3d(0, 0, 0); 
     -moz-transform: translate3d(0, 0, 0); 
     -o-transform: translate3d(0, 0, 0); 
     -ms-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
     -webkit-transition: box-shadow .6s ease-in-out; 
     -moz-transition: box-shadow .6s ease-in-out; 
     -o-transition: box-shadow .6s ease-in-out; 
     -ms-transition: box-shadow .6s ease-in-out; 
     transition: box-shadow .6s ease-in-out; 
    } 

.icon-menu li:hover i, 
.icon-menu li:active i, 
.icon-menu li:focus i {  
     box-shadow: 0 0 0 0 rgba(255,255,255,0.2); 
     -webkit-transition: box-shadow .4s ease-in-out; 
     -moz-transition: box-shadow .4s ease-in-out; 
     -o-transition: box-shadow .4s ease-in-out; 
     -ms-transition: box-shadow .4s ease-in-out; 
     transition: box-shadow .4s ease-in-out; 
} 

這看起來不太好。我希望它完全像相同大小的鏈接漢堡包菜單。我該如何完善我的漢堡菜單？

的jsfiddle：https://jsfiddle.net/xfq0eLhu/1/

任何想法，我應該怎麼工作的呢？請幫忙！我卡住了！

Answer 1

試試這個

CSS

@font-face { 
    font-family: 'icomoon'; 
    src: url('../fonts/icomoon.eot'); 
    src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/icomoon.woff') format('woff'), 
     url('../fonts/icomoon.ttf') format('truetype'), 
     url('../fonts/icomoon.svg#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'icomoon'; 
     src: url('../fonts/icomoon.svg#icomoon') format('svg'); 
    }; 
} 

.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu { 
    font-family: 'icomoon'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

.icon-team:before { 
    content: "\e000"; 
} 

.icon-blog:before { 
    content: "\e001"; 
} 

.icon-home:before { 
    content: "\e002"; 
} 

.icon-portfolio:before { 
    content: "\e003"; 
} 

.icon-services:before { 
    content: "\e004"; 
} 

.icon-contact:before { 
    content: "\e005"; 
} 

.icon-menu:before { 
    content: "\f0c9"; 
} 

a, li { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 


/* Global CSS that are applied for all screen sizes */ 

.nav ul { 
    max-width: 1240px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-size: 1.5em; 
    font-weight: 300; 
} 

.nav li span { 
    display: block; 
} 

.nav a { 
    display: block; 
    color: rgba(249, 249, 249, .9); 
    text-decoration: none; 
    -webkit-transition: color .5s, background .5s, height .5s; 
    -moz-transition: color .5s, background .5s, height .5s; 
    -o-transition: color .5s, background .5s, height .5s; 
    -ms-transition: color .5s, background .5s, height .5s; 
    transition: color .5s, background .5s, height .5s; 
} 

.nav i{ 
    /* Make the font smoother for Chrome */ 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 

/* Remove the blue Webkit background when element is tapped */ 

a, button { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
} 

/* Hover effect for the whole navigation to make the hovered item stand out */ 

.no-touch .nav ul:hover a { 
    color: rgba(249, 249, 249, .5); 
} 

.no-touch .nav ul:hover a:hover { 
    color: rgba(249, 249, 249, 0.99); 
} 

/* Adding some background color to the different menu items */ 

.nav li:nth-child(6n+1) { 
    background: rgb(208, 101, 3); 
} 

.nav li:nth-child(6n+2) { 
    background: rgb(233, 147, 26); 
} 

.nav li:nth-child(6n+3) { 
    background: rgb(22, 145, 190); 
} 

.nav li:nth-child(6n+4) { 
    background: rgb(22, 107, 162); 
} 

.nav li:nth-child(6n+5) { 
    background: rgb(27, 54, 71); 
} 

.nav li:nth-child(6n+6) { 
    background: rgb(21, 40, 54); 
} 

/* For screen bigger than 800px */ 
@media (min-width: 50em) { 

    /* Transforms the list into a horizontal navigation */ 
    .nav li { 
     float: left; 
     width: 16.66666666666667%; 
     text-align: center; 
     -webkit-transition: border .5s; 
     -moz-transition: border .5s; 
     -o-transition: border .5s; 
     -ms-transition: border .5s; 
     transition: border .5s; 
    } 

    .nav a { 
     display: block; 
     width: auto; 
    } 

    /* hover, focused and active effects that add a little colored border to the different items */ 
    .no-touch .nav li:nth-child(6n+1) a:hover, 
    .no-touch .nav li:nth-child(6n+1) a:active, 
    .no-touch .nav li:nth-child(6n+1) a:focus { 
     border-bottom: 4px solid rgb(174, 78, 1); 
    } 

    .no-touch .nav li:nth-child(6n+2) a:hover, 
    .no-touch .nav li:nth-child(6n+2) a:active, 
    .no-touch .nav li:nth-child(6n+2) a:focus { 
     border-bottom: 4px solid rgb(191, 117, 20); 
    } 

    .no-touch .nav li:nth-child(6n+3) a:hover, 
    .no-touch .nav li:nth-child(6n+3) a:active, 
    .no-touch .nav li:nth-child(6n+3) a:focus { 
     border-bottom: 4px solid rgb(12, 110, 149); 
    } 

    .no-touch .nav li:nth-child(6n+4) a:hover, 
    .no-touch .nav li:nth-child(6n+4) a:active, 
    .no-touch .nav li:nth-child(6n+4) a:focus { 
     border-bottom: 4px solid rgb(10, 75, 117); 
    } 

    .no-touch .nav li:nth-child(6n+5) a:hover, 
    .no-touch .nav li:nth-child(6n+5) a:active, 
    .no-touch .nav li:nth-child(6n+5) a:focus { 
     border-bottom: 4px solid rgb(16, 34, 44); 
    } 

    .no-touch .nav li:nth-child(6n+6) a:hover, 
    .no-touch .nav li:nth-child(6n+6) a:active, 
    .no-touch .nav li:nth-child(6n+6) a:focus { 
     border-bottom: 4px solid rgb(9, 18, 25); 
    } 

    /* Placing the icon */ 

    .icon { 
     padding-top: 1.4em; 
    } 

    .icon + span { 
     margin-top: 2.1em; 
     -webkit-transition: margin .5s; 
     -moz-transition: margin .5s; 
     -o-transition: margin .5s; 
     -ms-transition: margin .5s; 
     transition: margin .5s; 
    } 

    /* Animating the height of the element*/ 
    .nav a { 
     height: 9em; 
    } 

    .no-touch .nav a:hover , 
    .nav a:active , 
    .nav a:focus { 
     height: 10em; 
    } 

    /* Making the text follow the height animation */ 
    .no-touch .nav a:hover .icon + span { 
     margin-top: 3.2em; 
     -webkit-transition: margin .5s; 
     -moz-transition: margin .5s; 
     -o-transition: margin .5s; 
     -ms-transition: margin .5s; 
     transition: margin .5s; 
    } 

    /* Positioning the icons and preparing for the animation*/ 
    .nav i { 
     position: relative; 
     display: inline-block; 
     margin: 0 auto; 
     padding: 0.4em; 
     border-radius: 50%; 
     font-size: 1.8em; 
     box-shadow: 0 0 0 30px transparent; 
     background: rgba(255,255,255,0.1); 
     -webkit-transform: translate3d(0, 0, 0); 
     -moz-transform: translate3d(0, 0, 0); 
     -o-transform: translate3d(0, 0, 0); 
     -ms-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
     -webkit-transition: box-shadow .6s ease-in-out; 
     -moz-transition: box-shadow .6s ease-in-out; 
     -o-transition: box-shadow .6s ease-in-out; 
     -ms-transition: box-shadow .6s ease-in-out; 
     transition: box-shadow .6s ease-in-out; 
    } 

    /* Animate the box-shadow to create the effect */ 
    .no-touch .nav a:hover i, 
    .no-touch .nav a:active i, 
    .no-touch .nav a:focus i {  
     box-shadow: 0 0 0 0 rgba(255,255,255,0.2); 
     -webkit-transition: box-shadow .4s ease-in-out; 
     -moz-transition: box-shadow .4s ease-in-out; 
     -o-transition: box-shadow .4s ease-in-out; 
     -ms-transition: box-shadow .4s ease-in-out; 
     transition: box-shadow .4s ease-in-out; 
    } 

} 

@media (min-width: 50em) and (max-width: 61.250em) { 

    /* Size and font adjustments to make it fit into the screen*/ 
    .nav ul { 
     font-size: 1.2em; 
    } 

} 

/* The "tablet" and "mobile" version */ 

@media (max-width: 49.938em) {  

    /* Instead of adding a border, we transition the background color */ 
    .no-touch .nav ul li:nth-child(6n+1) a:hover, 
    .no-touch .nav ul li:nth-child(6n+1) a:active, 
    .no-touch .nav ul li:nth-child(6n+1) a:focus { 
     background: rgb(227, 119, 20); 
    } 

    .no-touch .nav li:nth-child(6n+2) a:hover, 
    .no-touch .nav li:nth-child(6n+2) a:active, 
    .no-touch .nav li:nth-child(6n+2) a:focus { 
     background: rgb(245, 160, 41); 
    } 

    .no-touch .nav li:nth-child(6n+3) a:hover, 
    .no-touch .nav li:nth-child(6n+3) a:active, 
    .no-touch .nav li:nth-child(6n+3) a:focus { 
     background: rgb(44, 168, 219); 
    } 

    .no-touch .nav li:nth-child(6n+4) a:hover, 
    .no-touch .nav li:nth-child(6n+4) a:active, 
    .no-touch .nav li:nth-child(6n+4) a:focus { 
     background: rgb(31, 120, 176); 
    } 

    .no-touch .nav li:nth-child(6n+5) a:hover, 
    .no-touch .nav li:nth-child(6n+5) a:active, 
    .no-touch .nav li:nth-child(6n+5) a:focus { 
     background: rgb(39, 70, 90); 
    } 

    .no-touch .nav li:nth-child(6n+6) a:hover, 
    .no-touch .nav li:nth-child(6n+6) a:active, 
    .no-touch .nav li:nth-child(6n+6) a:focus { 
     background: rgb(32, 54, 68); 
    } 

    .nav ul li { 
     -webkit-transition: background 0.5s; 
     -moz-transition: background 0.5s; 
     -o-transition: background 0.5s; 
     -ms-transition: background 0.5s; 
     transition: background 0.5s; 
    } 

} 

/* CSS specific to the 2x3 columns version */ 
@media (min-width:32.5em) and (max-width: 49.938em) { 

    /* Creating the 2 column layout using floating elements once again */ 
    .nav li { 
     display: block; 
     float: left; 
     width: 50%; 
    } 

    /* Adding some padding to make the elements look nicer*/ 
    .nav a { 
     padding: 0.8em;  
    } 

    /* Displaying the icons on the left, and the text on the right side using inlin-block*/ 
    .nav li span, 
    .nav li span.icon { 
     display: inline-block; 
    } 

    .nav li span.icon { 
     width: 50%; 
    } 

    .nav li .icon + span { 
     font-size: 1em; 
    } 

    .icon + span { 
     position: relative; 
     top: -0.2em; 
    } 

    /* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */ 
    .nav li i { 
     display: inline-block; 
     padding: 8% 9%; 
     border: 4px solid transparent; 
     border-radius: 50%; 
     font-size: 1.5em; 
     background: rgba(255,255,255,0.1); 
     -webkit-transition: border .5s; 
     -moz-transition: border .5s; 
     -o-transition: border .5s; 
     -ms-transition: border .5s; 
     transition: border .5s; 
    } 

    /* Transition effect on the border color */ 
    .no-touch .nav li:hover i, 
    .no-touch .nav li:active i, 
    .no-touch .nav li:focus i { 
     border: 4px solid rgba(255,255,255,0.1); 
    } 

} 

/* Adapting the font size and width for smaller screns*/ 
@media (min-width: 32.5em) and (max-width: 38.688em) { 

    .nav li span.icon { 
     width: 50%; 
    } 

    .nav li .icon + span { 
     font-size: 0.9em; 
    } 
} 

/* Styling the toggle menu link and hiding it */ 
.nav .navtoogle{ 
    display: none; 
    width: 100%; 
    padding: 0.5em 0.5em 0.8em; 
    font-family: 'Lato',Calibri,Arial,sans-serif; 
    font-weight: normal; 
    text-align: left; 
    color: rgb(7, 16, 15); 
    font-size: 1.2em; 
    background: none; 
    border: none; 
    border-bottom: 4px solid rgb(221, 221, 221); 
    cursor: pointer; 
} 

.navtoogle i{ 
    z-index:-1; 
} 

.icon-menu { 
    position: relative; 
    top: 3px; 
    line-height: 0; 
    font-size: 1.6em; 
} 

@media (max-width: 32.438em) { 

    /* Unhiding the styled menu link */ 
    .nav .navtoogle{ 
     margin: 0; 
     display: block; 
    } 

    /* Animating the height of the navigation when the button is clicked */ 

    /* When JavaScript is disabled, we hide the menu */ 
    .no-js .nav ul { 
     max-height: 30em; 
     overflow: hidden; 
    } 

    /* When JavaScript is enabled, we hide the menu */ 
    .js .nav ul { 
     max-height: 0em; 
     overflow: hidden; 
    } 

    /* Displaying the menu when the user has clicked on the button*/ 
    .js .nav .active + ul {  
     max-height: 30em; 
     overflow: hidden; 
     -webkit-transition: max-height .4s; 
     -moz-transition: max-height .4s; 
     -o-transition: max-height .4s; 
     -ms-transition: max-height .4s; 
     transition: max-height .4s; 
    } 

    /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/ 

    .nav li span { 
     display: inline-block; 
     height: 100%; 
    } 

    .nav a { 
     padding: 0.5em;  
    } 

    .icon + span { 
     margin-left: 1em; 
     font-size: 0.8em; 
    } 

    /* Adding a left border of 8 px with a different color for each menu item*/ 
    .nav li:nth-child(6n+1) { 
     border-left: 8px solid rgb(174, 78, 1); 
    } 

    .nav li:nth-child(6n+2) { 
     border-left: 8px solid rgb(191, 117, 20); 
    } 

    .nav li:nth-child(6n+3) { 
     border-left: 8px solid rgb(13, 111, 150); 
    } 

    .nav li:nth-child(6n+4) { 
     border-left: 8px solid rgb(10, 75, 117); 
    } 

    .nav li:nth-child(6n+5) { 
     border-left: 8px solid rgb(16, 34, 44); 
    } 

    .nav li:nth-child(6n+6) { 
     border-left: 8px solid rgb(9, 18, 25); 
    } 

    /* make the nav bigger on touch screens */ 
    .touch .nav a { 
     padding: 0.8em; 
    } 
} 

/* General Demo Style */ 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 

@font-face { 
    font-family: 'codropsicons'; 
    src:url('../fonts/codropsicons/codropsicons.eot'); 
    src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/codropsicons/codropsicons.woff') format('woff'), 
     url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 
     url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
body, html { font-size: 15px; padding: 0; margin: 0;} 

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: " "; display: table; } 
.clearfix:after { clear: both; } 

body { 
    font-family: 'Lato', Calibri, Arial, sans-serif; 
    color: #89867e; 
    background: #f9f9f9; 
} 

a { 
    color: #333; 
    text-decoration: none; 
} 

a:hover { 
    color: #fff; 
} 

.main, 
.container > header { 
    width: 100%; 
    margin: 0 auto; 
    padding: 2em; 
} 

.main { 
    max-width: 82.667em; 
    min-height: 40em; 
} 

.container > header { 
    text-align: center; 
    font-size: 16px; 
    padding: 4em 2em 3em; 
    background: rgba(0,0,0,0.01); 
} 

.container > header h1 { 
    font-size: 2.625em; 
    line-height: 1.3; 
    margin: 0; 
    font-weight: 300; 
} 

.container > header span { 
    display: block; 
    font-size: 60%; 
    color: #ceccc6; 
    padding: 0 0 0.6em 0.1em; 
} 

/* Header Style */ 
.codrops-top { 
    background: #fff; 
    background: rgba(255, 255, 255, 0.4); 
    text-transform: uppercase; 
    position: relative; 
    width: 100%; 
    font-size: 0.7em; 
    line-height: 2.2; 
} 

.codrops-top a { 
    padding: 0 1em; 
    letter-spacing: 0.1em; 
    color: #888; 
    display: inline-block; 
} 

.codrops-top a:hover { 
    background: rgba(255,255,255,0.9); 
} 

.codrops-top span.right { 
    float: right; 
} 

.codrops-top span.right a { 
    float: left; 
    display: block; 
} 

.codrops-icon:before { 
    font-family: 'codropsicons'; 
    margin: 0 4px; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 
.codrops-icon-drop:before { 
    content: "\e001"; 
} 
.codrops-icon-prev:before { 
    content: "\e004"; 
} 
.codrops-icon-archive:before { 
    content: "\e002"; 
} 
.codrops-icon-next:before { 
    content: "\e000"; 
} 
.codrops-icon-about:before { 
    content: "\e003"; 
} 

@media screen and (max-width: 25em) { 
    .codrops-icon span { 
     display: none; 
    } 
    .container > header { 
     font-size: 75%; 
    } 
} 

demo

Answer 2

試試這個，它可以幫助你

<html> 
 
    <head> 
 
    <style> 
 
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); 
 
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300"); 
 
@font-face 
 
{ 
 
\t font-family: Museo500-Regular; 
 
\t src: url('../fonts/Museo500-Regular.otf'); 
 
} 
 

 

 
body {background: #f9f9f9; font-family: Museo500-Regular;} 
 

 
a{ text-decoration: none; } 
 
h2 { color: #fff; font-size: 22px; margin: 0 24px;} 
 

 

 
/*= ICON BOXES 
 
--------------------------------------------------------*/ 
 

 
ul.icon-menu {margin-top:29px;} 
 
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;} 
 
li.icon-box.home {background: #e74c3c;} 
 
li.icon-box.aboutme {background: #1dd0ad;} 
 
li.icon-box.portfolio {background: #3498db;} 
 
li.icon-box.blog {background: #f1c40f;} 
 
li.icon-box.contact {background: #f39c12;} 
 
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);} 
 

 
/*.icon-box a {display: block;}*/ 
 
i.fa { 
 
    position:absolute; 
 
    pointer-events:none; 
 
    color:white ; 
 
    margin:20px 0 0 20px; 
 
margin-top: 17px; 
 
    margin-left: -42px !important; 
 
} 
 

 
.fa { 
 
\t margin-left: -44px ; 
 
    margin-top: 15px ; 
 
} 
 

 

 
/*= TITLE BOXES 
 
--------------------------------------------------------*/ 
 
.icon-box.home h2 { 
 
\t z-index: -999; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t background: #E74C3C; 
 
\t line-height: 120px; 
 
\t width: 120px; 
 
\t -webkit-transition: all .3s; 
 
\t -moz-transition: all .5s; 
 
\t -ms-transition: all .5s; 
 
\t -o-transition: all .5s; 
 
\t transition: all .5s; 
 
\t \t border-left: 3px solid #a7382d; 
 
\t \t 
 
} 
 

 
.icon-box.home a:hover h2 { 
 
\t opacity: 1; left: 120px; margin: 0; 
 
\t text-align: center; 
 
\t 
 
} 
 

 
.icon-box.aboutme h2 { 
 
\t z-index: -999; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t background: #1dd0ad; 
 
\t line-height: 120px; 
 
\t width: 120px; 
 
\t -webkit-transition: all .3s; 
 
\t -moz-transition: all .5s; 
 
\t -ms-transition: all .5s; 
 
\t -o-transition: all .5s; 
 
\t transition: all .5s; 
 
    border-left: 3px solid #0d866e; 
 
} 
 

 
.icon-box.aboutme a:hover h2 { 
 
\t opacity: 1; left: 120px; margin: 0; 
 
\t text-align: center; 
 
\t 
 
} 
 

 

 
.icon-box.portfolio h2 { 
 
\t z-index: -999; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t background: #3498db; 
 
\t line-height: 120px; 
 
\t width: 120px; 
 
\t -webkit-transition: all .3s; 
 
\t -moz-transition: all .5s; 
 
\t -ms-transition: all .5s; 
 
\t -o-transition: all .5s; 
 
\t transition: all .5s; 
 
\t border-left: 3px solid #2177b1; 
 
} 
 

 
.icon-box.portfolio a:hover h2 { 
 
\t opacity: 1; left: 120px; margin: 0; 
 
\t text-align: center; 
 
\t 
 
} 
 

 

 
.icon-box.blog h2 { 
 
\t z-index: -999; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t background: #f1c40f; 
 
\t line-height: 120px; 
 
\t width: 120px; 
 
\t -webkit-transition: all .3s; 
 
\t -moz-transition: all .5s; 
 
\t -ms-transition: all .5s; 
 
\t -o-transition: all .5s; 
 
\t transition: all .5s; 
 
\t border-left: 3px solid #b8960e; 
 
} 
 

 
.icon-box.blog a:hover h2 { 
 
\t opacity: 1; left: 120px; margin: 0; 
 
\t text-align: center; 
 
\t 
 
} 
 

 
.icon-box.contact h2 { 
 
\t z-index: -999; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
\t background: #f39c12; 
 
\t line-height: 120px; 
 
\t width: 120px; 
 
\t -webkit-transition: all .3s; 
 
\t -moz-transition: all .5s; 
 
\t -ms-transition: all .5s; 
 
\t -o-transition: all .5s; 
 
\t transition: all .5s; 
 
\t border-left: 3px solid #bc780d; 
 
} 
 

 
.icon-box.contact a:hover h2 { 
 
\t opacity: 1; left: 120px; margin: 0; 
 
\t text-align: center; 
 
\t 
 
} 
 

 

 

 
/*= MENU ICONS 
 
--------------------------------------------------------*/ 
 

 

 
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;} 
 
span.icon.home { background-position: 0px 0px;} 
 
span.icon.aboutme { background-position: -36px 0px;} 
 
span.icon.portfolio { background-position: -72px 0px;} 
 
span.icon.blog { background-position: -109px 0px;} 
 
span.icon.contact { background-position: -145px 0px;} 
 

 
.icon-box a { 
 
    padding: 0 60px; 
 
} 
 
.icon-box:hover a { 
 
    padding: 120px; 
 
} 
 

 
.icon-menu i { 
 
\t \t border-radius: 50%; 
 
\t \t box-shadow: 0 0 0 50px transparent; 
 
    padding: 0.2em 0.25em; 
 
\t \t background: rgba(255,255,255,0.1); 
 
\t \t -webkit-transform: translate3d(0, 0, 0); 
 
\t \t -moz-transform: translate3d(0, 0, 0); 
 
\t \t -o-transform: translate3d(0, 0, 0); 
 
\t \t -ms-transform: translate3d(0, 0, 0); 
 
\t \t transform: translate3d(0, 0, 0); 
 
\t \t -webkit-transition: box-shadow .6s ease-in-out; 
 
\t \t -moz-transition: box-shadow .6s ease-in-out; 
 
\t \t -o-transition: box-shadow .6s ease-in-out; 
 
\t \t -ms-transition: box-shadow .6s ease-in-out; 
 
\t \t transition: box-shadow .6s ease-in-out; 
 
\t } 
 

 
.icon-menu li:hover i, 
 
.icon-menu li:active i, 
 
.icon-menu li:focus i { \t \t 
 
\t \t box-shadow: 0 0 0 0 rgba(255,255,255,0.2); 
 
\t \t -webkit-transition: box-shadow .4s ease-in-out; 
 
\t \t -moz-transition: box-shadow .4s ease-in-out; 
 
\t \t -o-transition: box-shadow .4s ease-in-out; 
 
\t \t -ms-transition: box-shadow .4s ease-in-out; 
 
\t \t transition: box-shadow .4s ease-in-out; 
 
} 
 

 

 
header{position: relative;} 
 

 
nav ul{ 
 
\t display: block; 
 
\t flex-wrap: wrap; 
 
\t /*max-width: 1080px; */ 
 
\t margin: 0 auto; \t \t 
 
    /* background: #999;*/ 
 
} 
 
nav ul, 
 
nav li{ 
 
\t flex: 1; \t 
 
} 
 
nav li:last-child{border-bottom: none;} 
 
nav a{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
\t display: block; 
 
\t font-size: 1.8rem; 
 
} 
 
nav a:hover{ 
 
\t /*background: #adacac;*/ 
 
\t color: #fff; 
 
} 
 
nav li{ 
 
\t position: relative; 
 
\t line-height: 50px; 
 
\t /*color: #fff;*/ 
 
\t text-align: center; 
 
} 
 
nav label { 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 20px; 
 
    transition: .4s; 
 
} 
 
nav input, 
 
nav label{ 
 
\t display: none; 
 
\t width: 36px; 
 
\t height: 36px; 
 
\t /*background: #555; */ 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t line-height: 36px; 
 
\t font-size: 1.6rem; 
 
\t border-radius: 4px; 
 
} 
 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;} 
 
nav label:hover{cursor:pointer;} 
 
nav label:before{ 
 
\t font-family: FontAwesome; 
 
\t font-size: 24px; 
 
\t content: "\f0c9"; 
 
\t text-align: center; 
 
} 
 

 
.nav .navtoogle { 
 
    display: none; 
 
    width: 100%; 
 
    padding: 0.5em 0.5em 0.8em; 
 
    font-family: 'Lato',Calibri,Arial,sans-serif; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    color: rgb(7, 16, 15); 
 
    font-size: 1.2em; 
 
    background: none; 
 
    border: none; 
 
    border-bottom: 4px solid rgb(221, 221, 221); 
 
    cursor: pointer; 
 
} 
 

 
@media (max-width: 32.438em) 
 
.nav .navtoogle { 
 
    margin: 0; 
 
    display: block; 
 
} 
 

 
@media only screen and (max-width: 480px){ 
 
\t nav ul{ 
 
\t \t transform: translateY(0); 
 
\t \t box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
     transition: all .5s; 
 
\t display: block; 
 
    padding-top: 56px; 
 
\t } 
 
\t nav li{ 
 
\t \t flex: none; 
 
\t \t width: 100%; 
 
\t \t border-bottom: solid 1px #777; 
 
\t } 
 
\t nav input[type="checkbox"]:checked + ul{ 
 
\t \t transform: translateY(-150%); 
 
\t \t width: 100%; 
 
\t \t background: #999; 
 
     transition: all .5s; 
 
\t } 
 
\t nav label{display: block;} 
 
\t nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
\t \t background: #777; 
 
\t \t color: #fff; 
 
\t } 
 
} 
 

 
/***************** FONTS ********************/ 
 
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); 
 
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300"); 
 
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;} 
 
body{font-size: 1.6rem; min-height: 100vh;} 
 
header{position: relative;} 
 
main{padding: 2rem;} 
 

 
/***************** NAVIGATION ********************/ 
 
nav li:last-child{border-bottom: none;} 
 
nav input, 
 
nav label{ 
 
\t display: none; 
 
\t width: 36px; 
 
\t height: 36px; 
 
\t background: #555; 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t line-height: 36px; 
 
\t font-size: 1.6rem; 
 
\t border-radius: 4px; 
 
} 
 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;} 
 
nav label:hover{cursor:pointer;} 
 
nav label:before{ 
 
\t font-family: FontAwesome; 
 
\t font-size: 24px; 
 
\t content: "\f0c9"; 
 
\t text-align: center; 
 
} 
 

 
.mobile { 
 
\t  display: none; 
 
} 
 

 

 
/*************** MEDIA QUERIES *******************/ 
 
@media only screen and (max-width: 480px){ 
 

 
\t ul.icon-menu 
 
\t {  margin-top: 15% !IMPORTANT; } 
 
\t 
 
\t nav li {text-align: left !IMPORTANT;} 
 
li.icon-box 
 
{ 
 
\t width: 75% !Important; 
 
\t height: 40px !Important; margin-left:10%; 
 
\t 
 
} 
 
li.icon-box .fa { margin-left:20px !important; 
 
    margin-top: 5px !important;} 
 

 
.mobile { 
 
\t  display: inline; 
 
\t padding : 0px; 
 
    margin-top: -6px; 
 
    font-size: 20px; 
 
    font-style: normal; 
 
\t  color: #fff; 
 
    font-weight: 200; 
 
\t line-height: 32px; 
 
} 
 

 
li.icon-box { 
 
\t margin-bottom: 0px !important; 
 
\t  border: none; 
 
} 
 
\t 
 
\t .fa-4x { 
 
    font-size: 1.3em !IMPORTANT; 
 
} 
 

 
.icon-box a:hover h2.nomobile { 
 
display: none !IMPORTANT; \t 
 
} 
 

 
.icon-box a:hover h2.mobile { 
 
display: block !IMPORTANT; \t 
 
} 
 
\t nav ul{ 
 
\t \t transform: translateY(0); 
 
\t \t box-shadow: none !IMPORTANT; 
 
     transition: all .5s; 
 
\t } 
 
\t nav li{ 
 
\t \t flex: none; 
 
\t \t line-height:40px !IMPORTANT; 
 
\t \t width: 100%; 
 
\t \t border-bottom: solid 1px #777; 
 
\t } 
 

 
\t nav input[type="checkbox"]:checked + ul{ 
 
\t \t 
 
\t \t width: 100%; 
 
\t \t background: #999; 
 
     transition: all .5s; 
 
\t } 
 
\t nav label{display: block;  color: #000 !IMPORTANT; margin-left: 5%; 
 
    background: transparent;  margin-top: 15%;} 
 
\t nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
\t \t background: #777; 
 
\t \t color: #fff; 
 
\t } 
 
} 
 
    </style> 
 

 
    </head> 
 
    <body> 
 

 
\t <div class="container"> 
 
    <nav> 
 
     <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu"> 
 
     <ul class="main icon-menu"> 
 
\t \t \t <li class="icon-box home"> 
 
\t \t \t \t <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Home</h1></a> 
 
\t \t \t \t <a href="#"> 
 
\t \t \t \t  <h2 class="nomobile">Home</h2> 
 
\t \t \t \t \t 
 
\t \t \t \t </a> 
 
\t \t \t </li> \t 
 
\t \t \t 
 
\t \t \t <li class="icon-box aboutme"> 
 
\t \t \t \t <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">About Me</h1></a> 
 
\t \t \t \t  <a href="#"> 
 
\t \t \t \t  <h2 class="nomobile">About Me</h2> 
 
\t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <li class="icon-box portfolio"> 
 
     <i class="fa fa-home fa-4x"></i> <a href="#" class="mobile"><h1 class="mobile">Portfolio</h1></a> 
 
\t \t \t \t  <a href="#"> 
 
\t \t \t \t   <h2 class="nomobile">Portfolio</h2> 
 
\t \t \t \t  </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t  <li class="icon-box blog"> 
 
      <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Blog</h1></a> 
 
\t \t \t   <a href="#"> 
 
\t \t \t \t   <h2 class="nomobile">Blog</h2> 
 
\t \t \t \t  </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t  <li class="icon-box contact"> 
 
      <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">Contact</h1></a> 
 
\t \t \t   <a href="#"> 
 
\t \t \t \t \t \t <h2 class="nomobile">Contact</h2> 
 
\t \t \t \t  </a> 
 
\t \t \t \t </li> 
 

 
\t \t \t \t 
 
     </ul> 
 
     <label for="css-toggle-menu" id="css-toggle-menu"></label> 
 
    </nav> 
 
</div> 
 
\t 
 
    </body> 
 
</html>