cherche menu horizontal |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
babaorum
Senior Member Depuis le: 05 Mai 2013 Status: Inactif Points: 131 |
Options des messages
Thanks(0)
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 |
|
babaorum
Senior Member Depuis le: 05 Mai 2013 Status: Inactif Points: 131 |
Options des messages
Thanks(0)
|
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 |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Le lien est bienvenu )
|
|
babaorum
Senior Member Depuis le: 05 Mai 2013 Status: Inactif Points: 131 |
Options des messages
Thanks(0)
|
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. |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Oui ce sera sympa, si c'est pas dur pour vous
|
|
babaorum
Senior Member Depuis le: 05 Mai 2013 Status: Inactif Points: 131 |
Options des messages
Thanks(0)
|
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 |
|
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
Merci!
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |