Voilà mon problème, je tente depuis plusieurs jours de créer une ébauche de site web responsive.
Je suis débutant et après avoir lu de nombreux article et consulté des forums, je viens demander votre aide pour finaliser mon projet qui n’est pas encore en ligne.
J’ai réussi a faire disparaître le menu et à faire apparaître a la place une image d’un bouton hamburger.
Le problème je voudrais que lorsque l’on clique sur celui-ci, le menu apparaisse.
Pour mes essais j’ai mis un hover qui doit si j’ai bien compris être remplacé par « target ».
Je pense que pour résoudre ce problème, avec les pros de ce forum, ce ne sera pas bien compliqué.
Merci à vous.
Je suis débutant et après avoir lu de nombreux article et consulté des forums, je viens demander votre aide pour finaliser mon projet qui n’est pas encore en ligne.
J’ai réussi a faire disparaître le menu et à faire apparaître a la place une image d’un bouton hamburger.
Le problème je voudrais que lorsque l’on clique sur celui-ci, le menu apparaisse.
Pour mes essais j’ai mis un hover qui doit si j’ai bien compris être remplacé par « target ».
Je pense que pour résoudre ce problème, avec les pros de ce forum, ce ne sera pas bien compliqué.
*
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link href="index.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<title>XXXXXXXXXXX</title>
<meta name="description" content="" />
<style type="text/css">
/* 1. design responsive */
body{
width: 99%; /* Taille du conteneur (BODY => ma page) */
background-color:#dfdfdf; /* couleur du fond du conteneur (BODY => ma page) */
box-sizing: border-box;} /* ajuste les div avec marge et bordure comprise */
/* ---------------------------------------------------------------------- */
/* 2. Positionnement de ma banniere */
#banniere {width: 100%; height: 75px; float: left; background-color: blue ; } /* Mma div */
img#banniere { width: 70%; margin-left:22%;} /* Permet de center mon image de banniere */
/* ---------------------------------------------------------------------- */
/* montre la page du PC */
@media screen and (min-width: 625px)
{
.corps {width: 100%; height: 450px; float: left; background-color: #d6d3ce ; }
#menu {width: 20%; height: 450px; float: left; background-color: #b0aba2 ; }
}
/* ---------------------------------------------------------------------- */
/* montre la page de la tablette */
@media screen and (max-width: 625px)
{
.corps {width: 100%; height: 500px; float: left; background-color: red ; }
.menu {width: 0%; height: 500px; float: left; background-color: #b0aba2 ; }
#menu {width: 20%; min-height: 8%; max-height: 15%; float: left; background-color: yellow; background-image: url('../frame/images.png'); background-size: 100% auto; background-repeat: no-repeat; background-position: center;}
#menu-accordeon {display:none; }
}
#menu#menu-accordeon:hover {display:run-in; }
/* ---------------------------------------------------------------------- */
.footer {width: 100%; height: 50px; float: left; background-color: blue ; }
/* ---------------------------------------------------------------------- */
/* mon menu */
#menu-accordeon { /* modifie les liens niveaux 1 */
padding:0;
margin:0;
list-style:none;
text-align: center;
width: 180px;
}
#menu-accordeon ul { /* modifie les liens niveaux 2 */
padding:0;
margin:0;
list-style:none;
text-align: center;
}
#menu-accordeon li { /* modifie le design des liens */
background-color:#729EBF;
background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
border-radius: 6px;
margin-bottom:2px;
box-shadow: 3px 3px 3px #999;
border:solid 1px #333A40
}
#menu-accordeon li li { /* empiles les liens l'un sous l'autre */
max-height:0;
overflow: hidden;
transition: all .5s;
border-radius:0;
background: #444;
box-shadow: none;
border:none;
margin:0
}
#menu-accordeon a { /* modifie le design des liens niveaux 1 */
display:block;
text-decoration: none;
color: #fff;
padding: 8px 0;
font-family: verdana;
font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
font-size:1em
}
#menu-accordeon li:hover { /* modifie au survol le design des liens niveaux 1 */
background: #729EBF
}
#menu-accordeon li li:hover {
background: #999;
}
#menu-accordeon ul li:last-child {
border-radius: 0 0 6px 6px;
border:none;
}
#menu-accordeon li:hover li {
max-height: 15em;
}
/* fin de mon menu */
/* ---------------------------------------------------------------------- */
</style>
</head>
<body>
<div id="banniere">
<img id="banniere" src="../frame/Bruno.jpg" alt="Ma bannière" />
</div>
<div class="corps">
<div id="menu">
<ul id="menu-accordeon">
<li><a href="#">Lien 1</a>
<ul>
<li><a href="#">Lien 1.1</a></li>
<li><a href="#">Lien 1.2</a></li>
<li><a href="#">Lien 1.3</a></li>
<li><a href="#">Lien 1.4</a></li>
<li><a href="#">Lien 1.5</a></li>
</ul>
</li>
<li><a href="#">Lien 2</a>
<ul>
<li><a href="#">Lien 2.1</a></li>
<li><a href="#">Lien 2.2</a></li>
<li><a href="#">Lien 2.3</a></li>
<li><a href="#">Lien 2.4</a></li>
<li><a href="#">Lien 2.5</a></li>
</ul>
</li>
<li><a href="#">Lien 3</a>
<ul>
<li><a href="#">Lien 3.1</a></li>
<li><a href="#">Lien 3.2</a></li>
<li><a href="#">Lien 3.3</a></li>
<li><a href="#">Lien 3.4</a></li>
<li><a href="#">Lien 3.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">
<br />
<br />
<div id="bouton">
<form style="text-align: center;">
<input id="suiv" type="button" value="Cours Suivant" onclick="self.location.href='page1.php'"/>
</form>
</div>
<br />
<br />
</div>
</body>
</html>
Merci à vous.