Menu déroulant par hover ou click [phpBB2]
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Ce tutoriel a été publié par Final-Blond sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.


Avé à tous !

Tout d'abord, pour ce tutoriel, vous devez être AF (Admin Fondateur).
Nous irons dans le template "overall-header".
Nous utiliserons du JS, du HTML et du CSS.

Voici un tuto souvent demandé d'après ce que j'ai pu constater ailleurs et ici.
Il va vous permettre d'installer une barre de menus un peu de ce genre (uniquement dans le fonctionnement), qui par le hover (ou le click) sur l'un d'eux, propose une liste de sous-menus.
Les paramètres, intitulés et l'emplacement ne sont là qu'à titre d'exemple, à vous de réaliser cette barre à votre sauce.

Go to PA > Modules > Gestion des codes Javascript
Donner un titre, ex : mymenu
Cocher : "Sur toutes les pages" (pour une barre de menu)
Copier-coller :
Code:
function montre(id)
{
var d = document.getElementById(id);
d.style.display='block';
}
function cache()
{
document.getElementById('smenu1').style.display='none';
document.getElementById('smenu2').style.display='none';
document.getElementById('smenu3').style.display='none';
document.getElementById('smenu4').style.display='none';
document.getElementById('smenu5').style.display='none';
document.getElementById('smenu6').style.display='none';
}
Valider
Dans mon exemple, la barre contient 6 menus, mais vous pouvez en ajouter ou en ôter, l'essentiel étant de bien les faire coordonner avec leur rappel en HTML.

Ensuite, dans PA > Affichage > Templates > Général > overall-header
Rappel du js avant la balise < /head> (laisser quelques lignes avec ce qui précède)
Copier-coller l'url de la page js, ex :
Code:
<script type="text/javascript" src="http://url_page_javascript.js"></script>

Toujours dans le même template, chercher (Ctrl+F) la variable :
Code:
{GENERATED_NAV_BAR}
Juste à la place de cette variable, avant la balise < /td>, installer le HTML (en allant à ligne afin de le retrouver facilement pour les modifs) :
Code:
<table  border="0" cellpadding="0" cellspacing="0" align="center">
<tbody><tr>
<td align="center"> <div id="menu">

<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:cache()">
<dt>Accueil</dt>
<dd id="smenu1">
<ul>
<li><a href="http://url-votre-forum.com/index.htm">Forum</a></li>
<li><a href="http://url-votre-forum.com/welcome-h11.htm" target="_blank">Accueil</a></li>
<li><a href="http://http://url-votre-forum.com/faq.htm" target="_blank">FAQ</a></li>
<li><a href="http://url-votre-forum.com/search.forum">Search</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache()">         
<dt>Membres</dt>
<dd id="smenu2">
<ul>
<li><a href="http://url-votre-forum.com/memberlist.forum" target="_blank">Membres</a></li>
<li><a href="http://url-votre-forum.com/groupcp.forum" target="_blank">Groupes</a></li>
</ul>
</dd>
</dl>
   
<dl onmouseover="javascript:montre('smenu3');" onmouseout="javascript:cache()">   
<dt>Profil</dt>
<dd id="smenu3">
<ul>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile">Infos</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile&page_profil=preferences" target="_blank">Preferences</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=editprofile&page_profil=avatars" target="_blank">Avatar</a></li>
<li><a href="http://url-votre-forum.com/search.forum?search_id=watchsearch">Watch sujets</a></li>
<li><a href="http://url-votre-forum.com/search.forum?search_id=egosearch">My Posts</a></li>
</ul>
</dd>
 
</dl>
    
<dl onmouseover="javascript:montre('smenu4');" onmouseout="javascript:cache()">   
<dt>Messagerie</dt>
<dd id="smenu4">
<ul>
<li><a href="http://url-votre-forum.com/msg.forum?folder=inbox" target="_blank">In Box</a></li>
<li><a href="http://url-votre-forum.com/msg.forum?folder=sentbox" target="_blank">Sended Box</a></li>
<li><a href="http://url-votre-forum.com/msg.forum?folder=outbox" target="_blank">Waiting Box</a></li>
</ul>
</dd>
</dl>
    
<dl onmouseover="javascript:montre('smenu5');" onmouseout="javascript:cache()">   
<dt>Logs</dt>
<dd id="smenu5">
<ul>
<li><a href=http://url-votre-forum.com/login.forum?connexion">Log In</a></li>
<li><a href="http://url-votre-forum.com/login.forum?logout=true">Log Out</a></li>
<li><a href="http://url-votre-forum.com/profile.forum?mode=register">Register</a></li>
</ul>
</dd>
</dl>
</div>
</td></tr></tbody></table>
Enregistrer > Publier
- Bien sûr, à la place de http://url-votre-forum.com mettre l'url de votre forum.
- Ce code target="_blank" permet d'ouvrir la page dans un autre onglet ou une autre fenêtre, à vous de voir pour quelle page il serait approprié.

Dernière étape, PA > Affichage > Couleurs > Feuille de style css
A part les intitulés correspondant au HTML, tout le reste n'est là qu'à titre d'exemple :
Spoiler:
#menu { height: 190px;
}
#menu dl {
float: left;
width: 9em; height: 0em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: #color;
background: #color url('http://url_image.png') top left repeat-x;
border: ? ? #color;
padding: ? ? ? ?; //*dans le sens gauche à droite : top > right > bottom > left*//
margin-right: ?px;
z-index: 3;
}
#menu dt:hover {à vous de voir !;
}
dd, ul, li {
padding: ?px;
margin: ?x;
}
#menu dd {
z-index: 4;
background: #color url('http://url-image.png') top left repeat-x;
display: none;
border: ?px ? #color;
padding: ?px ?px ?px ?px;
margin: -1px ?px 34px ?px; //*dans le sens gauche à droite : top > right > bottom > left*//
}
#menu li {
padding: ?px ?px ?px ?px;
}
#menu li a {
color: #color;
text-align: center;
display: block;
height: 12%;
}
#menu li a:hover {
à vous de voir;
}


Voilà, bien du plaisir avec ce petit tuto qui peut vous permettre de réaliser de jolies barres de menus, mais aussi autre chose.




Dernière édition par Final-Blond le 7/9/2011, 22:56, édité 2 fois

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

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

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit