Probleme Jaquery Accordion

Par bartangel007, il y a 12 ans


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:

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, il y a 12 ans

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

bartangel007, il y a 12 ans

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.

Vallyan, il y a 12 ans

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 ?

bartangel007, il y a 12 ans

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.

Vallyan, il y a 12 ans
  • 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 ?

bartangel007, il y a 12 ans

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

Vallyan, il y a 12 ans

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.

Vallyan, il y a 12 ans

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
bartangel007, il y a 12 ans

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

Vallyan, il y a 12 ans

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;
}