ACCUEIL
CREER UN FORUM
TOP FORUMS
COMMUNAUTE
FORUM D'ENTRAIDE
ESPACE MEMBRE
 
 
It is currently Wed 10 Feb 2010 - 08:47 - créer un forum

[Tuto] Barre horizontal avec menu déroulant

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3 … 11, 12, 13  >
[Tuto] Barre horizontal avec menu déroulant
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Fri 11 May 2007 - 15:55    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote

  • Titre: Barre horizontal avec menu déroulant contenant des sous menu.
  • Version: 1.0

  • Auteur: By
    By
  • Contact Auteur: Avec ma fiche de contact ICI
  • Source: Moi même-alsacreations

  • Description: Ce tuto vous permet d'ajouter une barre horizontal avec un menu déroulant.

  • Niveau d'installation: moyen (difficile si novice)
  • Temps d'installation: 5-10 Minutes. (selon votre configuration de la barre)
  • Nombre de template a modifié : 1

  • Fonctionne sur les thémes : xooit, phpBB.
  • Test effectué sur :xooit, phpBB2.
  • Defaut : Aucun.
  • exemple:
ICI en haut de la page.

    Installation :

    Sauvergardez vos templates, image avant toute modification.



Ouvrez :
overall_header.tpl (pour s'afficher en haut sur toute vos pages)


Cherchez (dans le haut de votre template):
Code: Sélectionner - Agrandir
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>



Ajoutez avant :

Code: Sélectionner - Agrandir
<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>


<style type="text/css">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
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 {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
   <dl>
      <dt onmouseover="javascript:montre();"><a href="http://sploutchsploutch.free.fr" title="Retour à l'accueil">Accueil</a></dt>
   </dl>
   
   <dl>         
      <dt onmouseover="javascript:montre('smenu1');">Logiciels</dt>
         <dd id="smenu1">
            <ul>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=1">Logiciels divers</a></li>

               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=4">Logiciels msn/wlm</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=18">Logiciels jeux</a></li>
               <li><a href="http://sploutchsploutch.free.fr/Partenariat.html">Liens</a></li>
            </ul>

         </dd>
   </dl>
   
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu2');">MSN/WLM</dt>
         <dd id="smenu2">
            <ul>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=10">Script messenger+ Live</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=11">Emoti-sons</a></li>

               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Meegos</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Fonds dynamique</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Clins d'oeil</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=17">Skins WLM</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu3');">Tutoriaux</dt>
         <dd id="smenu3">

            <ul>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=9">Tutos pour votre pc</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=3">Tutos logiciels</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=2">Tutos webmaster</a></li>
               <li><a href="http://sploutchsploutch.free.fr/smileys.html">Smileys</a></li>
               <li><a href="http://sploutchsploutch.free.fr/Pub.html">?</a></li>
                    <li><a href="http://sploutchsploutch.free.fr/FontsEcrans.html">Fonds d'écran</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu4');">Divers et aides</dt>
         <dd id="smenu4">
            <ul>
                    <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=24">Supports</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=22">Les tests</a></li>
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=21">Sondages</a></li>
               <li><a href="http://sploutchsploutch.free.fr/Chater.html">T'chat</a></li>
               <li><a href="http://aubonendroit.com.xooit.com/portal.php">Le sploutch-site</a></li>
               <li><a href="http://sploutchsploutch.free.fr/Contact">Contact</a></li>
               <li><a href="http://sploutchsploutch.free.fr/m%E9t%E9o.html">Météo</a></li>
               <li><a href="http://xooit.xooit.com/index.php">Support xooit</a></li>
               <li><a href="http://sploutchsploutch.free.fr/">Le 100% Gratuits !</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu5');">TITRE ICI</dt>
         <dd id="smenu5">
            <ul>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu6');">TITRE ICI</dt>
         <dd id="smenu6">
            <ul>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:montre('smenu7');">TITRE ICI</dt>
         <dd id="smenu7">
            <ul>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li>
            </ul>
         </dd>
   </dl>
   

   
</div>


Vous devez bien sur changer :

-Les titres des onglets.
-Les sous-titre de chaque onglets.
-Les URL. (n'oubliez pas d'ajouter a la fin de chaque url target="_blank" pour vous faire ouvrir le lien dans une nouvelle page)

Testé et fonctionne sous :

-Internet Explorer,
-Netscape,
-Mozilla,
-Opera et Firebird


    Sauvergarder et fermé



Fin du tuto
By Sploutch ©

_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |

Last edited by Sploutch on Wed 10 Dec 2008 - 21:48; edited 5 times in total
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 57,289
Point(s): 68,652
Moyenne: 1.20
Firefox Mac
PostPosted: Fri 11 May 2007 - 17:58    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
bonjour
c'est super bien fait mais tu as pas un exemple sur un forum pour voir exactement ce que ça fait au niveau des dimensions
_______________________
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Fri 11 May 2007 - 18:07    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
nan je n'ai pas/plus cela.
Je l'avais mis pendant un moment, mais je l'ai enlevé. Puis je n'ai pas d'autre forum "test" c'est pourquoi je l'ai mis sur une page html que j'ai crée.

Cela dit c'est exactement la même chose. Tu images le forum en dessous.
Puis tu peux ajouter d'autre onglet/menu, en reprennent le même principe a chaque fois, pour ainsi avoir la totalité de la largeur du forum.
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
Dark-HaZeo
Membre

Offline
Membre

Joined: 27 Mar 2007
Posts: 13
Niveau:
Point(s): 21
Moyenne: 1.62
Firefox Linux Masculin Vierge (24aoû-22sep) 蛇 Serpent
PostPosted: Fri 11 May 2007 - 21:46    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
-Petit cadeau pour tout Ces Tutos .
-Sa attire LOL , Si tu veux Bien mettre cette signature .
-Je crois que j'ai oublier les points d'interrogations .



-En tout cas merci , sa m'ai très utile !
_______________________
<Signature retirée car non conforme au règlement>
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Sat 12 May 2007 - 07:48    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Merci Dark-HaZeo.
Content que cela te convienne.
(faudra que je mette mon profil à jour)
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
mahdiyou
Membre

Offline
Membre

Joined: 14 Apr 2007
Posts: 13
Point(s): 18
Moyenne: 1.38
Opera Windows XP (ou plus ancien) Masculin Sagittaire (22nov-21déc) 龍 Dragon
PostPosted: Wed 16 May 2007 - 19:17    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Où doit-on l'ajoute après ou avant <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
Forum
Author Message
Gas man
Membre

Offline
Membre

Joined: 18 Jul 2005
Posts: 1,989
Niveau:
Point(s): 3,585
Moyenne: 1.80
Firefox Windows XP (ou plus ancien) Masculin Taureau (20avr-20mai) 鼠 Rat
PostPosted: Wed 16 May 2007 - 19:19    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Quote:
Ajoutez avant

_______________________
Gas Man - V.I.P
Crée tes propres fringues de stunt!
Forum
Author Message
Titoum13
Membre

Offline
Membre

Joined: 09 Jun 2007
Posts: 7
Point(s): 8
Moyenne: 1.14
Internet Explorer Windows XP (ou plus ancien)
PostPosted: Sun 1 Jul 2007 - 19:53    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Merci Sploutch super travail , je viens de prendre ce tuto et je les installer cette apres midi , sa ma pris 45 minutes , mais j'ai un probleme les boutons sont gris et je voudrais changer la couleur et mettre un fond bleu comme pour mon forum peut tu m'aider si tu peut ou sur le tuto je change la couleur du fond gris
Merci a toi , en cas regarde mon forum la couleur du menu va pas avec mon forum

http://fvlive-streaming.xooit.com/index.php
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Wed 4 Jul 2007 - 17:14    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Merci Titoum13 Wink

Pour changer la couleur, j'avoue que je n'avais pas regardé jusque la.
Mais essai en modifient le background: #ccc dans le script de cette partie :

Code: Sélectionner - Agrandir
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray


(Je n'ai pas fait l'essai)

Sinon sa rend super bien sur ton forum Wink
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
Titoum13
Membre

Offline
Membre

Joined: 09 Jun 2007
Posts: 7
Point(s): 8
Moyenne: 1.14
Internet Explorer Windows XP (ou plus ancien)
PostPosted: Wed 4 Jul 2007 - 19:49    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Merci sploutch je vais essayer de suite bonne soiree a toi
Forum
Author Message
Bulbiteam
Membre

Offline
Membre

Joined: 14 Jun 2007
Posts: 48
Niveau:
Point(s): 68
Moyenne: 1.42
Firefox Windows XP (ou plus ancien) Masculin Capricorne (22déc-19jan) 狗 Chien
PostPosted: Thu 5 Jul 2007 - 15:48    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
J'aimerais en avoir un verticale
_______________________
J'utilise Windows est Linux
et Internet Explorer, FireFox et Linux

[Le Loup Solitaire], [borivel(68/67)] et [Fltruc/Admin]
Forum
Author Message
Titoum13
Membre

Offline
Membre

Joined: 09 Jun 2007
Posts: 7
Point(s): 8
Moyenne: 1.14
Internet Explorer Windows XP (ou plus ancien)
PostPosted: Thu 5 Jul 2007 - 19:40    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Sploutch wrote:
Merci Titoum13 Wink

Pour changer la couleur, j'avoue que je n'avais pas regardé jusque la.
Mais essai en modifient le background: #ccc dans le script de cette partie :

Code: Sélectionner - Agrandir
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray


(Je n'ai pas fait l'essai)

Sinon sa rend super bien sur ton forum Wink


Super l'ami sa a marcher merci bien
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Thu 5 Jul 2007 - 20:31    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Super, content pour toi Titoum13 ! Mr. Green

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Bulbiteam wrote:
J'aimerais en avoir un verticale


Tu as celui- LA si sa te va ..
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
Bulbiteam
Membre

Offline
Membre

Joined: 14 Jun 2007
Posts: 48
Niveau:
Point(s): 68
Moyenne: 1.42
Firefox Windows XP (ou plus ancien) Masculin Capricorne (22déc-19jan) 狗 Chien
PostPosted: Fri 6 Jul 2007 - 06:55    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
merci Sploutch il ma va (je le trouve même mieux)
_______________________
J'utilise Windows est Linux
et Internet Explorer, FireFox et Linux

[Le Loup Solitaire], [borivel(68/67)] et [Fltruc/Admin]
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 2,800
Niveau:
Point(s): 3,330
Moyenne: 1.19
Masculin
PostPosted: Fri 6 Jul 2007 - 08:43    Post subject: [Tuto] Barre horizontal avec menu déroulant Reply with quote
Bulbiteam wrote:
merci Sploutch il ma va (je le trouve même mieux)


De rien et content pour toi aussi Wink

NB :Le bloc avec des onglets de mon autre Tuto que tu as installé, va super bien aussi Smile
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Display posts from previous:   
Reply to topic Page 1 of 13 Goto page: 1, 2, 3 … 11, 12, 13  >




Portal | Index | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Powered by phpBB © 2006 - 2009 phpBB Group |
 
© 2003-2009 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401