_Blank – Etape 10 – Navigation responsive

Source = www.w3schools.com

PrécédentSuivant

1Icônes

Afin de charger la bibliothèque d’icones de Font Awesome (version 4.7 = gratuit), le code <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> se place dans le <head> (ligne 24) du document HTML index-All.html avant l’insertion de la feuille de style monstyle.css à l’aide de Notepad++.

Cette feuille de style est « distante » – mise en lien depuis un serveur distant.
Les icônes ne sont visibles que si l’on est connecté au réseau internet.

Dans le <head>

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/monstyle.css">

2La navigation (le code HTML)

Dans Notepad++ > index-ALL.html > remplacer la ligne 40 le code suivant

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Modifier

<div class="topnav" id="myTopnav">
  <a href="#home">Accueil</a>
  <a href="#page01">Page 01</a>
  <a href="#page02">Page 02</a>
  <a href="#page03">Page 03</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

3La navigation (le style CSS)

Dans Notepad++ > monstyle.css >insérer à la ligne 1 le code suivant

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

La navigation (le style CSS – Ajouter le Media Queries)

Attention > la valeur de rupture donnée dans l’exemple de www.w3schools.com est ramenée ICI à 800px.

 /* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

4La navigation (le code HTML – Ajouter le script)

Dans Notepad++ > index-ALL.html > ajouter à la ligne 176 le code suivant
Ajout du javascript qui permettra à l’icone de faire basculer la navigation et apparaître les liens

<script>
function myFunction() {
 var x = document.getElementById("myTopnav");
 if (x.className === "topnav") {
 x.className += " responsive";
 } else {
 x.className = "topnav";
 }
}
</script>
</head>

5Observation

La navigation dans sa version bureau

6Observation

(Dans Firefox > Le menu « Hamburger » haut droit du navigateur > Développement web > Vue adaptive > Fixer la largeur à 800px)

7Le code de cette étape

HTML

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<div class="topnav" id="myTopnav">
		  <a href="#home">Accueil</a>
		  <a href="#page01">Page 01</a>
		  <a href="#page02">Page 02</a>
		  <a href="#page03">Page 03</a>
		  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		    <i class="fa fa-bars"></i>
		  </a>
		</div>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<div class="imgBandeau"></div>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><img src="images/imgDemo05.jpg" class="imgGauche" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p><img src="images/imgDemo05.jpg" class="imgDroit" />Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p class="imgCentre"><img src="images/imgDemo02.jpg" /></p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<!-- PROPOS SECONDAIRE -->
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li><a href="#">Lien possible vers une autre page</a></li>
		  <li><a href="#">Autre lien possible</a></li>
		  <li><a href="#">Relatif aux propos de la page</a></li>
		  <li><a href="#">Eventuellement vers un autre site</a></li>
		</ul>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<!-- PROPOS PRINCIPAL -->
		<h1>Consectetuer adipiscingelit</h1>
		<p><figure class="imgDroit"><img src="images/imgDemo03.jpg" /><figcaption><h1>Le titre de l'image</h1><p>La légende de l'image</p></figcaption></figure>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa<strong>strong</strong>. Cum sociis natoque penatibuset magnis dis parturient montes, nascetur ridiculusmus. Donec quam felis, ultricies nec, pellentesqueeu, pretium quis, sem. Nulla consequat massa quisenim. Donec pede justo, fringilla vel, aliquet nec,vulputate eget, arcu. In enim justo, rhoncus ut,imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede <a href="#">Ici un lien</a>mollis pretium. Integer tincidunt. Cras dapibus.Vivamus elementum semper nisi. Aenean vulputateeleifend tellus. Aenean leo ligula, porttitor eu,consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellusviverra nulla ut metus varius laoreet. Quisque rutrum.Aenean imperdiet. Etiam ultricies nisi vel augue.Curabitur ullamcorper ultricies nisi.</p>
		<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor.</blockquote>
		<h2>Aenean commodo ligula eget massa</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. <b>Aenean commodo ligula</b> eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<h3>Cum sociis natoque penatibus et magnis</h3>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<ul>
		  <li>Lorem ipsum dolor sit amet consectetuer.</li>
		  <li>Aenean commodo ligula eget dolor.</li>
		  <li>Aenean massa cum sociis natoque penatibus.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean commodo ligula eget dolor. Aenean massa.Cum sociis natoque penatibus et magnis dis parturientmontes, nascetur ridiculus mus. Donec quam felis,ultricies nec, pellentesque eu, pretium quis, sem.</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="twelve columns vert">
		<p>Ici Rappel de l'identité/Adresse/Tél. et navigation secondaire du site - lien vers une page contact/les mentons légales/politique de confidentialité/Cookies/Conditions Générales d'Utilisation/Conditions Générales de Vente.</p>
		</footer>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<!-- Script navigation responsive -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Efunction%20myFunction()%20%7B%0A%20%20var%20x%20%3D%20document.getElementById(%22myTopnav%22)%3B%0A%20%20if%20(x.className%20%3D%3D%3D%20%22topnav%22)%20%7B%0A%20%20%20%20x.className%20%2B%3D%20%22%20responsive%22%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20x.className%20%3D%20%22topnav%22%3B%0A%20%20%7D%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> 
<!-- /Script navigation responsive -->
</html>

CSS

monstyle.css

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

@media (min-width: 550px) {

.bureauGauche {
margin-left: 0;
}
.bureauDroit {
float: right;
}
/*.bureauDroit {
position: absolute;
right: 0;
}*/
.imgGauche {
float:  left;
margin-right: 4%;
}
.imgDroit {
float:  right;
margin-left: 4%;
}
.imgCentre {
text-align: center;
}
.imgBandeau {
width: 100%;
height: 400px;
background-image: url('../images/imgDemo01.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

}

 /* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

 

PrécédentSuivant
Article précédent_Blank – Etape 09
Article suivant_Blank – Etape 11 – Footer