Personaliser sont propre menu en javascript ?

Fermé

raffaele - 15 juin 2007 à 18:20
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 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:

Personaliser sont propre menu en javascript ?
Menu déroulant excel - Guide
Telecharger javascript - Télécharger - Langages
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

13 réponses

Réponse 1 / 13

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

salut,

tout en un lien chez Alsacréations.

Réponse 2 / 13

raffaele
17 juin 2007 à 18:33

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

Réponse 3 / 13

Scriptiz
17 juin 2007 à 18:57

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 920
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 ?

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? :)

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > 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 !!!

Réponse 4 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
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

Réponse 5 / 13

Scriptiz
17 juin 2007 à 20:30

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/

Réponse 6 / 13

Scriptiz
17 juin 2007 à 20:32

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, ... ... ... ^^

Réponse 7 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
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 !

Réponse 8 / 13

raffaele
18 juin 2007 à 12:04

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

Réponse 9 / 13

raffaele
18 juin 2007 à 15:59

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

Réponse 10 / 13

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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

Réponse 11 / 13

raffaele
18 juin 2007 à 18:54

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 ^^

Réponse 12 / 13

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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 )

Réponse 13 / 13

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
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

Discussions similaires

les entrées et les sortées

mon ordi marque press the esc key for startup menu

Javascript Arrondi à 2 chiffres après la virgule

Accéder au menu Advanced Bios PC portable HP

Discussions similaires

Newsletters