Menu responsive

Default
,

Bonsoir à vous,

en fait, j'ai presque terminé de créer un menu responsive mais je suis bloqué pour afficher le menu au-dessus du contenu du site.

Voici mon code HTML :

<!doctype html>




Menu Responsive









Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9




Test Responsive Menu


Plot[edit]


Amy has been receiving phone calls for a year, where the caller stammers and then hangs up. The calls are from Kif, who is in love with Amy but is too nervous to speak. Zapp realizes that Amy and Leela know each other, and asks the two of them to go on a double date with him and Kif. Leela agrees as a favor to Amy, and they go to a restaurant aboard a space liner.

Kif uses Zapp's characteristically boorish pick-up lines, offending Amy. To prevent her and Leela from leaving, Kif sings karaoke. Amy is touched by this, but Zapp pushes Kif off the stage and sings to Leela, causing the passengers and crew of the ship to flee the restaurant in terror. Zapp crashes the ship into the planet Amazonia, where the Amazonians, a race of giant, muscular, tribal women, capture them.










Voici le code CSS :

html, body {
font-family: Roboto;
font-size: 16px;
line-height: 1.4;
height: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.container {
margin: 0 20px;
overflow: hidden;
}
.site-content {
padding-top: 66px;
}
.header {
position: fixed;
left: 0;
right: 0;
height: 66px;
line-height: 66px;
color: #FFF;
background-color: #2e7d32;
}
.header__logo {
font-weight: bold;
padding: 0 25px;
float: left;
}
.menu {
float: left;
}
.menu a {
padding: 0 10px;
}
.menu a:hover {
color: #c6ff00;
}

@media only screen and (max-width: 640px) {
.site-container {
height: 100%;
overflow: hidden;
}
.site-content {
position: absolute;
top: 66px;
right: 0;
left: 0;
bottom: 0;
padding-top: 0;
overflow-y: scroll;
background-color: #FFF;
}
.header {
position: static;
}
.header__icon {
position: relative;
display: block;
float: left;
width: 50px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 16px;
left: 15px;
-moz-box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
-webkit-box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
box-shadow: 0 10px 0 1px #FFF, 0 16px 0 1px #FFF, 0 22px 0 1px #FFF;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #276a2b;
width: 150px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-moz-transform: translateX(-150px);
-ms-transform: translateX(-150px);
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.menu a {
display: block;
height: 40px;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #2e7d32;
}
.with--sidebar .menu {
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.with--sidebar .site-cache {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
}

Et finalement, voici le code jQuery :

(function($){
$("#header__icon").click(function(e){
e.preventDefault();

$("body").toggleClass("with--sidebar");
});

$("#site-cache").click(function(e){
    $("body").removeClass("with--sidebar");
});

})(jQuery);

Merci pour votre aide.

Bonne soirée
Thierry