Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Menu en HTML5 ⇒ & Menu vertical flottant en HTML5



La balise <menu> est apparue dans le langage HTML5.

Cette balise fait exactement ce que son nom suggère, c’est-à-dire définir un menu dans une page Web, mais elle n’est pour l’instant pas implémentée par les navigateurs actuels. Nous nous orienterons donc vers une solution alternative composée de code HTML et CSS.
Pour créer un menu vertical, nous utiliserons une liste à puces <ul>, légèrement modifiée par un style CSS.

 

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Menu vertical élémentaire</title>
    <style type="text/css">
    ul{
        list-style:none;
        
        }
    #vertical{float:right;
    width:200px;
    background-color:#999;
        }
    </style>
  </head>
  <body>
    <ul id="vertical">
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>
      <li><a href="#">Page 5</a></li>
    </ul>
    <p id="corps">Iam summus Pater architectus Deus hanc quam videmus mundanam
<br>domum, divinitatis templum augustissimum, archanae legibus sapientiae
<br>fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos
<br>aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes
<br>omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex
<br>esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret,
<br>magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6
<br>testantur) absolutis, de producendo homine postremo cogitavit. Verum nec
<br>erat in archetypis unde novam sobolem effingeret, nec in thesauris quod novo
<br>filio hereditarium largiretur, nec in subselliis totius orbis, ubi universi
<br>contemplator iste sederet.</p>
  </body>
</html>

 

Le style #vertical définit la largeur du menu à l’aide de la propriété width et le positionne comme flottant, sur la partie droite de la page, afin que le reste de la page puisse s’enrouler autour.Le deuxième style supprime la puce des balises <li> à l’aide de la propriété list-style-type.
 

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces