Médiaforma

Guide de survie – Menus

Print Friendly, PDF & Email

Un menu vertical élémentaire

Tester le code


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

Menu vertical graphique

Tester le code


<!DOCTYPE html>

<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu vertical graphique</title>
    <script>
      function clicMenu1()
      {
        alert('Menu 1 cliqué');
      }
      function clicMenu2()
      {
        alert('Menu 2 cliqué');
      }
      function clicMenu3()
      {
        alert('Menu 3 cliqué');
      }
    </script>
  
    <style>
    li
    {
        list-style:none;
        padding:2px;
        height:64px;
      -moz-transition: all 500ms linear;
      -webkit-transition: all 500ms linear;
      -o-transition: all 500ms linear;
      font-size: 40px;
      color: white;
    }
  
    li:hover
    {
      -moz-transform: translate(50px, 0);
      -webkit-transform: translate(50px, 0);
      -o-transform: translate(50px, 0);
      color:black;
    }

    span
    {
      position: relative;
      left: 80px;
      top: 5px;
      width: 200px;
    }
    </style>
  </head>

  <body>
    <ul id="menu">
      <li style="background: url('folder.png') no-repeat;" onclick="clicMenu1()">
        <span>Télécharger</span>
      </li>
 
      <li style="background: url('ie.png') no-repeat;" onclick="clicMenu2()">
        <span>Internet Explorer</span>
      </li>
 
      <li style="background: url('skype.png') no-repeat;" onclick="clicMenu3()">
        <span>Skype</span>
      </li>
    </ul>
  </body>
</html>

Un menu horizontal élémentaire avec display: inline-block

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal élémentaire</title>
    <style>
      ul#horizontal
      {
        list-style: none;
      }
      ul#horizontal li
      {
        display: inline-block;
        padding-right: 1em;
        padding-left: 1em;
      }
    </style>
  </head>
  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Menu horizontal avec border-radius

Exemple 1

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal avec border-radius</title>
    <style>
      ul#horizontal
      {
        list-style: none;
        font-size: 30px;
      }

      ul#horizontal li
      {
        display: inline;
        padding-right: 1em;
        padding-left: 1em;
      }

      ul#horizontal li a
      {
        text-decoration:none;
      }

      ul#horizontal li:hover
      {
        -moz-border-radius:0 20px 20px 20px;
        -webkit-border-radius: 0 20px 20px 20px;
        -khtml-border-radius: 0 20px 20px 20px;
        -ms-border-radius: 0 20px 20px 20px;
        background-image:url("fond.jpg");
      }
    </style>
  </head>

  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Exemple 2

Tester le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu horizontal amélioré</title>
    <style>
      ul#horizontal
      {
        list-style: none;
        font-size: 30px;
      }

      ul#horizontal li
      {
        display: inline;
        padding-right: 1em;
        padding-left: 1em;
        border: 1px solid white;
        -moz-transition: all 200ms linear;
        -webkit-transition: all 200ms linear;
        -khtml-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
      }

      ul#horizontal li a
      {
        text-decoration:none;
      }

      ul#horizontal li:hover
      {
        -moz-border-radius:0 20px 20px 20px;
        -webkit-border-radius: 0 20px 20px 20px;
        -khtml-border-radius: 0 20px 20px 20px;
        -ms-border-radius: 0 20px 20px 20px;
        border: 1px solid black;
        background-image:url("fond.jpg");
      }
    </style>
  </head>

  <body>
    <ul id="horizontal">
      <li><a href="page1.htm">Page 1</a></li>
      <li><a href="page2.htm">Page 2</a></li>
      <li><a href="page3.htm">Page 3</a></li>
      <li><a href="page4.htm">Page 4</a></li>
      <li><a href="page5.htm">Page 5</a></li>
    </ul>
  </body>
</html>

Un menu déroulant

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu déroulant</title>
    <style>
      #principal
      {
        background: #E0FCC8;
        width: 800px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
      }
      #principal li
      {
        list-style-type: none;
        float: left;
        width: 150px;
        border-style: dashed;
        border-width: 1px;
      }
      #principal li a:link, #principal li a:visited
      {
       display: block;
       background: #E0FCC8;
       margin: 0;
       padding: 5px 6px;
       text-decoration: none;
       color: black;
       height: 1%;
      }
      #principal li a:hover
      {
        background-color: #A5F95B;
      }
      #principal .secondaire
      {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 0;
      }
      #principal .secondaire li
      {
        float: none;
        border: 0;
      }
      #principal .secondaire li a:link, #principal .secondaire li a:visited
      {
        display: block;
        text-decoration: none;
      }
      #principal .secondaire li a:hover
      {
        background-color: #A5F95B;
      }
      #principal li:hover > .secondaire
      {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul id="principal">
      <li><a href="#">Page 1</a>
        <ul class="secondaire">
          <li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
          <li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
          <li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
        <ul class="secondaire">
          <li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
          <li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
          <li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 3</a>
        <ul class="secondaire">
          <li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
          <li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
          <li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Une menu déroulant avec effets

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Menu déroulant avec effets</title>
    <style>
      ul#principal
      {
        list-style: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -ms-border-radius: 10px;
        border: 1px solid black;
        width: 300px;
        height:30px;
        background: -moz-linear-gradient(top, #CCFEFD, #01FFFC);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFEFD), to(#01FFFC));
        font-size: 20px;
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;
      }

      ul#principal li
      {
        float: left;
        padding-right: 1em;
        padding-left: 1em;
        opacity: .2;
        -moz-transition: all .5s ease-in;
        -webkit-transition: all .5s ease-in;
        -o-transition: all .5s ease-in;
      }

      ul#principal li a
      {
        text-decoration: none;
      }

      #principal .secondaire
      {
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: -moz-linear-gradient(top, #FFC0C0, #FF8080);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFC0C0), to(#FF8080));
        -moz-box-shadow: 5px 5px 5px grey;
        -webkit-box-shadow: 5px 5px 5px grey;
        -khtml-box-shadow: 5px 5px 5px grey;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        -ms-border-radius: 10px;
        width: 220px;
      }

      #principal li:hover
      {
        opacity: 1;
      }

      #principal li:hover > .secondaire
      {
        display: block;
        position: absolute;
        top: 43px;
      }
    </style>

  </head>
  <body>
    <ul id="principal">
      <li><a href="#">Page 1</a>
        <ul class="secondaire">
          <li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
          <li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
          <li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a>
        <ul class="secondaire">
          <li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
          <li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
          <li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 3</a>
        <ul class="secondaire">
          <li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
          <li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
          <li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.