cherche menu horizontal
Imprimé depuis: Forum openElement
Categorie: openElement
Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=18509
Date: 19 Avr 2024 à 00:06
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com
Sujet: cherche menu horizontal
Posté par: babaorum
Sujet: cherche menu horizontal
Posté le: 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
|
Réponses:
Posté par: babaorum
Posté le: 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 ?
|
Posté par: Dmit OE
Posté le: 05 Juil 2013 à 22:58
Posté par: babaorum
Posté le: 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" rel="nofollow - 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.
|
Posté par: Dmit OE
Posté le: 06 Juil 2013 à 13:06
|
Oui ce sera sympa, si c'est pas dur pour vous
|
Posté par: babaorum
Posté le: 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.
|
Posté par: Dmit OE
Posté le: 07 Juil 2013 à 12:04
|