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

Ajouter un dépôt dans linux

La méthode traditionnel consiste a éditer le fichier /etc/apt/sources.list . Mais il est possible avec la commande add-apt-repository, pour peu qu'elle soit installe dans votre système d'exploitation (eg Ubuntu, Linux Mint ...), de le faire plus facilement. voici la syntaxe: apt-add-repository 'deb uri distribution [component1] [component2] [...]'  ou apt-add-repository  ppa:
1 commentaire
Lire la suite