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 .. ;)

[poséidon]

merci cool cette trad

[°Fred69°]

avec cette modifie il ma fait planter le forum

je peut plus acceder ni a index ni dans le Styles & Templates navbar:

Quand je veux modifier sa ne mais direct sa http://mybookface.net/

une ideé pour regler c probleme ?

[°Fred69°]

navbar_link celui la pas de probleme et le reste aussi que le navbar


Une idee car je peut plus rien faire

[Simon]

avec cette modifie il ma fait planter le forum

je peut plus acceder ni a index ni dans le Styles & Templates navbar:

Quand je veux modifier sa ne mais direct sa http://mybookface.net/

une ideé pour regler c probleme ?Il est impossible qu'une simple modification de template provoque ça. Tu as dû faire quelque chose d'autre.

[°Fred69°]

c la seule choses que j ai fait

une idee pour reparer ou acceder a navbar

[marock]

C quoi le lien du forum?
Une fois ça m'est arrivé j'ai désactivé les produits via le fichier config.php pour le réparer

[°Fred69°]

par mp je te l envoie

[KeNa]

y a du nouveau?

chui curieux de connaître ton fix =)

[Simon]

y a du nouveau?

chui curieux de connaître ton fix =)Si ce n'est que ça :D, ajoute dans ton fichier config.php:
define('DISABLE_HOOKS', true);

[Ombre]

Bonsoir, de quel fix parlez vous?

Car je ne vois pas l'intérêt d'un fix pour ce style de modification, qui fonctionne parfaitement sur tout style utilisent les mêmes class que celles de base.

Je l'ai encore utilisé dans un sujet de support avec succès :)

[Simon]

Bonsoir, de quel fix parlez vous?

Car je ne vois pas l'intérêt d'un fix pour ce style de modification, qui fonctionne parfaitement sur tout style utilisent les mêmes class que celles de base.

Je l'ai encore utilisé dans un sujet de support avec succès :)http://www.vbulletin-ressources.com/forum/showpost.php?p=105731&postcount=24 Il parait que cette modification aurait fait planter son forum meoui

[Ombre]

Impossible, cela ne viens pas de la, c'est du html tout simple qui fait appel a des class prédéfinies sur vb, donc ou elles marches, ou elles n'ont aucunes action.

En tout cas je ne pense vraiment pas que cela soit du code ajouté, mais plus pour une erreur ou un hack défectueux.

[duncan]

Bonjour,

J'avais besoin d'un menu déroulant et ça marche bien, bon sur j'ai du l'adapter à mon style, mais j'ai un souci de décalage par rapport autre lien dans le menu.

J'ai essayer pendant une heure, rien à faire.

Image en pièce jointes, merci ;)

[Ombre]

Bonsoir, probablement comme ton autre question sur un autre topic, le soucis est peut-être dû a une class qui est différente sur le style que tu utilises, donc essayes de voir si elle diffère des autres class ;)

[duncan]

Si j'ai bien compris, c'est bien ce qui est en rouge que je doit changer pour l'adapter ?


<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>

[Ombre]

Oui c'est bien ça, si la class des autres liens n'est pas la même, sinon envois ton template ici, que je regarde, mais je ne te garantie rien car je surf dans des conditions archéologique :D

[duncan]

Oui c'est bien ça, si la class des autres liens n'est pas la même, sinon envois ton template ici, que je regarde, mais je ne te garantie rien car je surf dans des conditions archéologique :D

oh ça sent le bon 56K :D

J'ai essayer de supprimer la class lol et c'est toujours adapté à mon style mais toujours ce décalage, petit souci également au passage, sur ma pièces jointes on voit que j'ai une petite flèche vers le bas pour le menu déroulant, que dois je faire pour avoir la même chose ?

J'ai mis le lien en rouge pour te faire gagner du temps ;) merci

<!-- logo -->
<a name="top"></a>
<div class="wrapper">

<div class="topwrap">
<div class="topL"></div>
<div class="topR"></div>
<div class="topC"></div>
</div>

<div class="headerwrap">
<div class="headerL"></div>
<div class="headerR"></div>
<div class="headerC"><div align="center" class="ie6fix" ><script type="text/javascript"> show_banners(); </script></div></div>
</div>


<div class="navwrap">
<div class="navL"></div>
<div class="navR"></div>
<div class="navC">

<!-- nav buttons bar -->


<div class="menu">
<table class="menu" cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr align="center">
<!-- INDEX DU PORTAIL -->
<td class="sub_nav">
<a href="http://www.entropiafrance.com/index.php" accesskey="5">Accueil</a>
</td>

<!-- FORUM -->
<td class="sub_nav">
<a href="http://www.entropiafrance.com/forum/index.php" accesskey="5">Forum</a>
</td>

<!-- Blog - si possède -->
<if condition="$vbulletin->products['vbblog']">
<td><a id="vbbloglinks" href="blog.php$session[sessionurl_q]">$vbphrase[blogs]</a><script type="text/javascript">vbmenu_register("vbbloglinks");</script></td>
</if>

<!-- ProjectTool - si possède -->
<if condition="$vbulletin->products['vbprojecttools']">
<td>
<a href="$vboptions[bburl]/project.php$session[sessionurl_q]">$vbphrase[projects]</a>
</td>
</if>

<if condition="$show['communitylink'] AND $show['popups']">
<td><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community"); </script></td>
<else />
<if condition="$show['memberslist']">
<td><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
</if>
<if condition="$show['quick_links_groups']">
<td><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></td>
</if>
</if>



<if condition="$show['popups']">
<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<else />
<td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
<td><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
</if>
<if condition="$show['member']">
<td><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
</if>
<else />
<if condition="$show['searchbuttons']">
<td><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
<if condition="$show['member']">
<td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<else />
<td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
</if>
<td><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
<if condition="$show['member']">
<td><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td>
</if>
</if>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<td><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
</if>


$template_hook[navbar_buttons_left]



</tr>
</table>

</div>
<!-- / nav buttons bar -->


</div>
</div>
<div class="nav2wrap">
<div class="nav2L"></div>
<div class="nav2R"></div>
<div class="nav2C">

<!-- 2nd Navbar -->
<div class="menu2">
<table class="menu2" cellpadding="0" cellspacing="0" border="0" width="500" align="center">
<tr align="center">


<!-- GALERIE -->
<td>
<a href="http://www.entropiafrance.com/galerie/index.php" accesskey="5">Galerie</a>
</td>

<!-- v3 Arcade -->
<td><a href="http://www.entropiafrance.com/forum/arcade.php" accesskey="5">Arcade</a></td>
<!-- /v3 Arcade -->

<td><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td>

<td><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>

<if condition="$show['member']">
<td><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
</if>
<if condition="$show['registerbutton']">
<td><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
</if>

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

</tr>
</table>
</div><!-- end 2nd Navbar -->

</div>
</div>

<!-- CONTENT -->
<div id="contentL">
<div id="contentR">
<div id="contentC">
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

Edit : j'ai essayer les class : menu, menu2 et certain top et nav2

[Ombre]

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


Essaye ceci pour voir, si c'est pas bon je verrais ça ce week end avec toi si mes soucis de pc sont résolus :)

[duncan]

C'est du tonnerre, ça marche, merci beaucoup :yahoo:

(pm envoyé)

[Ombre]

De rien, bonne continuation, et bon lancement pour ce forum ;)

[duff]

Merci pour ce tuto

Mais les liens n'apparaissent que pour les membres

comment faire pour qu'ils le soient même pour les visiteurs?

Merci

[Ombre]

Bonsoir, ils devraient être visible par les membres, et visiteurs, bien sur tout dépend des lien et surtout des conditions que tu mets dedans.

[duff]

je n'ai mis aucune condition, je n'ai fais que rajouter des liens d'ordre général, qui n'ont rien à voir avec les permission membre/ invité

je pense que le truc réside là


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

j'ai mis

lien favoris:
Lien 1
Lien 2
Lien 3

[Ombre]

usercp, les visiteur ne pourront pas y acceder, normal ils sont pas enregistré, donc pas de profile.

[duff]

je le mets ou alors pour autoriser les invités à les voir..

désolé, mais je suis vriament nul :-(

[Ombre]

Le menu tu dois le mettre dans ta navbar ou header selon la conception de ton style, moi je te parle de la cible de ce lien, j'ai vu sur ton lien que tu pointé vers l'usercp, c'est normal que le lien soit inaccessible si c'est un visiteur qui clic dessus.

Copie le contenus de ton menu déroulant ici pour que je regarde ça.