Docstoc

menu

Document Sample
menu Powered By Docstoc
					     Le Menu



                                  de la gargote au ***




                                                                          1
Voir les attributs de la balise    Ecrire du code Html   Editer le HTML
Un menu très simple de très bon rapport qualité prix

 div#links {position: absolute;}
 div#links a {display: block;}
 div#links a:hover {;}

 <div id="links">
     <a href="http://www.meyerweb.com/"> Home </a>
     <a href="http://www.meyerweb.com/eric/css/"> Links</a>
 …
 </div>


   plus d'info : http://meyerweb.com/eric/css/edge/popups/demo.html



  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   2
les balises




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
                                         "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups</title>
<style type="text/css">
<!--
body {position: relative; background: black; margin: 0; padding: 0;}

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
  padding: 5px 10px; margin: 0 0 1px; border-width: 0;
  text-decoration: none; color: #FFC; background: #444;
  border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
  border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
  position: absolute; top: 180px; left: 0; width: 125px;
  padding: 5px; margin: 10px; z-index: 100;
  color: #AAA; background: black;
  font: 10px Verdana, sans-serif; text-align: center;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
  color: #BAA; background: #22232F;
  font: 13px Verdana, sans-serif; padding: 10px;
  border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height:
         28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>
</head>
<body>

<div id="links">
<a href="http://www.meyerweb.com/">Home<span> The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</span></a>
 Voir les attributs de la balise                                        Ecrire du code Html
<a href="http://www.meyerweb.com/eric/css/">Links<span> A collection of things which interest me, and might interest you</span></a>    Editer le HTML                                       4
<a href="http://www.w3.org/">Away<span> Who knows? Could be anywhere; you clicks the link and you takes your chances!</span></a>
Le top des gargotes : mais un gros avantage




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   5
   <FRAMESET COLS="155,*" FRAMEBORDER="NO">
       <FRAME SRC="menu.htm" NAME="MenuGauche" NORESIZE>
       <FRAME SRC="page.htm" NAME="PageDroite" NORESIZE>
   </FRAMESET>


   <noframes><body>
   </body></noframes>




Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   6
Les Frames : le menu


<ul>
            <li><a href="page.htm#mercure" target="PageDroite">Mercure</a></li>
…
            <li><a href="page.htm#pluton" target="PageDroite">Pluton</a></li>
</ul>




    Voir les attributs de la balise   Ecrire du code Html   Editer le HTML      7
La page




          <tr>
                      <td colspan="2" align="center"><br>
                      <a name="venus">V&eacute;nus</a></td>
          </tr>




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   8
Menu simple




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   9
le style
                                           ul { list-style-type: none;
                                           font: 14px Verdana, Arial, sans-serif;}

                                           li { margin-bottom: 5px;}

                                           .menu a {
                                           margin: 0 2px;
                                           width: 100px; height: 20px;
                                           display: block;
                                           text-align: center;
                                           border: 1px solid gray;
                                           text-decoration: none; color: #000;
                                           background: #fff;}

                                           .menu a:hover {
                                           background: #ccc;}

                                           .menu a:active {
                                           background: gray;}
  Voir les attributs de la balise   Ecrire du code Html         Editer le HTML       10
Remarque

 .menu a:hover {
   background: #ccc;}

 C'est la couleur de fond du lien qui change.

 Nous verrons que la couleur de l'élément liste peut changer
   et non celle du lien.
 Retenez bien cette nuance. Elle permettra de changer une
   partie de la page au survol d'une autre partie.




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   11
code
 <html><head>
  <title></title>
  <style type="text/css">
 ul {
        list-style-type: none;
        font: 14px Verdana, Arial, sans-serif;}

 li {
        margin-bottom: 5px;}

 .menu a {
      margin: 0 2px;
      width: 100px;
      height: 20px;
      display: block;
      text-align: center;
      border: 1px solid gray;
      text-decoration: none;
      color: #000;
      background: #fff;}

 .menu a:hover {
      background: #ccc;}

 .menu a:active {
      background: blue;}

  </style></head><body>
 <ul class="menu">
  <li><a href="">Accueil</a></li>
  <li><a href="">Jeux</a></li>
  <li><a href="">Photos</a></li>
  <li><a href="">Contact</a></li>
 </ul>
 </body> </html>


   Voir les attributs de la balise                Ecrire du code Html   Editer le HTML   12
Menu horizontal




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   13
Code

             ul#menu li {
                    float: left ;
                    text-align: center ;
            }

            ul#menu li a
            {
                    width: 130px ;
                    line-height: 25px ;
                    font-size: 1.2em ;
                    font-weight: bold ;
                    letter-spacing: 2px ;
                    color: indianred ;
                    display: block ;
                    text-decoration: none ;
                    border-right: 5px solid #dea ;
            }




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   14
Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   15
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape -
Etape n&deg;4&nbsp;: Le titre et le menu</title>
 <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-15">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Language" content="fr">

 <style type="text/css">
                     body
                     {
                                     margin: 10px 0 ;
                                     padding: 0 ;
                                     text-align: center ;
                                     font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
                                     background: indianred ;
                    }

                    div#conteneur
                    {
                                     width: 770px ;
                                     margin: 0 auto ;
                                     text-align: left ;
                                     border: 2px solid #ab4 ;
                                     background: #fff ;
                    }

                    h1#header
                    {
                                     height: 250px ;
                                     margin: 0 ;
                                     background: url(sable.jpg) no-repeat left top ;
                    }

                    h1#header a
                    {
                                     width: 40px ;
                                     height: 70px ;
                                     display: block ;
                                     background: url(Iceberg.gif) no-repeat ;
                                     position: relative ;
                                     left: 350px ;
                                     top: 15px ;
                    }

 Voir les attributs de la balise
             h1#header a span                                    Ecrire du code Html       Editer le HTML   16
                    {
                                     display: none ;
Les onglets



       <ul id="tabnav">
               <li><a href="#"class="active" >Cours</a></li>
               <li><a href="#" >TD</a></li>
               <li><a href="#">TP</a></li>
               <li><a href="#">Examens</a></li>
       </ul>




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   17
les onglets




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   18
le CSS
 #tabnav {
             height: 20px;
             margin: 0;
             padding-left: 10px;
             background: url(css-tabs.gif) repeat-x bottom;
       }

       #tabnav li {
         margin: 0;
         padding: 0;
         display: inline;
         list-style-type: none;
       }

       #tabnav a:link, #tabnav a:visited {
         float: left;
         background: #f3f3f3;
         line-height: 14px;
         padding: 2px 10px 2px 10px;
         margin-right: 4px;
         border: 1px solid #ccc;
         text-decoration: none;
         color: #666;
       }

       #tabnav a:link.active, #tabnav a:visited.active {
         border-bottom: 1px solid #fff;
         background: #fff;
         color: #000;
       }

       #tabnav a:hover {
         background: #fff;
       }




 Voir les attributs de la balise                              Ecrire du code Html   Editer le HTML   19
Les onglets

 Il faut bien comprendre que pour chaque feuille du site, il
     faudra modifier la feuille active.




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   20
Pur CSS

Extrait du livre de Meyer chapitre 6




Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   21
en CSS




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   22
Etape 1
 <div id="nav">
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/services/">Services</a>            erreur fréquente
  <ul>
   <li><a href="/services/strategy/">Strategy</a></li>
   <li><a href="/services/optimize/">Optimization</a></li>
  </ul>
 </li>
 <li><a href="/pubs/">Publications</a>
  <ul>
   <li><a href="/pubs/articles/">Articles</a></li>
   <li><a href="/pubs/tuts/">Tutorials</a></li>
  </ul>
 </li>
 <li><a href="/events/">Events</a></li>
  <li><a href="/contact/">Contact</a></li>
 </ul>
 </div>




  Voir les attributs de la balise   Ecrire du code Html          Editer le HTML   23
div#nav {
   float: left; width: 7em;
   background: #FDD;
}




Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   24
Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   25
Code complet
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Project 6</title>
 <style type="text/css">
 body {background: #EEE; color: #000;}
 h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
 #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
  border-left: 1px solid;}
 div#nav {float: left; width: 7em;
  background: #FDD;}
 </style>
 </head>
 <body>
 <h1>Le pont mirabeau</h1>

 <div id="nav">
 <ul>
 <li><a href="/">Home</a></li>

 <li><a href="/services/">Services</a>
  <ul>
   <li><a href="/services/strategy/">Strategy</a></li>
   <li><a href="/services/optimize/">Optimization</a></li>
  </ul>
 </li>
 <li><a href="/pubs/">Publications</a>

  <ul>
   <li><a href="/pubs/articles/">Articles</a></li>
   <li><a href="/pubs/tuts/">Tutorials</a></li>
  </ul>
 </li>
 <li><a href="/events/">Events</a></li>
  <li><a href="/contact/">Contact</a></li>

 </ul>
 </div>

 <div id="main">
 <p>
 Sous le pont Mirabeau coule la Seine
 Et nos amours
 Faut-il qu'il m'en souvienne
 La joie venait toujours après la peine
       Vienne la nuit sonne l'heure
  Voir les attributs de la balise
       Les jours s'en vont je demeure                            Ecrire du code Html   Editer le HTML   26
 Les mains dans les mains restons face à face
 Tandis que sous
Mode blocs

div#nav ul {margin: 0; padding: 0; width: 7em;}          div#nav ul {margin: 0; padding: 0; width: 7em;}
div#nav li {position: relative;}                         div#nav li {position: relative;}
div#nav ul ul {position: relative; top: 0; left: 1em;}   div#nav ul ul {position: relative; top: 0; left: 7em;}




   Voir les attributs de la balise      Ecrire du code Html                  Editer le HTML                  27
En position absolute

 div#nav ul {margin: 0; padding: 0; width: 7em;}
 div#nav li {position: relative;}
 div#nav ul ul {position: absolute; top: 0; left: 7em;}




                          On quitte le flux : on se calle sur le
                          li, décalé de sa largeur.




  Voir les attributs de la balise     Ecrire du code Html          Editer le HTML   28
vue




                                           Le chevauchement est normal




 Voir les attributs de la balise   Ecrire du code Html      Editer le HTML   29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project 6</title>
<style type="text/css">
body {background: #EEE; color: #000;
 behavior: url(csshover.htc);} /* WinIE behavior call */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
 border-left: 1px solid;}
div#nav {float: left; width: 7em;
 background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em;}
div#nav li {position: relative;}
div#nav ul ul {position: absolute; top: 0; left: 7em;}
</style>
</head>
<body>
<h1>Le pont mirabeau</h1>

<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services/">Services</a>
 <ul>
  <li><a href="/services/strategy/">Strategy</a></li>
  <li><a href="/services/optimize/">Optimization</a></li>
 </ul>
</li>
<li><a href="/pubs/">Publications</a>
 <ul>
  <li><a href="/pubs/articles/">Articles</a></li>
  <li><a href="/pubs/tuts/">Tutorials</a></li>
 </ul>
</li>
<li><a href="/events/">Events</a></li>
 <li><a href="/contact/">Contact</a></li>
</ul>
</div>

<div id="main">
<p>
Sous le pont Mirabeau coule la Seine
Et nos amours
Faut-il qu'il m'en souvienne
La joie venait toujours après la peine
 Voir les attributs de la balise
      Vienne la nuit sonne l'heure                              Ecrire du code Html   Editer le HTML   30
      Les jours s'en vont je demeure
Les mains dans les mains restons face à face
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a>
 <ul>
  <li><a href="/services/strategy/">Strategy</a></li>
  <li><a href="/services/optimize/">Optimization</a></li>
 </ul>
</li>
<li class="submenu"><a href="/pubs/">Publications</a>
 <ul>
  <li><a href="/pubs/articles/">Articles</a></li>
  <li><a href="/pubs/tuts/">Tutorials</a></li>
 </ul>
</li>
<li><a href="/events/">Events</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>




Voir les attributs de la balise   Ecrire du code Html       Editer le HTML   31
div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}
div#nav ul {margin: 0; padding: 0; width: 7em;}
div#nav li {position: relative; list-style: none; margin: 0;}
div#nav li:hover {background: #ccccff;}
div#nav li.submenu {}
div#nav li.submenu:hover {background-color: #cccccc;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
 text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}

div#nav ul ul {position: absolute; top: 0; left: 7em;
   display: none;}

div#nav li.submenu:hover ul
   {display:block;}



Voir les attributs de la balise   Ecrire du code Html     Editer le HTML   32
Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   33
Rendre invisible le tout
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Project 6</title>
 <style type="text/css">
 body {background: #EEE; color: #000;
  behavior: url(csshover.htc);} /* WinIE behavior call */
 h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
 #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
  border-left: 1px solid;}
 div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}
 div#nav ul {margin: 0; padding: 0; width: 7em;}
 div#nav li {position: relative; list-style: none; margin: 0;}
 div#nav li:hover {background: #ccccff;}
 div#nav li.submenu {}
 div#nav li.submenu:hover {background-color: #cccccc;}
 div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
 div#nav>ul a {width: auto;}
 div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
 div#nav li.submenu:hover ul
 {display:block;}
 </style>
 </head>
 <body>
 <h1>Le pont mirabeau</h1>

 <div id="nav">
 <ul>
 <li><a href="/">Home</a></li>
 <li class="submenu"><a href="/services/">Services</a>
  <ul>
   <li><a href="/services/strategy/">Strategy</a></li>
   <li><a href="/services/optimize/">Optimization</a></li>
  </ul>
 </li>
 <li class="submenu"><a href="/pubs/">Publications</a>
  <ul>
   <li><a href="/pubs/articles/">Articles</a></li>
   <li><a href="/pubs/tuts/">Tutorials</a></li>
  </ul>
 </li>
 <li><a href="/events/">Events</a></li>
 <li><a href="/contact/">Contact</a></li>
 </ul>
  Voir les attributs de la balise
 </div>                                                          Ecrire du code Html   Editer le HTML   34
 <div id="main">
Tester sous Explorer !

 div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC; }

 permettra de corriger un décalage.




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   35
Menu avec texte d'info / (diff de la sol avec span)




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   36
div#nav li.submenu1:hover ul {display:block; top: 0;}
div#nav li.submenu2:hover ul {display:block;top: -2em;}
div#nav li.submenu3:hover ul {display:block; top: -4em;}
div#nav li.submenu4:hover ul {display:block;top: -6em;}



<li class="submenu1"><a href="#">premier</a>
            <ul>Sous le pont Mirabeau coule la Seine … </ul>
</li>
<li class="submenu2"><a href="#">deuxieme</a>
            <ul>Les mains dans les mains restons … </ul>
</li>


Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   37
code
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Project 6</title>
 <style type="text/css">
 body {background: #EEE; color: #000;
  behavior: url(csshover.htc);} /* WinIE behavior call */
 h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
 #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;
  border-left: 1px solid;}
 div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;}
 div#nav ul {margin: 0; padding: 0; width: 7em;height: 1em; }
 div#nav li {position: relative; list-style: none; margin: 0;height: 2em;}
 div#nav li:hover {background: #ccccff;}
 div#nav li.submenu {}

 div#nav li.submenu:hover {background-color: #cccccc;}

 div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}

 div#nav>ul a {width: auto;}

 div#nav ul ul {position: absolute; left: 400px;
  display: none; width: 200px;}

 div#nav li.submenu1:hover ul
 {display:block; top: 0;}
 div#nav li.submenu2:hover ul
 {display:block;top: -2em;}
 div#nav li.submenu3:hover ul
 {display:block; top: -4em;}
 div#nav li.submenu4:hover ul
 {display:block;top: -6em;}
 </style>
 </head>
 <body>
 <h1>Le pont mirabeau</h1>

 <div id="nav">
 <ul>

 <li class="submenu1"><a href="#">premier</a>

  <ul>
          Sous le pont Mirabeau coule la Seine
  Voir les attributs de la balise
 Et nos amours                                                               Ecrire du code Html   Editer le HTML   38
 Faut-il qu'il m'en souvienne
 La joie venait toujours après la peine
En Javascript




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   39
La liste menu

 <dl id="menugauche">
    <dt onmouseover="javascript:montre();"><a
         href="http://www.ibisc.fr/%7Edupont">Menus</a></dt>
    <dt onmouseover="javascript:montre('smenu2');">Enseignement</dt>
         <dd id="smenu2">
                 <ul>
                         <li><a href="http:/">Tests</a></li>
                         <li><a href="http://dupont/">Divers</a></li>
                 </ul>
         </dd>

    <dt onmouseover="javascript:montre('smenu3');">Recherche</dt>
         <dd id="smenu3">
                 <ul>
                 </ul>
         </dd>
 </dl>


  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   40
Le code javascript

 <script type="text/javascript">
 <!--
 window.onload=montre;

 function montre(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
           if (document.getElementById('smenu'+i)){
                    document.getElementById('smenu'+i).style.display='none';
           }
    }
   if (d) {
           d.style.display='block';
    }                                     remarque importante
 }                                         : Si javascript est désactivé
                                          le menu sera visible.


  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML       41
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<title>Denis DUPONT</title>
<meta name='DESCRIPTION' content="page personelle de denis dupont, Denis Dupont, Denis DUPONT">
<meta name='KEYWORDS' content="forum, Miage Alternance, Cours Architecture, RISC, Denis Dupont, HTML">

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
 <meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="all" href="stylemenugauche.css">
<link rel="shortcut icon" href="http://www.ibisc.fr/%7Edupont/Images/icone.jpg">


 <script type="text/javascript">
<!--
 window.onload=montre;
function montre(id) {
 var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
 {document.getElementById('smenu'+i).style.display='none';
}
}
    if (d) {d.style.display='block';
}}
//-->
//cible var cible="";
//nb compris entre 0 et 9 pour choix des photos
var nb= Math.round(10*Math.random());
      // Espace entre 2 images
var espace = 1;
// Pas d'incrémentation (ne pas changer)
  var pas = 1;
// Rafraîchir les images toutes les (millisecondes)
var rafraichissement = 30;
 // Position de la barre
position_x = 905; position_y = 5;
 // Taille de l'image au repos (carré)
var largeur = 32;
// Taille de l'image au survol (carré)
var largeur_zoom = 180;           var chrono;
// Tableau des images
image = new Array();
lien = new Array();
for(i = 0; i < 8; i++)
{ image[i] = nb + ".jpg"; lien[i] = nb + ".jpg"; nb=nb+10; }
 Voir les attributs de la balise
taille = new Array();                                              Ecrire du code Html                   Editer le HTML   42
  for(i = 0; i < image.length; i++)
 {         taille[i] = largeur; }
Menu avec

 PHP et Mysql !




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   43
Menu crée avec php Mysql




 Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   44
menu.php

 <?
 echo " <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><style type="text/css"></style><link
       rel="stylesheet" type="text/css" media="all" href="menu.css"><title>beaujaulais</title></head><body>";

 $MySQL_host = "localhost";
 $MySQL_user = "root";
 $MySQL_passw = "123solei";
 $db="victor.dupont";
 $linkid=@mysql_connect("$MySQL_host","$MySQL_user","$MySQL_passw");

 echo "<dl id='menu'>\n";
 echo "<dt><a href='http://www.monsite.com/index.php'>Accueil</a></dt>\n";

 $requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom";
 $resmenu1=mysql_db_query($db,$requete1);

 while ($temp = mysql_fetch_row($resmenu1)) {
        $categorie=$temp[0];
        echo "<dt>".$temp[1]."</dt>\n";
        echo "<dd><ul>\n";
        $requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom";
        $resmenu2=mysql_db_query($db,$requete2);
        while ($temp2 = mysql_fetch_row($resmenu2)) {
                  echo "<li><a href='../".$temp2[3]."/".$temp2[2]."'>".$temp2[1]."</a></li>\n";
        }
        echo "</ul></dd>\n";
 }
 echo "</dl>";
 echo " </body></html>";
 ?>




  Voir les attributs de la balise                     Ecrire du code Html                               Editer le HTML             45
index.php
 <?

 echo "<link rel='stylesheet' href='menu.css'>\n";

 $MySQL_host = "localhost";
 $MySQL_user = "root";
 $MySQL_passw = "icimonpassword";
 $db="victor.dupont";
 $linkid=@mysql_connect("$MySQL_host","$MySQL_user","$MySQL_passw");

 echo "<dl id='menu'>\n";
 echo "<dt><a href='http://www.victor.dupont.free.fr/index.php'>Accueil</a></dt>\n";

 $requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom";
 $resmenu1=mysql_db_query($db,$requete1);

 while ($temp = mysql_fetch_row($resmenu1)) {
        $categorie=$temp[0];
        echo "<dt>".$temp[1]."</dt>\n";
        echo "<dd><ul>\n";
        $requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom";
        $resmenu2=mysql_db_query($db,$requete2);
        while ($temp2 = mysql_fetch_row($resmenu2)) {
                  echo "<li><a href='../".$temp2[3]."/".$temp2[2]."'>".$temp2[1]."</a></li>\n";
        }
        echo "</ul></dd>\n";
 }

 ?>




  Voir les attributs de la balise                       Ecrire du code Html                      Editer le HTML   46
sql
 #
 # Structure de la table `site_structure`
 #

 CREATE TABLE `site_structure` (
   `ID` int(10) NOT NULL default '0',
   `nom` varchar(40) NOT NULL default '',
   `fichier` varchar(40) NOT NULL default '',
   `repertoire` varchar(40) NOT NULL default '',
   `categorie_mere` int(10) NOT NULL default '0',
   PRIMARY KEY (`ID`)
 ) TYPE=MyISAM;

 #
 # Contenu de la table `site_structure`
 #

 INSERT INTO `site_structure` VALUES (21, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 62);
 INSERT INTO `site_structure` VALUES (22, 'Conversions multibases', 'calculatrice.php', 'mathematique', 65);
 INSERT INTO `site_structure` VALUES (23, 'Nombres premiers', 'nbrepremiers.php', 'mathematique', 65);
 INSERT INTO `site_structure` VALUES (24, 'Erreurs VBA', 'erreursvba.php', 'office', 64);
 INSERT INTO `site_structure` VALUES (25, 'Excel fonctions AN/FR', 'excelfonctionsanfr.php', 'office', 64);
 INSERT INTO `site_structure` VALUES (26, 'Raccourcis Office', 'raccourcisoff.php', 'office', 64);
 INSERT INTO `site_structure` VALUES (27, 'Erreurs STOP', 'erreursstop.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (28, 'Erreurs Windows XP', 'erreurswinxp.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (29, 'RunDLL', 'raccourcissysteme.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (30, 'Raccourcis Windows', 'raccourciswin.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (31, 'VxD', 'vxd.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (43, 'Longueurs', 'longueurs.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (44, 'Volumes', 'volumes.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (45, 'Masses', 'masses.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (48, 'Pressions', 'pressions.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (50, 'Vitesses', 'vitesses.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (51, 'Codes des langues', 'codes_langues.php', 'internet', 60);
 INSERT INTO `site_structure` VALUES (53, 'Codes ANSI', 'codesansi.php', 'informatique', 61);
 INSERT INTO `site_structure` VALUES (58, 'Surfaces', 'surfaces.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (62, 'Internet Webmasters', '-', 'mère', 0);
 INSERT INTO `site_structure` VALUES (63, 'Windows', '-', 'mère', 0);
 INSERT INTO `site_structure` VALUES (64, 'Office', '-', 'mère', 0);
 INSERT INTO `site_structure` VALUES (65, 'Mathématiques', '-', 'mère', 0);
 INSERT INTO `site_structure` VALUES (67, 'Conversions', '-', 'mère', 0);
 INSERT INTO `site_structure` VALUES (69, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 61);
 INSERT INTO `site_structure` VALUES (74, 'Erreurs Windows XP SP2', 'erreurssp2.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (75, 'Services', 'services.php', 'windows', 63);
 INSERT INTO `site_structure` VALUES (79, 'XHTML', 'xhtml.php', 'internetwebmasters', 62);
 INSERT INTO `site_structure` VALUES (80, 'Nombre d\'or', 'nombredor.php', 'mathematique', 65);
 INSERT INTO `site_structure` VALUES (83, 'Fichier .htaccess', 'htaccess.php', 'internetwebmasters', 62);
  Voir les attributs de la balise                                 Ecrire du code Html
 INSERT INTO `site_structure` VALUES (85, 'Processus Windows', 'processus.php', 'windows', 63);                   Editer le HTML   47
 INSERT INTO `site_structure` VALUES (90, 'Monnaies', 'conversionsmon.php', 'conversions', 67);
 INSERT INTO `site_structure` VALUES (95, 'Excel formules', 'excel_formules.php', 'office', 64);
Ajax

 le chargement dans la page de façon asynchrone
 facile le chargement des liens.




  Voir les attributs de la balise   Ecrire du code Html   Editer le HTML   48

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:1/29/2013
language:French
pages:48