Accéder au contenu principal

COMMENT CREER UN MENU DYNAMIQUE

COMMENT CRÉER UN MENU DYNAMIQUE

AVEC SEULEMENT HTML ET CSS

Nous  allons voir comment créer un menu déroulant seulement avec du HTML et CSS sans JavaScript ou autre technologie supplémentaire. Nous irons progressivement depuis l’essentiels jusqu’au l’obtention d’un menu agréable et pratique.

Dispositif nécessaire : un éditeur de texte est suffisant, mais vous pourriez préférer un éditeur de code HTML et CSS avancé.

Principe :

·       Le menu est inséré comme une liste html en plusieurs niveaux  (nous utiliserons deux niveaux pour l’exemple);

·       On ajoute les balises de liens aux éléments de la liste ;

·       On masque le niveau inferieur avec le CSS

·       On fait apparaitre un bloc de sous-menu au passage de la souri

·       On améliore le positionnement des sous-menus

·       On améliore l’apparence du menu

Inserer les elements de menu

Nous utiliserons les balises ul et li. Voici un exemple de code

<div id="menu">

<ul>

  <li>apparence

<ul >

  <li>templates</li>

    </ul>

  </li>

  <li>contenu

<ul>

  <li>articles</li>

      <li>fichiers</li>

    </ul>

  </li>

  <li> </a>

<ul>

  <li>< systeme</li>

      <li>exportation ></li>

      <li> securit</li>

      <li>statistiques</li>

    </ul>

  </li>

</ul>

</div>

Insertions des liens

<div id="menu">

<ul>

  <li><a href="#">apparence</a>

<ul class="n1">

  <li><a href="#">templates</a></li>

    </ul>

  </li>

  <li><a href="#">contenu</a>

<ul class="n1">

  <li><a href="#">articles</a></li>

      <li><a href="#">fichiers</a></li>

    </ul>

  </li>

  <li><a href="technique">technique</a>

<ul class="n1">

  <li><a href="#">systeme</a></li>

      <li><a href="#">exportation</a></li>

      <li><a href="#">securite</a></li>

      <li><a href="#">statistiques</a></li>

    </ul>

  </li>

</ul>

</div>

Le code CSS

 

<style type="text/css">

<!--

 

#menu a {

              text-decoration: none;

}

#menu ul{

              width:80px;

              margin:0px;

              padding:0;

              list-style:none;

}

 

#menu ul ul{

              display:none;

              margin-left:80px;

              position:absolute;

}

#menu li:hover > ul{

              display:block;

}

 

-->

</style>

 

Le code HTML + CSS complet

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>menu dynamique pur html + css</title>

<style type="text/css">

<!--

 

#menu a {

              text-decoration: none; /*enleve le soulignement des lien*/

}

#menu ul{

              width:80px; /*largeur des ul*/

              margin:0px; /*pas de marge*/

              padding:0; /*pas d'espace a gauche*/

              list-style:none; /*pas de symble de liste*/

}

 

#menu ul ul{

              /*s'applique aux sous-menus*/

              display:none; /*on cache les sous-menu*/

              margin-left:80px; /*on decoule a droite de 80px*/

              position:absolute; /*...les menu haut restent statiques*/

}

#menu li:hover > ul{

              display:block; /*fait apparaitre les sous-menu onmouseover*/

}

-->

</style></head>

 

<body>

<div id="menu">

<ul>

  <li><a href="#">apparence</a>

<ul class="n1">

  <li><a href="#">templates</a></li>

    </ul>

  </li>

  <li><a href="#">contenu</a>

<ul class="n1">

  <li><a href="#">articles</a></li>

      <li><a href="#">fichiers</a></li>

    </ul>

  </li>

  <li><a href="technique">technique</a>

<ul class="n1">

  <li><a href="technique">systeme</a></li>

      <li><a href="technique">exportation</a></li>

      <li><a href="technique">securite</a></li>

      <li><a href="technique">statistiques</a></li>

    </ul>

  </li>

</ul>

</div>

</body>

</html>

 

A faire

Voici un exemple très simple pour comprendre le principe. Il reste alors de donner une apparence convenable au menu et ses éléments.

 

 


Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Gérer les requêtes USSD sur un MoDem avec les commandes AT

Introduction L'USSD (Universal Structured Service D) est un service des réseaux télécoms defini dans 3GPP TS 02.90 et dans 3GPP TS 23.090. Il permet à un terminal mobile d'effectuer des requetes ou une suite de requete à l'operateur. Il est courament utiliser pour consulter le solde. Dans ce tutoriel nous apprendrons à effectuer des requetes USSD depuis une connection serie avec une modem. Pré requis Pour utiliserons pour ce faire: un modem GSM (Huawei E1552) bien sur avec une carte SIM (AIRTEL Burkina) un ordinateur auquel sera connecte le modem un terminal (minicom) pour dialoger avec le modem depuis l'ordinateur perl, pour encoder et decoder les PDU Demarche Nous allons consulter le solde du compte de l'utilisateur. Pour l'opérateur courant il faut composer le code USSD *160#. connecter le modem Connectez le modem au port USB de l'ordinateur et retrouvez ses port series logiciels. Notre modem créé trois ports series (/dev/t...
1 commentaire
Lire la suite

Testing crossplane on Digital ocean

  Crossplane brings the management of external resources into kubernetes through kubernetes APIs. This can in some situations be an alternative to other IaC such as terraform.  In the example below, we will create a droplet on DO by applying a kubernetes manifest using kubectl. The exemple suppose the kubernetes cluster in which crossplane will be installed is already up. ```bash kubectl create namespace crossplane-system helm repo add crossplane-stable https://charts.crossplane.io/stable helm repo update # install crossplane helm install crossplane --namespace crossplane-system crossplane-stable/crossplane # install the upjet digital ocean provider cat << EOF | kubectl apply -f - apiVersion: pkg.crossplane.io/v1 kind: Provider metadata: name: provider-upjet-digitalocean spec: package: crossplane-contrib/provider-upjet-digitalocean:v0.3.0 EOF # create the upjet digital ocean provider secret kubectl apply -f - << EOF apiVersion: v1 kind: S...
Enregistrer un commentaire
Lire la suite

GIT

  Git is a version control system that is used to track changes to files and manage projects. It is a powerful tool that allows developers to collaborate on projects and manage the source code of their projects. Some common Git commands include: git init: This command is used to initialize a new Git repository. It creates a new directory and sets up the necessary configuration files and directories. git clone: This command is used to create a local copy of a remote repository. It allows a developer to download a copy of the repository and all its history to their local machine. git add: This command is used to add new or modified files to the staging area. The staging area is a temporary holding area where changes are stored before they are committed to the repository. git commit: This command is used to save changes to the repository. It creates a new snapshot of the project and adds it to the repository's history. git push: This command is used to send changes from the local repo...
Enregistrer un commentaire
Lire la suite