Créer un menu déroulant dans la barre de navigation

[BiOMECHANiK]

Bonjour,

Je me suis amusé à faire un menu déroulant cet après midi pour mon Forum, je vous le mets donc à disposition pour ceux que ca intéresse.

Il s'agit d'une modification du template 'navbar' permettant d'ajouter un menu déroulant.

Tout d'abord,

Trouvez:

<td class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>

Juste au dessus, ajoutez :

<td id="accueil" class="vbmenu_control"><a href="/index.php" accesskey="4" rel="nofollow">Navigation</a> <script type="text/javascript"> vbmenu_register("accueil"); </script></td>

accueil = ID du menu déroulant, dans cet exemple j'ai créé un menu de navigation pour les modules composants mon Forum d'où "accueil"

/index.php = Chemin vers l'accueil de mon site (optionnel)

Navigation = Titre du menu déroulant

Personnalisez ces champs comme bon vous semble ;)



Ensuite trouvez:

<!-- / PAGENAV POPUP -->

Ajoutez juste en-dessous:

<!-- / Accueil menu -->
<div class="vbmenu_popup" id="accueil_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Plan du site</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="/index.php">Accueil du site</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="$vboptions[bburl]/index.php">Accueil du Forum</a></td>
</tr>
<tr>
<td class="thead">Communication</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="$vboptions[bburl]/misc.php?do=flashchat">Accèder au Chat</a></td>
</tr>
<tr>
<td class="thead">Outils complémentaires</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="$vboptions[bburl]/downloads.php">Section Téléchargements</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="/photopost/index.php">Les Galeries Photos</a></td>
</tr>
</table>
</div>
<!-- / Accueil menu -->


En vert = Titre des sous catégories du Menu
En rouge = Lien vers les modules
En bleu = Description des liens

Voilà tous ces champs de couleurs sont personnalisables suivant le style ou le type de menu que vous souhaitez créer.

Bon courage...


En image ca donne :

http://www.vbulletin-ressources.com/forum/images/tutoriaux/148_1156343957.png

byby BiOMECHANiK

[Dark-Angel]

Merci bio, c'est pas mal du tout :)

[Allan]

merci du tuto Bio ;)

[sony]

utile, merci ;)

[lagrace]

Salut

Excellent comme modif merci

[morpheus302]

Salut est ce possible de faire une double barre de navigation pour ceux qui ont pleins de liens dans celle ci?? merci

[Allan]

Un hack existe pour cela, regarde le profil de Nerilka ^^

[morpheus302]

Merci Allan

[lucifer]

pas trouve moi j utiliser iskin x

[lucifer]

qui peux maide svp merci

<script type="text/javascript">
<!--
function log_out()
{
ht = document.getElementsByTagName("html");
ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grays cale=1)";
if (confirm('$vbphrase[sure_you_want_to_log_out]'))
{
return true;
}
else
{
ht[0].style.filter = "";
return false;
}
}
//-->
</script>
function openChatbox () {
chatbox = window.open('chatbox.php','chatbox','height=330,wi dth=650,directories=n o,location=no,menubar=no,resizable=no,status=no,to olbar=no,scrollbars=yes');
return false;
}
<br />

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td>&nbsp;</td>

<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>

<if condition="$show['member']">

<td class="alt2" valign="top" nowrap="nowrap">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if>
<!-- Hack date et heure -->
<div id="clock">Chargement...</div>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var day=d.getDay();
var date=d.getDate();
var month=d.getMonth();
var year=d.getFullYear();
var days=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
var months=new Array("Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre");
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=days[day] + " " + date + " " + months[month] + " " + year + ", " + h + ":" + m + ":" + s + " ";
setTimeout("refrClock()",1000);
}
refrClock();
</script>
<!-- /Hack date et heure -->
</div>
</td>

<else />

<td class="alt2" nowrap="nowrap" style="padding:0px">

<!-- login form -->
<form action="login.php" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont">$vbphrase[username]</td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" colspan="2" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont">$vbphrase[password]</td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" size="10" accesskey="p" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->

</td>

</if>

</tr>
</table>
<!-- / breadcrumb, login, pm info -->


<div class="spacer"></div>

<if condition="$show['forumdesc']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%"><strong>$foruminfo[title]</strong> <span class="smallfont">$foruminfo[description]</span></td>
</tr>
</table>
<br />

</if>

[LtD]

impécable pour gagner de la place quand on a beaucoup de menus à proposer, merci pour l'astuce :)

[LesT@T]

Jolie tuto , mais j'ai une petite question!
Quelq'un sait qu'est ce que l'on doit rajouter et où, pour que le menu ne soit visible que par certains groupes d'utilisateur?

Merci!

[MtoR]

Pour qu'un menu ne soit visible que car par certains usergroup, avec l'exemple proposé par biomechanick, il te suffirait d'ajouter autour des éléments à rajouter dans le template navbar:


<if condition="is_member_of($bbuserinfo,5,6,7)">
ICI TU METS LE CODE A AJOUTER
</if>


Dans mon exemple, je donne accès uniquement aux membres des usergroup 5,6,7 mais tu peux mettre dedans ce que tu veux et en mettre autant que tu veux après $bbuserinfo.

Il faut que tu entoures les deux éléments à rajouter dans le navbar, autour du td d'ajout du menu et puis du tableau du contenu du menu :)

[LesT@T]

Tu assure un max et encore plus même, j'ai à peine eu le temps de dormir quelques heures que j'ai déja ma réponse;)

[MtoR]

Bah je fesais mon petit tour du forum du matin ;)

[LesT@T]

Je voulais savoir si chez vous aussi, ce menu ne marchait que sous ie? c'est embetant car un grand nombre de personne sont sous firefox!lool
C'est possible de corriger le code je suppose , car les menu de base de la navbar eux fonctionne avec les 2 navigateur, mais comment...!^^

[LesT@T]

Je n'ai toujours pas réussi a faire marcher mon menu déroulant sous firefox, je suis le seul a avoir ce bug?

[DamPSG]

Est ce que sa marche sur le theme Chestnut de Allan ?

[Bkdenice]

a Merci, joli tuto, je vais le faire ^^

[Doc1956]

Salut , j'ai un petit probleme avec le script pour le menu.Il marche bien sauf que j'ai un bouton dans mon menu original et je voudrais le conservé.Voici mon script pour le bouton :

<td><a class="menu_button" href="http://www.xxxxxx.com" title="$vbphrase[Accueil]"><span>Accueil</span></a>

et voici ton script :

<td id="accueil" class="vbmenu_control"><a href="/index.php" accesskey="4" rel="nofollow">Accueil</a> <script type="text/javascript"> vbmenu_register("accueil"); </script></td>

Vu que je ne suis pas un expert pourriez vous m'expliquer lla méthode pour que mon bouton apparaisse avec ton script.

Merci Doc

[chapelain]

Bonjour

Ayant beaucoup d'icone de messages sur mon forum , je me demandait s'il ne serait pas possible d'adapter ton formidable ajout dans l'édition du post à coté de Outils de la discussion ou autre afin que le membre quand il fait son message , il choisi l'icone de message via une liste Déroulante .

Merci beaucoup les amis .

[Kaiyo]

Merci Beaucoup j'ai vraiment aimé ce tutorial .. ;)