Menu

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

Résolu Menu

Message par Horatio le Sam 23 Juil 2011 - 10:43

Bonjour à tous, Very Happy

Voila j'aimerais savoir si quelqu'un connait un tuto ou un code pour réaliser un menu dans ce style :
http://magical-school.actifforum.com/
Donc un menu qui se déroule horizontalement avec plusieurs autres pages.
Voila.
Merci d'avance pour ceux qui accorderont de l'importance à mon sujet.
Bonne journée,

Cordialement,
Horatio


Dernière édition par Horatio le Sam 23 Juil 2011 - 19:54, édité 1 fois

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu

Message par tupac le Sam 23 Juil 2011 - 12:23

Bonjour

Placez le contenu de ce code dans votre page d'accueil.
Spoiler:
Code:
<style>
#menu{
  width: 610px;
}

#menu ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  -moz-border-radius: 10px;}

#menu li{
  float: left;
  padding: 0px;
  background-color: #c1c1c1;
  -moz-box-shadow: 0px 0px 5px #........;
  font-family: Georgia;
  text-transform: uppercase;
  font-size: 12px;}

#menu li a{
  display: block;
  width: 140px;
  text-transform: uppercase;
  color: #000; /* couleur du texte */
  padding: 5px;
  text-decoration: none;
  font-family: Georgia;
  font-size: 12px;}

#menu li a:hover {color: #0000ff;}  /* couleur du texte au passage de la souris */

#menu ul li ul {display: none;}  /* cacher les sous-catégories */

#menu ul li:hover ul{display: inline-block;}

#menu li:hover ul li{float: none;}

#menu li ul{position: absolute;}
</style>


  <div align=center>
  <div id="menu">
  <ul>
  <li><a href="Lien de l'onglet" target="_blank">Onglet 1</a><ul>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li></ul>
      </li>
 <li><a href="Lien de l'onglet" target="_blank">Onglet 2</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>       
 </ul>
</li></ul></div>

 <div id="menu">
  <ul>
      <li><a href="Lien de l'onglet" target="_blank">Onglet 3</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>     
  </ul>

</li></ul></div>

 <div id="menu">
  <ul>
      <li><a href="Lien de l'onglet" target="_blank">Onglet 4</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
     
</ul>
</li></ul></div></div>

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Menu

Message par Horatio le Sam 23 Juil 2011 - 15:30

Bonjour,

Merci beaucoup pour votre aide.
Le code que vous m'avez fournis marche trés bien néanmoins j'aimerais que cette barre de navigation apparaisse sur toutes les pages. Comment pourrais-je faire ceci ?

Cordialement

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Menu

Message par tupac le Sam 23 Juil 2011 - 16:27

Placez donc le css dans votre feuille de style.
Spoiler:
Code:
#menu{
  width: 610px;
}

#menu ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  -moz-border-radius: 10px;}

#menu li{
  float: left;
  padding: 0px;
  background-color: #c1c1c1;
  -moz-box-shadow: 0px 0px 5px #........;
  font-family: Georgia;
  text-transform: uppercase;
  font-size: 12px;}

#menu li a{
  display: block;
  width: 140px;
  text-transform: uppercase;
  color: #000; /* couleur du texte */
  padding: 5px;
  text-decoration: none;
  font-family: Georgia;
  font-size: 12px;}

#menu li a:hover {color: #0000ff;}  /* couleur du texte au passage de la souris */

#menu ul li ul {display: none;}  /* cacher les sous-catégories */

#menu ul li:hover ul{display: inline-block;}

#menu li:hover ul li{float: none;}

#menu li ul{position: absolute;}
puis dirigez vous dans votre template overall_header et repérer cette partie.
Code:
            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->

et placez juste avant le code suivant..
Spoiler:
Code:
  <div align=center>
  <div id="menu">
  <ul>
  <li><a href="Lien de l'onglet" target="_blank">Onglet 1</a><ul>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li>
<li><a href="Lien du sous-onglet" target="_blank">sous-onglet</a></li></ul>
      </li>
 <li><a href="Lien de l'onglet" target="_blank">Onglet 2</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>     
 </ul>
</li></ul></div>

 <div id="menu">
  <ul>
      <li><a href="Lien de l'onglet" target="_blank">Onglet 3</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>   
  </ul>

</li></ul></div>

 <div id="menu">
  <ul>
      <li><a href="Lien de l'onglet" target="_blank">Onglet 4</a>
        <ul>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
        <li><a href="Lien du sous-onget" target="_blank">sous-onglet</a></li>
   
</ul>
</li></ul></div></div>

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

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

Résolu Re: Menu

Message par Horatio le Sam 23 Juil 2011 - 19:54

Bonjour,

Sa marche à merveille.
Merci pour tout.

Cordialement.

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio 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