relooker les menu déroulant,est-ce possible?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu relooker les menu déroulant,est-ce possible?

Message par tron°legacy le Lun 21 Fév 2011 - 21:53

Bonsoirs,
j'ai tester les menus à barres déroulente sur un forum test: http://exemple-exemple.actifforum.com/, je ne fais pas de la pub car c'est un forum test, il est vide.
Serait-il possible de changer le design du menu comme sur ce forum : http://www.alderia.biz/forum.htm?(regarder les menu sur le forumtest.)Mais comment?

Merci d'avance,

zak74(ou tron°legacy)

tron°legacy
***

Messages : 118
Inscrit(e) le : 16/02/2011

tron°legacy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: relooker les menu déroulant,est-ce possible?

Message par Invité le Mar 22 Fév 2011 - 10:14

Bonjour,

Vous auriez regardé le tutoriel que je vous ai donné jusqu'à la fin, vous auriez trouvé le menu horizontal caché auto-déroulant ... http://forum.forumactif.com/t186834-scripts-installation-menu-deroulant.

Il est tout de même difficile d'expliquer les choses mieux que dans le tuto...
Ouvrez votre bloc-note, ou notepad++, ou un traitement de texte. Faites 3 documents:
le script, le CSS et le menu. Copiez/collez les codes ci-dessous.

Document 1: le script, il ne faut pas y toucher.
Code:
<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';}
}
//-->
</script>

Document 2: la partie CSS gère le style des onglet et le contenu, j'ai personnalisé un peu le menu pour que les onglets soient arrondis en haut.
Code:
<style type="text/css" media="screen">
<!--
body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu dl {
    float: left;
    width: 150px;
}
#menu dt {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    color: #000000;
    text-align: center;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    margin: 0px;olid gray;
    margin: 0px;
}
#menu dt:hover{
    border-bottom: none!important;
}

#menu dd {
    display: none;
    border: 1px solid gray;
    border-top: none!important;}

#menu li {
    text-align: center;
    background: #ccc;
}

#menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    color: #000000;
    text-align: center;
    width: 150px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    margin: 0px;
}
#site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #000;
    background-color: #ccc;
    padding: 5px;
    border: 1px solid gray;
}
-->
</style>

Document 3: le menu en lui même. Il y a beaucoup de choses à compléter dans cette partie.
Code:
<div id="menu">
<dl>         
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="">Sous-Menu 1.1</a></li>
<li><a href="">Sous-Menu 1.2</a></li>
<li><a href="">Sous-Menu 1.3</a></li>
<li><a href="">Sous-Menu 1.4</a></li>
<li><a href="">Sous-Menu 1.5</a></li>
<li><a href="">Sous-Menu 1.6</a></li>

</ul>
</dd>
</dl>
   
   
<dl>   
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="">Sous-Menu 2.1</a></li>
<li><a href="">Sous-Menu 2.2</a></li>
<li><a href="">Sous-Menu 2.3</a></li>
<li><a href="">Sous-Menu 2.4</a></li>

</ul>
</dd>

</dl>

   
<dl>   
<dt onmouseover="javascript:montre('smenu3');">[color=orange]Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="">Sous-Menu 3.1</a></li>
<li><a href="">Sous-Menu 3.2</a></li>
<li><a href="">Sous-Menu 3.3</a></li>

<li><a href="">Sous-Menu 3.4</a></li>
<li><a href="">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>

   
<dl>   
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="">Sous-Menu 4.1</a></li>
<li><a href="">Sous-Menu 4.2</a></li>

<li><a href="">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
   

</div>

Je vous montre l'exemple avec le premier onglet, à vous de faire les autres, tout ce qui est en orange ou en bleu doit être modifié:
<dl>
<dt onmouseover="javascript:montre('smenu1');">Nom de l'onglet</dt>
<dd id="smenu1">
<ul>
<li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li>
<li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li>
<li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li>
<li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li>
<li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li>
</ul>
</dd>
</dl>

Pour ôter un onglet, on enlève:
Code:
<dl>         
<dt onmouseover="javascript:montre('smenu1');">Nom de l'onglet</dt>
<dd id="smenu1">
<ul>
<li><a href="http://adresse-de-la-page-1">nom de la page 1</a></li>
<li><a href="http://adresse-de-la-page-2">nom de la page 2</a></li>
<li><a href="http://adresse-de-la-page-3">nom de la page 3</a></li>
<li><a href="http://adresse-de-la-page-4">nom de la page 4</a></li>
<li><a href="http://adresse-de-la-page-5">nom de la page 5</a></li>
</ul>
</dd>
</dl>
Pour rajouter un onglet, on prend le même code et on le colle à la fin avant le </div>
Pour ôter un sous-menu on enlève:
Code:
<li><a href="">nom de la page</a></li>
Pour ajouter un sous-menu on prend le même code et on le colle avant le </ul>

Une fois toutes le modifications faites, réunissez vos 3 documents en un seul en les mettant dans l'ordre suivant: le script puis le CSS et enfin le menu. Copiez l'ensemble de ce document et rendez-vous sur votre forum dans Panneau d'admin' > Affichage > Templates.
Dans la rubrique Général cliquez sur Overall_header.
Cherchez ceci:
Code:
td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Collez votre code complet après le </table> , attention à ne rien supprimer! Enregistrez le template puis publiez-le. Essayez de l'installer sur votre forum test, et dites-nous les modifications que vous voulez apporter en plus.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: relooker les menu déroulant,est-ce possible?

Message par tron°legacy le Mar 22 Fév 2011 - 12:24

merci beaucoup!!! enfaite, c'était pas que je n'aivais pas lu le tuto jusqua la fin, je voulais comprendre comme sa marche, pour qu'ensuite, c'est moi qui change selon mes envies.

tron°legacy
***

Messages : 118
Inscrit(e) le : 16/02/2011

tron°legacy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum