Antivirus offre spéciale - jusqu'à 60 % de réduction avec 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: May 05 2013
Status: Inactif
Points: 116
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é : Jul 05 2013 à 5:52pm
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: May 05 2013
Status: Inactif
Points: 116
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jul 05 2013 à 9:22pm
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 - Jul 05 2013 à 9:24pm
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

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


Depuis le: May 05 2013
Status: Inactif
Points: 116
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jul 06 2013 à 10:23am
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
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jul 06 2013 à 12:06pm
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: May 05 2013
Status: Inactif
Points: 116
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer babaorum Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jul 06 2013 à 2:56pm
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 - Jul 06 2013 à 3:12pm
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 13998
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Jul 07 2013 à 11:04am
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 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne