Personaliser sont propre menu en javascript ?

Fermé
raffaele - 15 juin 2007 à 18:20
RAD ZONE Messages postés 5227 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 13 juillet 2024 - 18 juin 2007 à 19:39
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
A voir également:

13 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
16 juin 2007 à 23:29
salut,

tout en un lien chez Alsacréations.
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
Utilise des calques visible ou invisibles ;)

Cours : http://www.cdprof.com/formation/formation_web9.php
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
17 juin 2007 à 19:55
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 ?
0
Scriptiz > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
17 juin 2007 à 20:12
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? :)
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
17 juin 2007 à 20:22
tu en est presque drôle !

mais à quoi sert d'ajouter un <div> ?
tu n'as pas suivi le lien ?
tu ne peux pas le faire avec une simple liste ?

je veux bien un exemple !!!
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
17 juin 2007 à 19:47
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).

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/
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, ... ... ... ^^
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
18 juin 2007 à 00:37
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 !
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
RAD ZONE Messages postés 5227 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 13 juillet 2024 1 355
18 juin 2007 à 18:48
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
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 ^^
RAD ZONE Messages postés 5227 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 13 juillet 2024 1 355
18 juin 2007 à 19:31
SI pour ce genre de menu il y as du javascript comme cela entre les head de ta page
<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 )
RAD ZONE Messages postés 5227 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 13 juillet 2024 1 355
18 juin 2007 à 19:39
voila un menu avec css externe ICI
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