Bonsoir, jai un gros problème avec mon Jquery Accordion pour créer un sub menu vertical.

Esthétiquement il est parfait, c'est exactement ce que je voulais mais il y a quelques gros problèmes:

  • je ne comprend pas pourquoi je ne peux pas changer les #one #two ... (parceque bon, dans la barre d'adresse ça fait dégueulasse et en plus je peux pas mettre page.html a la place).

Code:

<div id="navigation">

<div id="wrapper">
<ul class="ac-menu">

<li id="one">
<a href="#one">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a id="fancybox-manual-a" href="javascript:;">FASHION</a></li>
<li><a id="fancybox-manual-b" href="javascript:;">ARCHITECTURE</a></li>
<li><a id="fancybox-manual-e" href="javascript:;">REPORTAGES & CORPORATES</a></li>
<li><a id="fancybox-manual-f" href="javascript:;">ADVERTISING</a></li>
</ul>
</li>
<li id="two">
<a href="#two">PERSONNAL SERIES</a>
<ul class="sub-menu2">
<li><a id="fancybox-manual-c" href="javascript:;">ANALOGIC</a></li>
<li><a id="fancybox-manual-d" href="javascript:;">HEAD</a></li>
</ul>
</li>
<li id="three">
<a href="retouche.html">DIGITAL RETOUCH</a>
<li id="four">
<a href="film.html">FILM</a>
<li id="five">
<a href="biography.html">BIOGRAPHY</a>
<li id="six">
<a href="contact.html">CONTACT</a>
</ul>

</div><!--end accordian-->
</div><!--end wrapper-->
</div>

Si vous avez une solution, Merci.

10 réponses


Vallyan
Réponse acceptée

Je pige pas ... 1/ Ajoute les tags [code] de part et d'autre de ton code, ca sera plus clair déja, stp. 2/ Ensuite si tu cliques sur ta rubrique PHOTOGRAPHY, tu veux que l'accordéon s'anime, non ? ou tu veux charger une nouvelle page ?

Si tu changes #one en #kiki, alors le id="one" du li doit être changé en id="kiki"

oué enfin moi je veux mettre l'adresse de la page qui est photography.html

donc je fais ca ?

<li id="photography.html">
<a href="#photography.html">PHOTOGRAPHY</a>

ce qui me redirige pas dutout vers la page ducoup mes galleries fancy se superposent.

enfaite le probleme c'est que jai divers pages

HOME a une photo et du texte

Mais les deux premiers menus PHOTOGRAPHY et PERSONNAL n'étant pas des pages.html sont donc transparentes et laissent mes galeries fancybox en superposition sur Home et c'est pas bon dutout.

Deuxième problème, bin toujours ce problème de barre d'adresse qui fait dégeu genre file:///Users/Florian/Desktop/Site/photography.html#photography.html
Mais bon je pense que je vais bloquer la visibilité à nomdedomaine.com sur tout le site.

Désolé c'est mon premier site =) et merci de prendre du temps pour moi.

  • Pour le truc du # a la fin de l'url, trouve la fonction qui écoute le clique sur ton lien et ajoute event.preventDefault() (ou e.preventDefault() ... suivant le nom de la variable passé en paramètre a ton listener) au début de la fonction.

  • Pour ton soucis sur tes trucs fancybox ... sans voir vraiment ton soucis pour mieux le comprendre et tenter de le débugger ca me parait comprimis malheureusement. Tu n'as pas une version en ligne ?

Je t'ai fais ca pour que tu vois ce que je te disais.

https://dl.dropboxusercontent.com/u/96028030/Site/index.html

Bon ca rame un max mais bon. Les catégories sous menus de photographie n'ayant pas de base blanche neutre vu que la page photography.html n'existe pas, elles se superposent sur home.html

On y voit deja un peu plus clair ...

Déja pour ton pb de superposition, un fond noir (ou autre) en arrière de tes images devrait résoudre le pb. Rajoute le css suivant sur ton site:

.fancybox-overlay-fixed{
    background-color: rgba(0,0,0,0.95) !important;
}

Je te laisse jouer avec la couleur / opacité pour avoir l'effet que tu recherches.

Pour ton pb de # il n'y a pas de réponse simple sans creuser dams le code de jQuery (je croyais que tu utilisais un petit plugin simple, mais en fait non).
Je te suggère de remplacer #one et #two par #photography et #personnalSeries, et tes url ne seront pas si laides ^^. Si tu change le href, n'oublie pas de changer les id des targets pour que ca match toujours.

Bon par contre il faut que je te dise:

  • la structure de ton site manque pas mal de cohérence. Le fait que l'ensemble de ta page soit dans une div #navigation, déja ... et puis du coup lorsque tu déplies ton menu, l'image de gauche descend, ce qui surprend
  • Tu dois avoir aussi un pb d'encodage parce que j'ai des caractères chinois qui apparaissent a la place de tes accents

oki cool bon déjà l'arrière plan de la fancy est blanc mais esque c'est possible de garder genre les 200 pixels de gauche transparent pour qu'on puisse interagir avec le menu ?

Sinon pour l'incohérence j'y travaillerai. Pour l'encodage, c'est le dropbox qui change des trucs, sur dreamweaver c'est cool.

Merci beaucoup en tout cas Vallyan

pas de pb.

Pour ton menu a gauche, modifie le css que je t'ai donné pour ajouter une regle:

.fancybox-overlay-fixed{
    background-color: rgba(0,0,0,0.95) !important;
    left: 300px !important;
}