Menu responsive

thirt05
Les bases HTML/CSS

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>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Menu Responsive</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div class="site-container">
<header class="header">
<a href="#" class="headericon" id="headericon"></a>
<a href="#" class="header__logo">Logo</a>
<nav class="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
<a href="#">Item 6</a>
<a href="#">Item 7</a>
<a href="#">Item 8</a>
<a href="#">Item 9</a>
</nav>
</header>
<div class="site-content">
<div class="container">
<h1 id="firstHeading" class="firstHeading" lang="en">Test Responsive Menu</h1>
<h2><span class="mw-headline" id="Plot">Plot</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Amazon_Women_in_the_Mood&action=edit&section=1" title="Edit section: Plot">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
<p><a href="/wiki/Amy_Wong" title="Amy Wong">Amy</a> has been receiving phone calls for a year, where the caller stammers and then hangs up. The calls are from <a href="/wiki/List_of_recurring_Futurama_characters#Kif_Kroker" title="List of recurring Futurama characters">Kif</a>, who is in love with Amy but is too nervous to speak. <a href="/wiki/ZappBrannigan" title="Zapp Brannigan">Zapp</a> realizes that Amy and <a href="/wiki/Leela(Futurama)" title="Leela (Futurama)">Leela</a> know each other, and asks the two of them to go on a <a href="/wiki/Dating" title="Dating">double date</a> with him and Kif. Leela agrees as a favor to Amy, and they go to a restaurant aboard a space liner.
</p><p>Kif uses Zapp's characteristically boorish pick-up lines, offending Amy. To prevent her and Leela from leaving, Kif sings <a href="/wiki/Karaoke" title="Karaoke">karaoke</a>. Amy is touched by this, but Zapp pushes Kif off the stage and <a href="/wiki/William_Shatner%27s_musical_career#After_The_Transformed_Man" title="William Shatner's musical career">sings to Leela</a>, 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.</p>
</div>
<div class="site-cache" id="site-cache">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

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;
}
.headericon {
position: relative;
display: block;
float: left;
width: 50px;
height: 66px;
cursor: pointer;
}
.headericon: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

Aucune réponse