1448 sujets

Web Mobile et responsive web design

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é.

*
<!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.
salut,

Un peu de java script il faut. Tiens voici le code que j'utilise:

Avant ton menu en html je met mon image dans une div avec une class ="menumobile"


<div class="MenuMobile">
	<img src="images/menu.png">
</div>


.menu est la div qui regroupe tout mon menu

 

$(document).ready(function () {

 //menu burger accueil:
		var drapeau=0;
		
		$('.MenuMobile').click(function(){
			if(drapeau==0){
				$('.menu').css({'display':'block'});
				drapeau=1;

			}else{
				$('.menu').css({'display':'none'});
				drapeau=0;
			}
		});


});


Et après tu customises à partir où apparaît ton menu selon le media query que tu as associé.
Modifié par mvc (21 Sep 2017 - 13:53)
@mvc : quitte à utiliser jQuery alors autant passer par la fonction .toggle() :
$('.MenuMobile').click(function(){
    $('.target').toggle();
)}

Modifié par Olivier C (24 Sep 2017 - 14:26)
Pour moi, avec mon faible niveaux, je ne comprend pas gand chose!!!, désolé de faire le boulet!