Les Maitres Artisans Index du Forum
 
 
 
Les Maitres Artisans Index du ForumFAQRechercherS’enregistrerConnexion

Besoin d'un petit coup de main (jQuery & HTML)

 
Poster un nouveau sujet   Répondre au sujet    Les Maitres Artisans Index du Forum -> Auberge -> Général
Sujet précédent :: Sujet suivant  
Auteur Message
Rakdos
Membres actifs

Hors ligne

Inscrit le: 05 Juin 2012
Messages: 1 224
Localisation: Avignon
Masculin Vierge (24aoû-22sep)

MessagePosté le: Lun 12 Aoû - 16:49 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

Bijour les potos !

Ayant compris que dans les rangs des MA il y a des personnes maitrisant bien les outils web (jQuery dans mon cas), je me permet de vous demander conseils et éclaircissements =).

Voilà, je suis en train de faire un menu déroulant des plus "basique" sauf qu'une fois qu'on clique sur un des menu le sous-menu se déroule bien mais "pousse" aussi le texte situé en bas et déforme donc l'aspect global du site...
Savez-vous ce qu'il me manque ? Merci par avance !

<script type="text/javascript">
jQuery(document).ready(function() {
$(".menu_hori_liste ul.sous_menu").hide();

$(".menu_hori_liste li.menu_toggle span").each(function() {
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" class="'+TexteSpan+'"><\/a>') ;
});

$(".menu_hori_liste li.menu_toggle > a").click(function() {
if ($(this).next("ul.sous_menu:visible").length != 0) {
$(this).next("ul.sous_menu").slideUp("normal");
}
else {
$(".menu_hori_liste ul.sous_menu").slideUp("normal");
$(this).next("ul.sous_menu").slideDown("normal");
}
return false;
});
});
</script>
<ul class="menu_hori_liste">
<li>
index.php
</li>
<li class="menu_toggle"><span>entreprise</span>
<ul class="sous_menu">
<li>index.php?page=ent_historique</li>
<li>index.php?page=ent_partenaires</li>
<li>index.php?page=ent_presentation</li>
</ul>
</li>
<li class="menu_toggle"><span>G1</span>
<ul class="sous_menu">
<li>index.php?page=g1_modeles</li>
<li>index.php?page=g1_specif</li>
<li>index.php?page=g1_homolog</li>
<li>index.php?page=g1_kit_80</li>
<li>index.php?page=sav</li>
</ul>
</li>
<li class="menu_toggle"><span>galerie</span>
<ul class="sous_menu">
<li>index.php?page=gal_atelier</li>
<li>index.php?page=gal_aeronef</li>
<li>index.php?page=gal_videos</li>
</ul>
</li>
<li class="menu_toggle"><span>boutique</span>
<ul class="sous_menu">
<li>boutique/</li>
<li>index.php?page=bout_occaz</li>
<li>index.php?page=sav</li>
</ul>
</li>
<li>
index.php?page=contact
</li>
</ul>


Merci par avance ^^.

PS: Connaissant mal jQuery je n'ai rien trouvé sur le net pour "expliquer" le problème que je rencontre XD.
PPS: Désolé des balises de lien, mais bon c'est xooit Smile... En plus j'ai "désactiver le HTML dans ce message", bref...
-------------------
Requiem aeternam dona eis, Domine, et lux perpetua luceat eis. In memoria aeterna erit justus: ab auditione mala non timebit.
Revenir en haut
Visiter le site web du posteur
Publicité






MessagePosté le: Lun 12 Aoû - 16:49 (2013)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Forthric
Membres hors confrérie

Hors ligne

Inscrit le: 28 Avr 2011
Messages: 350
Localisation: Somewhere in Belgium
Masculin Gémeaux (21mai-20juin)

MessagePosté le: Lun 12 Aoû - 22:31 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

En l'état actuel, ton code cache ou affiche les lignes de sous-menu.
Il me semble logique qu'un sous-menu avec 10 lignes prenne plus de place à l'écran qu'un sous-menu avec 3 lignes

Ton problème n'est donc pas d'après ce que j'en comprends un problème de JQuery mais de CSS

Essaye de mettre ceci dans la section <head> de ton document

<style >
    .sous_menu {
        position:absolute; /* Change le positionnement du bloc */
        left:80px;         /* Décalage à gauche */
        padding:3px;       /* Pour éviter de coller les bords au texte */
        width:220px;       /* Largeur d'affichage du sous-menu */
        background:white;  /* Pour éviter l'effet de transparence */
        list-style-type:none; /* supprime l'affreuse marque de liste */
        border:solid black 1px; /* Bordure basique */
    }
</style>

Ce code CSS va modifier tes éléments de sous-menu pour qu'ils s'affichent par dessus les autres éléments, sans décaler les lignes.

Pour la mise en page, le CSS c'est bon, mangez-en.
-------------------
Être moche n'est pas un handicap, c'est un style de vie.
Revenir en haut
Rakdos
Membres actifs

Hors ligne

Inscrit le: 05 Juin 2012
Messages: 1 224
Localisation: Avignon
Masculin Vierge (24aoû-22sep)

MessagePosté le: Lun 12 Aoû - 23:31 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

Merci ! Le problème semble être résolu.

Seul problème maintenant c'est que je n'ai pas qu'un seul sous-menu et mettant ça en position absolute je dois donner la bonne position en x et y pour chaque menu. T'aurais une astuce pour régler ça stp ? Merci Forthric super content ! !

Les sentinelles c'est cheat, mangez-en XD !
-------------------
Requiem aeternam dona eis, Domine, et lux perpetua luceat eis. In memoria aeterna erit justus: ab auditione mala non timebit.
Revenir en haut
Visiter le site web du posteur
Rakdos
Membres actifs

Hors ligne

Inscrit le: 05 Juin 2012
Messages: 1 224
Localisation: Avignon
Masculin Vierge (24aoû-22sep)

MessagePosté le: Lun 12 Aoû - 23:41 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

Réglé en fait, merci ^^.

J'ai juste modifié ton CSS pour que ça colle avec ma mise en page, easy en fait super content !.

<style>
.menu_hori_liste li ul { /* équivalent au ".sous-menu" */
width: 180px;
position: absolute;
z-index: 10;
}
</style>

Merci beaucoup Forthric pour ton aide, je t'aime yeah !
-------------------
Requiem aeternam dona eis, Domine, et lux perpetua luceat eis. In memoria aeterna erit justus: ab auditione mala non timebit.
Revenir en haut
Visiter le site web du posteur
Forthric
Membres hors confrérie

Hors ligne

Inscrit le: 28 Avr 2011
Messages: 350
Localisation: Somewhere in Belgium
Masculin Gémeaux (21mai-20juin)

MessagePosté le: Mar 13 Aoû - 09:39 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

Rakdos a écrit:
Merci beaucoup Forthric pour ton aide, je t'aime yeah !
J'te préviens, tu mets la langue, t'en prends une !
-------------------
Être moche n'est pas un handicap, c'est un style de vie.
Revenir en haut
Rakdos
Membres actifs

Hors ligne

Inscrit le: 05 Juin 2012
Messages: 1 224
Localisation: Avignon
Masculin Vierge (24aoû-22sep)

MessagePosté le: Mar 13 Aoû - 11:43 (2013)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML) Répondre en citant

J'ai un bout de cornichon, t'en veux un bout ? Mais faudra me le rendre super content !.
-------------------
Requiem aeternam dona eis, Domine, et lux perpetua luceat eis. In memoria aeterna erit justus: ab auditione mala non timebit.
Revenir en haut
Visiter le site web du posteur
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 20:47 (2017)    Sujet du message: Besoin d'un petit coup de main (jQuery & HTML)

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Les Maitres Artisans Index du Forum -> Auberge -> Général Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  

Portail | Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation