Javascript et Responsive par danielfugay - page 1

Merci pour cette réponse mais je crois que je suis totalement perdu. ^^" Je vous met mon code html, et ccs si vous y arrivez et/ou trouver des problèmes dites le moi svp. :'(

<head>
<meta name="author" content="Gabriel, Valentin"/>
<meta charset="utf-8"/>
<title> Site Darasv </title>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="Laptop.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)and (orientation: portrait) href="Tablet.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 425px)and (orientation: portrait)"" href="MobileL.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 375px)and (orientation: portrait)"" href="MobileM.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 320px)and (orientation: portrait)" href="MobileS.css" />
<link rel="stylesheet" href="police.css" type="text/css" charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<meta name="viewport" content="width=device-width, user-scaleble=no"/>

	<style> 
		body {
			background-image: url("backgroundblyat.jpg");
			background-size:cover;
				}
	</style>

</head>

	<!-- HAUT DE PAGE -->

			<!-- TITRE, MENU ET LOGO -->
			
<div id="boutonmenu">
<span style="font-size: 50px ; cursor:pointer"onclick="openNav()">&#9776;</span>
</div id="boutonmenu">		


<div id="mySidenav" class="sidenav">

  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  
	<a href="page1.html" target="cadre" class="titremenu titremenu1"> Accueil </a>
	<div class="trait trait1"> </div class="trait  trait1">
	<a href="page2.html" target="cadre" class="titremenu titremenu2"> Vidéo </a>
	<div class="trait trait2"> </div class="trait  trait2">
	<a href="page3.html" target="cadre" class="titremenu titremenu3"> Contact </a>
	<div class="trait trait3"> </div class="trait  trait3">
	<a href="page4.html" target="cadre" class="titremenu titremenu4 "> Achat </a>
</div id="mySidenav" class="sidenav">


<script src="menu.js">
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

	<div id="titre">
		Darasv
	</div id="titre">
				
	<!-- MILIEU DE PAGE -->
		
		</br>
		<div id="frame">
			<iframe src="page1.html" name="cadre"> </iframe> 
		</div id="frame">

	
<!-- BAS DE PAGE -->

	<div id="footerbas">
		<footer>
			<div ="footerbas">
				<strong> Copyright © Gabriel, Valentin </strong>
						</br>
						
			</div id="footerbas">
		</footer>
	</div id="footerbas">

</body>

@media screen and (min-width: 1024px){
	
		/* TITRE ET LOGO */

div#titre{
	color:white ;
	font-family:"plainblacknormal" , arial, sans-serif ;
	font-size:80;
	margin-left:1080px ;
	margin-top:-80px;
	position:fixed ;
}
		/* MENU */

.trait{
	width:2px ;
	height:50px ;
	background-color: white ;
	transform: rotate(20deg);
	position: fixed ;
	}
	
.trait1{ margin-left: 230px ; margin-top:px ; }
.trait2{ margin-left: 450px ; margin-top:0px ; }
.trait3{ margin-left: 700px ; margin-top: ; }	

.titremenu{
	font-size: 40 ;
	font-family : "aquilinetworegular" , arial, sans-serif ;
	color: white ;
	text-decoration: none ;
	vertical-align:middle;
	position : fixed; 	
}	

.titremenu1{margin-left:75px; margin-top:-30px ;}
.titremenu2{margin-left:300px; margin-top:-30px ;}
.titremenu3{margin-left:530px; margin-top:-30px ;}
.titremenu4{margin-left:780px; margin-top:-30px ;}

		/* MILIEU DE PAGE */
			
div#frame {
	width: 800px;
	height:800px ;
	margin-left :350px ;
	margin-top :300px ;
	
}			
	
		/* BAS DE PAGE */
		
div#footerbas{
	
	height: 65px ;
	background-image: 
	linear-gradient(
		to right,
			#fc471f , /* ROUGE */
			#d6d6d6 , /* GRIS */
			#56bdc8   /* BLEU */
		);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: Black;
    text-align: center;
	border-radius :10px 10px 0px 0px ;
	font-family: 'kingthings_foundationregular';
	font-size:20px ;
}
}

Mon css pour un affichage pc

		/* PORTRAIT */


@media screen and (max-width : 375px) and (orientation: portrait){

/* Titre  */

div#titre{
	color: white ;
	font-family:"plainblacknormal" , arial, sans-serif ;
	font-size:60;
	margin-left:170px ;
	margin-top:-62px ;
	position: fixed ;
}

		/* MILIEU DE PAGE */
			
div#frame{
	margin-left :25px ;
	margin-top :20px ;
	position: fixed ;
}			
	


/*  OUVERTURE Menu */


div#boutonmenu{
	color:white;
	margin-left:30px ;
	margin-top:50px ;
	display: flex ;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #bebebe;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
	}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: White;
}

.sidenav .closebtn span{
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav .closebtn span:last-child {
	margin-bottom: 0px;
	
	
}

			/* CONTENU MENU */

			
.titremenu {
	font-size: 80px ;
	font-family : "aquilinetworegular" , arial, sans-serif ;
	color: white ;
	text-decoration: none ;
	vertical-align:middle;
	float:left;
	margin-left: 60px;
	margin-top:0px ;
}

		/* BAS DE PAGE */
		
div#footerbas{
	
	height: 40px ;
	background-image: 
	linear-gradient(
		to right,
			#fc471f , /* ROUGE */
			#d6d6d6 , /* GRIS */
			#56bdc8   /* BLEU */
		);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: Black;
    text-align: center;
	border-radius :10px 10px 0px 0px ;
	font-family: Impact ;
	
}



}

Pour téléphone

function toggleNav() {
  document.getElementById("mySidenav").classList.toggle("toggled");
}

voilà. Merci d'avance

danielfugay

15 juillet 2018 à 22:41:28

Bonjour, Bonsoir

J'ai actuellement un léger problème, mon site à du javascript -le menu- (d'un truc que j'ai pompé sur internet) (je sais pas utilisé le javascript).

Lors du responsive j'aimerai désactivé le javascript pour afficher un menu latéral. Je vous met le Javascript mais j'aimerai le caché lorsque mon responsive est supérieur à 360 pixel.

<script>
 
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

Celousco

16 juillet 2018 à 8:24:46

Utilise les media queries (CSS) et joue avec le classList.toggle (JS) pour permettre de faire une interface responsive sans trop te compliquer la tâche.

18 juillet 2018 à 14:38:07

Celousco a écrit:

Mmhhh d'accord, Je sais pas comment utiliser les classList.toggle, Pourrais-je avoir un exemple de comment le mettre dans mon code.

18 juillet 2018 à 16:57:26

Côté CSS :

#mySidenav {
  width: 0;
}

#mySidenav.toggled {
  width: 250px;
}

Côté JS :

22 juillet 2018 à 17:36:30

Javascript et Responsive

Javascript et Responsive

Supprimer

Modérer

Signaler le message aux modérateurs