• Pour visiteur0

    CSS:

     

    .selectbar {

    z-index: 98;

    position: fixed;

    top: 25px;

    right: 5px;

    padding: 0px 0px 0px 0px;

    }

    .contenu_paonglet {

    text-align: left;

    background: url('URL DE L'IMAGE DE FOND DE TA MENUBAR');

    background-repeat: repeat;

    height: 25px;

    width: 100%;

    position: fixed;

    z-index: 999;

    top: 26px;

    left: 0px;

    margin-top: -26px;

    }

     

     

     

    Dans un module simple (html):

     

    <div class="selectbar">

    <script type="text/javascript">// <![CDATA[

    function change_paonglet(name)

                    {

                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';

                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';

                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';

                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';

                            anc_paonglet = name;

                    }

    // ]]></script>

    <div class="paonglets"><span id="paonglet_accueil" class="paonglet_1 paonglet" onclick="javascript:change_paonglet('accueil');"><img src="URL DE L'IMAGE MENUBAR PERSO" alt=""></span> <span id="paonglet_effectif" class="paonglet_0 paonglet" onclick="javascript:change_paonglet('effectif');"><img src="URL DE L'IMAGE MENUBAR EKLABLOG" alt=""></span></div>

    <div class="contenu_paonglets">

    <div id="contenu_paonglet_accueil" class="contenu_paonglet" style="display: block; ">

    <div style="position: absolute; margin-top: -3px;">

    <table>

    <tbody>

    <tr>

    <td id="menubar_section_appearance" class="menubar_section">

    <div style="height: auto; padding-top: 4px; padding-bottom: 4px; font-family: Arial,Helvetica, Bitstream Vera Sans ,sans-serif; font-size: 12px; font-weight: normal; font-style: normal; font-variant: normal; text-align: justify; line-height: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); color: #000000;"><img src="http://r26.imgfast.net/users/2614/20/22/11/smiles/298394148.gif" width="10" height="10" alt=""><strong>NOM DE TON PREMIER MENU</strong></div>

    <ul>

    <li onclick="PREMIER LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="SECOND LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="TROISIEME LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="QUATRIEME LIEN DU MENU">TITRE DU LIEN</li>

    </ul>

    </td>

    <td id="menubar_section_appearance" class="menubar_section">

    <div style="height: auto; padding-top: 4px; padding-bottom: 4px; font-family: Arial,Helvetica, Bitstream Vera Sans ,sans-serif; font-size: 12px; font-weight: normal; font-style: normal; font-variant: normal; text-align: justify; line-height: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); color: #000000;"><img src="http://r26.imgfast.net/users/2614/20/22/11/smiles/2586760613.gif" width="10" height="10" alt=""><strong>NOM DE TON SECOND MENU</strong></div>

    <ul>

    <li onclick="PREMIER LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="SECOND LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="TROISIEME LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="QUATRIEME LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="CINQUIEME LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="SIXIEME LIEN DU MENU">TITE DU LIEN</li>

    </ul>

    </td>

    <td id="menubar_section_appearance" class="menubar_section">

    <div style="height: auto; padding-top: 4px; padding-bottom: 4px; font-family: Arial,Helvetica, Bitstream Vera Sans ,sans-serif; font-size: 12px; font-weight: normal; font-style: normal; font-variant: normal; text-align: justify; line-height: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); color: #000000;"><img src="http://r26.imgfast.net/users/2614/20/22/11/smiles/2695842780.gif" width="10" height="10" alt=""><strong>NOM DE TON TROISIEME MENU</strong></div>

    <ul style="">

    <li onclick="PREMIER LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="SECOND LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="TROISIEME LIEN DU MENU">TITRE DU LIEN</li>

    <li onclick="QUATRIEME LIEN DU MENU">TITRE DU LIEN</li>

    </ul>

    </td>

    </tr>

    </tbody>

    </table>

    </div>

    </div>

    <div id="contenu_paonglet_effectif" class="contenu_paonglet2">&nbsp;</div>

    </div>

    <script type="text/javascript">// <![CDATA[

    var anc_paonglet = 'accueil';

                    change_paonglet(anc_paonglet);

    // ]]></script>

    </div>