18041 sujets

Questions générales et questions de débutants

Menu accordeon: mes images ne s'affiche pas !!!

J'ai suivis avec précision votre tuto concernant le menu accordéon , mais voila après avoir intégrer mes balises comme indiqué, les images (de l'exemple) ne s'affiche pas !

PS: j'ai rien changé un balisage donné sur votre tuto donc ne comprend pas pourquoi elle ne s'affiche plus.

Si non j'aurais aimé savoir comment faire en sorte pour que le menu se déroule lors d'un survole ?

Merci a tous Smiley lol Smiley ohwell
Modifié par worms30 (13 Apr 2008 - 12:22)
Bonjour,

Merci de corriger le titre de ton sujet pour quelque chose de compréhensible et reflétant ton problème ou ta question.
Bonjour,

pour bien faire, il faudrait nous donner une page en ligne ... difficile de donner un coup de main sans informations supplémentaires.
Voila l'image,

Su celle ci vous pouvais voir mon problem d'affichage de menu qui apparait n noir au lieu d'afficher les image comme il devrait !!! Autrement j'aimerais placer mon bloc paragraphe ci dessous au meme niveau que le menu accordéon comment faire SVP.

voici un extrait du contenu de ma page : 
<DIV CLASS="header"><P></P>

	<DIV CLASS="navbarre"><!-- MENU VERTICAL-->
		<A CLASS="zone1" HREF="/accueil.html" onMouseOver="self.status='';return true;" title="Accueil">Accueil</A>
		<A CLASS="zone2" HREF="http://www.emu-forum.com/" onMouseOver="self.status='';return true;" title="Forum">Forum</A>
		<A CLASS="zone3" HREF="http://www.emu-forum.com/index.php?showtopic=732" title="Livre d'or">Livre d'or</A>
		<A CLASS="zone4" HREF="/liens.html" title="Liens">Contact</A>
		<A CLASS="zone5" HREF="/contact.html" title="Contact">Connexion</A>
	</DIV><!-- FIN MENU VERTICALE-->
	<ul class="navigation">
    <li><a href="#" title="Aller à la page 1">Item 1</a></li>

    <li class="toggleSubMenu"><span>Item 2</span>
        <ul class="subMenu">
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>

            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>

        </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
        <ul class="subMenu">

            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>

        </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Item 4</a></li>

</ul>    
</DIV>
<!-- BANNIERE ET TITRE-->

<DIV CLASS="menu"><!--MENU HORIZONTAL--></DIV><!--FIN MENU HORIZONTAL-->
<DIV class="block">
<DIV class="headersous">
<H1></H1>
<h2></h2>

<P></P>

<P></P>

   <P><STRONG></STRONG></P></DIV>
  </DIV>
</div>
<DIV class="block2">


Je sais pas si c'est bon comme ça ou si il faut changer quelques trucs... n'hésitez pas a me dire je suis tout ouïe Smiley lol

Merci a tous upload/16347-Sanstitre.JPG
Modifié par worms30 (15 Apr 2008 - 20:59)
Ca va être difficile de t'aider sans le fichier css...
Pour les images, es-tu sûr qu'elles portent le même nom, ou que tu ne les as pas mis dans un répertoire ? Auquel cas il faut changer l'url des "background-image" dans ton fichier css.
Et lorsque tu parles de même niveau, c'est simplement aligner le premier menu sur la gauche ou autre chose ?
glups... Smiley confus Comprend pourquoi ce probleme mais enfin , c'est rectifié. Cela venait bien du chemin . pour cela il à fallu que j'ajhoute à chacun de mes liens css "../images" alors qu'au départ mes images était bien dans le dossier source. Bref problèm résolu!!! Smiley lol

Merci a tous .

Autrement je n'arrive pas à alligner mon div block vers à hauteur du menu déroulant soit tout les deux en dessous de ma navbarre.

pour vous aider voici mon css:

.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      background: #000;
      color: #fff;
      width: 200px;
      font: 1.2em "Trebuchet MS", sans-serif;
      }
   .navigation a, .navigation span {
      display: block;
      padding: 4px 10px;
      color: #fff;
      text-decoration: none;
      background: #000 url(../images/menu-item.png) left bottom no-repeat;
      }
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
      background-image: url(../images/menu-item-deroule.png);
      }
   .navigation .open a, .navigation .open span {
      background-image: url(../images/menu-item-enroule.png);
      }
   .navigation a:hover, .navigation a:focus, .navigation a:active {
      text-decoration: underline;
      }
   .navigation .subMenu {
      font-size: .8em;
      background: #ccc url(../images/subMenu.png) 0 0 repeat-x;
      font-size: .9em;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #666;
      }
   .navigation ul.subMenu a {
      background: none;
      padding: 3px 20px;
      }

body {
background: url(../images/font210.png);
}
.navbarre {
background: url(../images/ban2.png)repeat-x;
font-size:18px;
text-align: center;
}
h1 {
color:#CC3300;
margin: 20px;
font-size:24px;
}
h2 {
color:#CC6600;
margin: 20px;
font-size:18px;
}
p {
margin: 5px 50px 5px 50px;
color:#333333;
}
.block {
background-color:#FFFFFF;
margin: 5px 50px 5px 220px;
}
.block2 {
background-color:#FFFFFF;
margin: 5px 50px 5px 220px;
}
.block3 {
background-color:#FFFFFF;
margin: 5px 50px 5px 220px;
}
.headersous {
background: url(../images/ban2.png)repeat-x;
}


Merci encore à vous Smiley cligne
Salut,

pour ce qui est du problème du chemin, il ne faut pas oublier qu'on doit renseigner dans la feuille de style le chemin des images par rapport au fichier CSS, et non par rapport au fichier HTML Smiley cligne
Désolé pour le retard mais j'avais pas beaucoup de temps ces jours ci... Donc j'ai bien n'éssayer d'y comprendre quelques chose mais j'avoue que pour un novice absolu et de l'anglais ça ne me facilite pas la tache... En tout cas merci quand meme j'y reviendrais une prochaine fois une fois l'essentiel de mon site terminé...

Le fin du fin serrait le tuto façon recette à mémé Smiley lol Mais, c'est vrai que ça n'apporte rien!!! Smiley cligne

Qui sais peut être qu'apres quelques mois à construire mon site je serrais suffisamment alaise pour me lancer dans un menu accordeon horizontaux et verticaux . Je me contenterais de mon jolie menu vertical sur e coup.

Par contre si quelqu'un pouvais me dire si il est possible de personnaliser l'ouverture de mon menu en accélérant ou ralentissant la vitesse d'ouverture des tiroirs ?

J'ai une dernière question concernant la personnalisation du menu:

Voila j'ai essayé de découper un image en plusieurs bandes et placer chacune d'elle sur mon menu se qui rend plutôt pas mal mais je ne sais pas comment faire pour faire en sorte à se que l'on donne un effet d'agrandissement lors de l'ouverture des tiroir . Pourriez vous m conseiller ?

Merci encore Smiley smile
Salut,

tu peux contrôller la vitesse d'ouverture des sous-menus avec l'argument passé à slideDown() : 
slideDown('normal')
Il suffit de remplacer 'normal' par la valeur que tu veux utiliser. Les valeurs acceptées sont (de mémoire) 'normal', 'slow' et 'fast', ou un entier qui représente le temps d'exécution de l'effet en millisecondes ...

Idem pour la fermeture, il suffit de modifier l'argument de slideUp().
Merci pour votre rapidité, génial enfin un site en français qui décrit les fonctions JQuery. Par contre ne sais pas si ça existe mais j'aimerais lancer mon menu depuis le bas de ma page vers le haut à l'inverse de celui que propose le tutoriel alsacréation. et si possible l'ouvrir au survol du curseur .

Est réalisable ça ?

Merci à tous,

PS: Thomas, c'est impressionnant de voir ça, comment fait tu pour être aussi callé!!! C'est vrai tu est partout sur le fofo Smiley lol
Modifié par worms30 (25 Apr 2008 - 14:42)
a écrit :
PS: Thomas, c'est impressionnant de voir ça, comment fait tu pour être aussi callé!!! C'est vrai tu est partout sur le fofo Smiley lol

Moi calé en JS ? Raconte ça à Koala64 et Julien Royer (entre autres) ! Smiley lol

Blague à part, à force de bosser avec js, css, php, etc., ça finit bien par rentrer un peu dans la caboche Smiley cligne

Pour ce qui est de lancer le menu "vers le haut", il faut que tu changes le positionnement du menu (probablement en le mettant en absolu en bas de ton conteneur de référence ...)
A chacun c'est connaissance... C'est vrai que l'aplication web à un coté vraiment attrayant. Depuis que j'ai commencé mon site je n'arrete pas de trouver des petits trucs pour le rendre plus agréable et pratique possible. Ce qui est génial c'est de voir qu'un petit code à la ... modifie l'affichage de l'image , d'un texte ou autres. Meme si des fois une peut têtu comme cette fichu visionneuse de fichier pdf "scibd" que j'essai de centrer sur mon bloc mais rien y fait ... j'y arriverais Smiley lol tout fois si quelqu'un utilise ce type de visonneuse ou un autre je suis pas contre ... Smiley cligne

Pour revenir à mon menu, je voulais parlais non pas du positionnement du menu sur mes pages mais bien du sens d'ouverture qui actuelement par defaut s'ouvre de haut en bas, j'aimerais qu'il s'ouvre du bas vers le haut.

Désolé Thomas mais ne voie pas comment le positionnement de mon menu à l'aide de la fonction absolut modifirer son sens d'ouverture.

J'ai deja vue ça pour des menus déroulants du genre placé dans le fooder mais pas encore pour les menu accordéon.

Voici c'est que j'ai trouvé comme exemple de survol, mais ne sais pas comment l'applique tant sur ma feuille de style que sur ma page html

With options, container is a definition list, header dt, content dd
Code

jQuery('#list2').accordion({ 
    event: 'mouseover', 
    active: '.selected', 
    selectedClass: 'active', 
    animated: "bounceslide", 
    header: "dt" 
}).bind("change.ui-accordion", function(event, ui) { 
    jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log'); 
});

Exemple provenant de ce site : http://jquery.bassistance.de/accordion/demo/?p=1.1.1
Sujet clos
Aller à