BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - cherche menu horizontal
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

cherche menu horizontal

 Répondre Répondre
Auteur
Message
babaorum allez vers le bas
Senior Member
Senior Member


Depuis le: 05 Mai 2013
Status: Inactif
Points: 131
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Sujet: cherche menu horizontal
    Envoyé : 05 Juil 2013 à 18:52
Hello,

Je cherche un menu horizontal, je n'ai pas trouvé dans les modèles de base quelque chose qui me convienne, et sur le web les menus gratuits sont très difficilement adaptable (largeur fixe  etc ...) .
Help !

Merci,

Baba
Haut de la page
babaorum allez vers le bas
Senior Member
Senior Member


Depuis le: 05 Mai 2013
Status: Inactif
Points: 131
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Juil 2013 à 22:22
J'ai trouvé un script vraiment sympa , le truc pas trop cool c'est qu'on ne voit pas le menu sous OE, donc ça nécessite quelques réglages pour le positionner par exemple.Si ça vous intéresse je vous passerai le lien. A quand un bel objet menu_horizontal dans OE ?



Edité par babaorum - 05 Juil 2013 à 22:24
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Juil 2013 à 22:58
Le lien est bienvenu )
Haut de la page
babaorum allez vers le bas
Senior Member
Senior Member


Depuis le: 05 Mai 2013
Status: Inactif
Points: 131
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Juil 2013 à 11:23
Voilà je me suis inspiré de ce tuto sur ce lien :
http://www.creativejuiz.fr/blog/tutoriels/creer-menu-horizontal-centre-css-sans-javascript

Si vous voulez les codes de mes blocs dans OE , n'hésitez pas je peux les publier ici.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Juil 2013 à 13:06
Oui ce sera sympa, si c'est pas dur pour vous
Haut de la page
babaorum allez vers le bas
Senior Member
Senior Member


Depuis le: 05 Mai 2013
Status: Inactif
Points: 131
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Juil 2013 à 15:56
Je vous invite fortement à partir du tuto qui est clair pour comprendre le code.
De plus comme c'est le premier code css que je fais il n'est pas optimisé et mélange les deux exemples du tuto donc il y a des parties à supprimer (que je vous laisse expérimenter).
Ceci étant dit, en plaçant ce code dans un bloc de code masqué (type de code css) :
 
   h1 {
        text-align: center;
    }
    .exemple {
        height: 1600px;
    }
    #ex2 {
        padding-top: 2em;  /* distance du haut   */
   }
      /* premier exemple */
    .nav {
        padding: 0;
        margin: 2.5em 0;
        text-align:center;
    }
    .nav li {
        display: inline;
        list-style: none; /* nécessaire pour IE7 */
    }
   
    .nav a {
        display:inline-block;
        margin: 0 30px;
    }
    #ex2 .nav { 
        border: 1px solid #333; 
        border-top-color: #707070; 
        background: -moz-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent; 
        background: -webkit-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent; 
        background: -ms-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent; 
        background: -o-linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent; 
        background: linear-gradient(bottom , #666666 0pt, #5E5E5E 50%, #707070 51%, #808080 100%) repeat scroll 0 0 transparent; 
        text-align: center; 
        height: 36px; 
        -webkit-box-shadow: 0 1px 3px #999; 
        -moz-box-shadow: 0 1px 3px #999; 
        box-shadow: 0 1px 3px #999; 
        -webkit-border-radius: 6px; 
        -moz-border-radius: 6px; 
        border-radius: 6px; /* courbure des bords  */ 
        } 
    #ex2 .nav a { 
        height: 36px; 
        margin: 0;             /* marge entre chaque item du menu  */
        padding: 0 35px; 
        line-height: 36px; 
        border-left: 1px solid #555; 
        border-right: 1px solid #888; 
        text-decoration: none; 
        color: white; 
        text-shadow: -1px -1px 0 #444; 
        font-family: Helvetica, Arial, Verdana, sans-serif; 
        font-size: 1em; 
        } 
 
    #ex2 .nav a:hover, 
    #ex2 .nav a:focus { 
        background: -moz-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent; 
        background: -webkit-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent; 
        background: -ms-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent; 
        background: -o-linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent; 
        background: linear-gradient(bottom , #444444 0pt, #3E3E3E 50%, #505050 51%, #606060 100%) repeat scroll 0 0 transparent; 
        text-shadow: -1px -1px 0 #000; 
    } 

et en plaçant ce code dans un bloc de code normal :
    <div class="exemple" id="ex2">
   
       <ul class="nav"><!--
  --><li><a href="../index.htm">Accueil</a></li><!--
          --><li><a href="../contact.htm">Contact</a></li><!--
        --><li><a href="../principes.htm">Principes</a></li><!--
          --><li><a href="../studio.htm">Le studio</a></li><!--
          --><li><a href="../tarifs.htm">Tarifs</a></li><!--
          --><li><a href="../sounds.htm">Sounds</a></li><!--
        --><li><a href="../plan.htm">Plan</a></li>
    </ul>
    </div> 
J'ai pu obtenir le menu visible sur mon site.
Pour placer le menu dans la page, j'ai déplacé le bloc de code jusqu'à trouver la bonne position.

                                         

Edité par babaorum - 06 Juil 2013 à 16:12
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Juil 2013 à 12:04
Merci!
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.