Personaliser sont propre menu en javascript ?
raffaele
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjours a tous je voudrait personnaliser mon menu voiçi une image https://i16.servimg.com/u/f16/11/18/82/43/sans_t10.png je voudrait aussi mettre des sous-menu a chaque fois qu'on clique dessus
Raffaële
Raffaële
A voir également:
- Personaliser sont propre menu en javascript ?
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Telecharger javascript - Télécharger - Langages
- Windows 11 menu contextuel classique - Guide
13 réponses
Je te remerci dalida mais leur menu est-ce que je peux les personnaliser a ce dont je voudrait faire https://i16.servimg.com/u/f16/11/18/82/43/sans_t10.png ou ? ^^
Raffaële
Raffaële
Utilise des calques visible ou invisibles ;)
Cours : http://www.cdprof.com/formation/formation_web9.php
Cours : http://www.cdprof.com/formation/formation_web9.php
s'il te plait, suis les fils de discussions !
qu'est ce que tu veux qu'on foute des <div> dans un menu <ul><li><a> ?
ça fait pas assez de balises à décorer ?
tu veux qu'on en fasse quoi de tes "calques" dans ce cas là ?
"visible ou invisibles", là encore qu'est-ce que ça a à voir avec un menu en css comme le présente Alsacréations ?
un élément de liste et un lien avec quatre états ça suffit pas ?
qu'est ce que tu veux qu'on foute des <div> dans un menu <ul><li><a> ?
ça fait pas assez de balises à décorer ?
tu veux qu'on en fasse quoi de tes "calques" dans ce cas là ?
"visible ou invisibles", là encore qu'est-ce que ça a à voir avec un menu en css comme le présente Alsacréations ?
un élément de liste et un lien avec quatre états ça suffit pas ?
Justement en suivant le fil de la discussion je vois qu'il veut un menu extensible, une façon de faire est de placer des calques invisibles qui contiennent l'expansion des menu, et de les afficher au survol du lien en question, puis de les caché lorsque le bouton en question perd le focus...
Si tu veut je te fait un exemple pour que tu puisse concrétiser mon idée si tu ne connais pas? :)
Si tu veut je te fait un exemple pour que tu puisse concrétiser mon idée si tu ne connais pas? :)
salut,
oui tu peux tout personnaliser.
à chaque balise <li> ou <a> tu peux appliquer une image de fond. cette image tu l'as crée en découpant l'image que tu as dessinée comme maquette. et au survol ou pour un lien visité tu peux appliquer une image différente (avec le texte d'une autre couleur par exemple).
oui tu peux tout personnaliser.
à chaque balise <li> ou <a> tu peux appliquer une image de fond. cette image tu l'as crée en découpant l'image que tu as dessinée comme maquette. et au survol ou pour un lien visité tu peux appliquer une image différente (avec le texte d'une autre couleur par exemple).
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
et voici l'exemple, je l'ai fait à la va vite et je n'ai pas soigné le tout mais c'est des sous-menu, et comme il en voulait, je proposait cette solution, bon assez parler voici la pratique ;)
http://users.skynet.be/cadenza/menu-ext/
http://users.skynet.be/cadenza/menu-ext/
ps: en cliquant sur FAQ, vous pouvez télécharger un zip contenant la source :)
J'espère que c'est ce type de sous-menu que tu souhaitait ;) tu peut en paramétrer la couleur de fond, ou mettre une image, voir ce que tu veut, un tableau dedans, ... ... ... ^^
J'espère que c'est ce type de sous-menu que tu souhaitait ;) tu peut en paramétrer la couleur de fond, ou mettre une image, voir ce que tu veut, un tableau dedans, ... ... ... ^^
décidément !
je comprends mieux pourquoi tu nous parlais de <div> !!!
donc la technique, je te rassure je la connais !
par contre j'essaie de la pratiquer en respectant un peu plus la sémantique html et dans ce cas les divisions sont superflues.
je te parlais d'un article d'Alsacréations en <1>, je l'ai appliqué à ce cas. je n'ai pas non plus trop le temps donc je l'ai copié tel quel, moralité il ne tourne pas sous IE 6. mais ça c'est plus un détail.
je préfère mettre mes menus dans des <ul><li><ul><li> mais j'ai gardé l'architecture d'Alsa avec les listes de définitions.
comme d'hab c'est valide xhtml strict et css, t'as pas l'air de trop aimé le w3c toi, non ?
-;o)
bonne nuit tout le monde !
je comprends mieux pourquoi tu nous parlais de <div> !!!
donc la technique, je te rassure je la connais !
par contre j'essaie de la pratiquer en respectant un peu plus la sémantique html et dans ce cas les divisions sont superflues.
je te parlais d'un article d'Alsacréations en <1>, je l'ai appliqué à ce cas. je n'ai pas non plus trop le temps donc je l'ai copié tel quel, moralité il ne tourne pas sous IE 6. mais ça c'est plus un détail.
je préfère mettre mes menus dans des <ul><li><ul><li> mais j'ai gardé l'architecture d'Alsa avec les listes de définitions.
comme d'hab c'est valide xhtml strict et css, t'as pas l'air de trop aimé le w3c toi, non ?
-;o)
bonne nuit tout le monde !
Ces tout à fait ce genre de menu que j'aimerait faire mais les couleur je peux les mettre en apha ? car mettre des couleur ou une image je trouve ca moche ^^ sinon je te remerci aussi à toi Scriptiz
Dit voir Dalida le site que tu ma passer alascréations le réalisateur des tutoriels ces raphëles ... car il a écrit un livre CSS 2 : Pratique du design web je voulait l'acheter mais je ces pas si il explique dedans comment faire un menu totalement personalisable " Si je peux dire ca comme ca ^^ "
Raffaële
Raffaële
SALUT
le site d alsacreation est une reference reconnue pour le css et ces auteurs écrivent effectivement des livres !! mais tu dois pouvoir trouver ce que tu veut dans les tuto online du site !!ensuite si tu veut pousser un peu plus tu pouras acheter des livre !!
autre site specialise plus cote design en css http://www.csszengarden.com/tr/francais/
RAD
le site d alsacreation est une reference reconnue pour le css et ces auteurs écrivent effectivement des livres !! mais tu dois pouvoir trouver ce que tu veut dans les tuto online du site !!ensuite si tu veut pousser un peu plus tu pouras acheter des livre !!
autre site specialise plus cote design en css http://www.csszengarden.com/tr/francais/
RAD
A oki merci à toi Rad zone, j'avait une question le menu avec des sous menu il faut pas mettre un script ? car le css je voix pas qu'estce qui fait la ^^
SI pour ce genre de menu il y as du javascript comme cela entre les head de ta page
et un comme celui ci devant les id menu
mais le css lui structure ta page donne les valeurs choisi (couleur taille ect ect )
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
et un comme celui ci devant les id menu
<dl>
<dt onmouseover="javascript:montre('smenu1');">
Menu 1
</dt>
<dd id="smenu1">
<ul>
<li>
<a href="#">Sous-Menu 1.1</a></li>
<li>
<a href="#">Sous-Menu 1.2</a></li>
<li>
<a href="#">Sous-Menu 1.3</a></li>
<li>
<a href="#">Sous-Menu 1.4</a></li>
<li>
<a href="#">Sous-Menu 1.5</a></li>
<li>
<a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
mais le css lui structure ta page donne les valeurs choisi (couleur taille ect ect )
voila un menu avec css externe ICI
PAGE HTML
et ici le fichier css nome dans cet exemple "menu.css"
tout est sur le fichier nomme" menu.css" dans ce cas et appelée par le lien dans les head par la ligne mis en gras
cela allège considérablement les pages html !! et pour les modification tu ne touche plus au html et tu peut applique le meme css a plusieurs pages ect ect ect
Si tu veus telecharger ce menu LA
RAD
PAGE HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" type="text/css" href="menu.css" />
<title></title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();">
<a href="#" title="Retour à l'accueil">Accueil</a>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">
Menu 1
</dt>
<dd id="smenu1">
<ul>
<li>
<a href="#">Sous-Menu 1.1</a></li>
<li>
<a href="#">Sous-Menu 1.2</a></li>
<li>
<a href="#">Sous-Menu 1.3</a></li>
<li>
<a href="#">Sous-Menu 1.4</a></li>
<li>
<a href="#">Sous-Menu 1.5</a></li>
<li>
<a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">
Menu 2
</dt>
<dd id="smenu2">
<ul>
<li>
<a href="#">Sous-Menu 2.1</a></li>
<li>
<a href="#">Sous-Menu 2.2</a></li>
<li>
<a href="#">Sous-Menu 2.3</a></li>
<li>
<a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">
Menu 3
</dt>
<dd id="smenu3">
<ul>
<li>
<a href="#">Sous-Menu 3.1</a></li>
<li>
<a href="#">Sous-Menu 3.2</a></li>
<li>
<a href="#">Sous-Menu 3.3</a></li>
<li>
<a href="#">Sous-Menu 3.4</a></li>
<li>
<a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">
Menu 4
</dt>
<dd id="smenu4">
<ul>
<li>
<a href="#">Sous-Menu 4.1</a></li>
<li>
<a href="#">Sous-Menu 4.2</a></li>
<li>
<a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
et ici le fichier css nome dans cet exemple "menu.css"
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a {
text-decoration: none;
color: black;
color: #222;
}
- comme tu peut voir il ni as aucune taille ou couleur ou position deffini sur le html!!
tout est sur le fichier nomme" menu.css" dans ce cas et appelée par le lien dans les head par la ligne mis en gras
cela allège considérablement les pages html !! et pour les modification tu ne touche plus au html et tu peut applique le meme css a plusieurs pages ect ect ect
Si tu veus telecharger ce menu LA
RAD