Menu Déroulant

Fondamental :

Cette activité ne s'adresse qu'aux élèves qui ont le plus de facilité. On utilise un fichier css qui permet de gérer les menus déroulants.

Méthode :

Tâches	Méthode
1	Télécharger et décompresser le dossier	html.zip [zip]
2	Ce site contient un exemple de page d'accueil que je vous ai programmé. Ne modifiez pas la feuille de style css.
3	Feuille de style css que vous pouvez télécharger à part et intégrer dans le dossier qui contient votre site. Ajouter dans l'en tête (<head> ) de votre site la ligne de commande suivante : <link rel="stylesheet" href="deroulant.css">	deroulant.css [css] index.html [html] loco_vapeur.png

Tâches

Méthode

Télécharger et décompresser le dossier

html.zip [zip]

Ce site contient un exemple de page d'accueil que je vous ai programmé. Ne modifiez pas la feuille de style css.

Feuille de style css que vous pouvez télécharger à part et intégrer dans le dossier qui contient votre site.
Ajouter dans l'en tête (<head> ) de votre site la ligne de commande suivante : <link rel="stylesheet" href="deroulant.css">

deroulant.css [css]

index.html [html]

loco_vapeur.png

Méthode : Menu déroulant

Permet de créer un menu déroulant.

<img src="loco_vapeur.png">permet de mettre une image en entête du menu déroulant. Ici j'ai mis la locomotive dont le fichier se trouve dans le dossier html
Remplacer dans la balise <a href> le # par l'URL du lien
Remplacer Menu 1... par le texte que vous souhaitez utiliser à la place

<nav>
  <ul>
    <li class="deroulant"><a href="#"><img src="loco_vapeur.png"></a>
      <ul class="sous">
        <li><a href="#">Menu 1_2</a></li>
        <li><a href="#">Menu 1_3</a></li>
        <li><a href="#">Menu 1_4</a></li>
      </ul>
    </li>
    </ul>
</nav>

<nav>
  <ul>
    <li class="deroulant"><a href="#"><img src="loco_vapeur.png"></a>
      <ul class="sous">
        <li><a href="#">Menu 1_2</a></li>
        <li><a href="#">Menu 1_3</a></li>
        <li><a href="#">Menu 1_4</a></li>
      </ul>
    </li>
    </ul>
</nav>

Méthode : Vidéo/image et texte

Le plus simple pour positionner la vidéo à coté du texte est de créer un tableau.
Pour changer la video, modifier la valeur de l'attribut src de la balise <iframe> (src="https://www.youtube.com/embed/s8VyirVnIx0") en indiquant l'URL de votre site ou de votre vidéo.
J'ai programmé le style video dans le fichier css pour qu'il soit décalé de 200px par rapport au top. (afin que ça ne touche pas le menu déroulant). Vous pouvez modifier cette valeur dans le fichier deroulant.css

<div class="video">
<table>
<tbody>
<tr>
<td>
<t>Depuis 1980, une équipe de passionnés tous bénévoles, fait circuler au départ de Puget-Théniers le "Train des Pignes" à vapeur. Ce train historique, formé d'une locomotive à vapeur et d'authentiques véhicules des XIXe et XXe siècles, permet de découvrir au rythme d'autrefois les vallées du Haut-Pays Niçois et de la Haute-Provence.
L'association GECP qui entreprend cette restauration compte 350 membres bénévoles dont plus d'une trentaine participent régulièrement à l'entretien et au fonctionnement de ce train historique. Une équipe où les plus expérimentés transmettent aux plus jeunes les savoir-faire des trains d'autrefois.Visite avec Jean-Michel DELFINO .
</td>
<td width="600px">
<iframe width="560" height="315" src="https://www.youtube.com/embed/s8VyirVnIx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</td>
</tr>
</table>
</t>
</div>

<div class="video">
<table>
<tbody>
<tr>
<td>
<t>Depuis 1980, une équipe de passionnés tous bénévoles, fait circuler au départ de Puget-Théniers le "Train des Pignes" à vapeur. Ce train historique, formé d'une locomotive à vapeur et d'authentiques véhicules des XIXe et XXe siècles, permet de découvrir au rythme d'autrefois les vallées du Haut-Pays Niçois et de la Haute-Provence.
L'association GECP qui entreprend cette restauration compte 350 membres bénévoles dont plus d'une trentaine participent régulièrement à l'entretien et au fonctionnement de ce train historique. Une équipe où les plus expérimentés transmettent aux plus jeunes les savoir-faire des trains d'autrefois.Visite avec Jean-Michel DELFINO .
</td>
<td width="600px">
<iframe width="560" height="315" src="https://www.youtube.com/embed/s8VyirVnIx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</td>
</tr>
</table>
</t>
</div>