IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu deroulant avec sous-menu (CMS)


Sujet :

CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2015
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2015
    Messages : 6
    Points : 13
    Points
    13
    Par défaut Menu deroulant avec sous-menu (CMS)
    Bonjour a tous,

    j'ai crée un menu déroulant pour un site web.
    Quand je clique sur un sous menu il apparait bien mais ne fait pas descendre le reste du menu.
    Je travail avec un cms, donc je ne peut pas acceder au menu de navigation.
    Comment je peut faire svp ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    #topmenu
    	{
    		margin-left: -10px;
    		width: 292px !important;
    		height: 30px !important;
    		background: #1265A9;
    	}
    	#menu {
    		margin: 0;
    		padding: 0;
    		margin-top: -5px;
    		width: 280px;
    		list-style: none;
    		font-weight: bold;
    		color: #126	5A9;
    		width: 200px;
    	}
    	#menu a, #menu span {
    		display: block;
    		padding: 4px 10px;
    		text-decoration: none !important;
    	}
    	#menu a:hover, #menu a:focus, #menu a:active {
    		text-decoration: underline;
    	}
    	#menu .small {
    		font-size: .8em;
    		font-size: .9em;
    		margin: 0;
    		padding: 0;
    	}
    	#menu ul.small a {
    		background: none;
    		padding: 3px 20px;
    	}
    et le code jQuery
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    jQuery(document).ready( function () {
    	if (window.matchMedia("(max-width: 768px)").matches) {
        jQuery(".navigation ul.small:not('.open_at_load')").hide();
        jQuery(".navigation li.deeper span").each( function () {
            var TexteSpan = jQuery(this).text();
            jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
        } ) ;
        jQuery(".navigation li.deeper > a").click( function () {
            if (jQuery(this).next("ul.small:visible").length != 0) {
                jQuery(this).next("ul.small").slideUp("normal");
            }
    		else {
    			jQuery(".navigation ul.small").slideUp("normal");
                jQuery(this).next("ul.small").slideDown("normal");
            }
            return false;
        });
    	}
     
    } ) ;

    comme je travaille en local je ne peut pas vous donner le lien mais j'ai une petite video qui montre le probleme :https://www.youtube.com/watch?v=R8AC...ature=youtu.be
    Merci d'avance

  2. #2
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Bonjour,
    Citation Envoyé par apparence Voir le message
    Je travail avec un cms, donc je ne peut pas acceder au menu de navigation.
    Comment je peut faire svp ?
    Tu peux déjà commencer par nous fournir la structure HTML de ton menu de navigation ( en appuyant sur F12 par exemple).
    Cordialement.
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2015
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2015
    Messages : 6
    Points : 13
    Points
    13
    Par défaut
    Désole de la reponse tardive mais voila je code html du site

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <ul class="nav menu jmoddiv" data-jmodediturl="http://localhost/Jordan/index.php?option=com_config&amp;controller=config.display.modules&amp;id=1&amp;return=aHR0cDovL2xvY2FsaG9zdC9Kb3JkYW4vaW5kZXgucGhw" data-target="_self" data-jmodtip="<strong>Modifier le module</strong><br />Menu principal<br />Position: position-1" id="menu">
    <li class="item-119 current active deeper parent"><a href="/Jordan/index.php">Acceuil</a>
    <ul style="display: none;" class="nav-child unstyled small">
    <li class="item-141"><a href="/Jordan/index.php/acceuil/lol">lol</a></li>
    </ul></li>
    <li class="item-140 deeper parent"><a title="afficher le sous menu" href="#">article</a>
    <ul style="display: none;" class="nav-child unstyled small">
    <li class="item-114"><a class="dropdown-menu" href="/Jordan/index.php/article/articles">articles</a></li>
    <li class="item-128"><a href="/Jordan/index.php/article/manipulation">Manipulation</a></li>
    <li class="item-129"><a href="/Jordan/index.php/article/pnl-et-secte">PNL et secte</a></li>
    <li class="item-130 deeper parent"><a href="/Jordan/index.php/article/entreprise">Entreprise</a>
    <ul style="display: none;" class="nav-child unstyled small"><li class="item-134"><a href="/Jordan/index.php/article/entreprise/dededededed">dededededed</a></li>
    <li class="item-135"><a href="/Jordan/index.php/article/entreprise/adadadadadad">adadadadadad</a></li>
    </ul>
    </li>
    <li class="item-131"><a href="/Jordan/index.php/article/sante">sante</a></li>
    <li class="item-132"><a href="/Jordan/index.php/article/therapie">therapie</a></li>
    <li class="item-133"><a href="/Jordan/index.php/article/dev-personnel">Dev Personnel</a></li>
    </ul></li>
    <li class="item-137 deeper parent"><a title="afficher le sous menu" href="#">La PNLs</a>
    <ul style="display: none;" class="nav-child unstyled small">
    <li class="item-102"><a class="dropdown-menu" href="/Jordan/index.php/la-pnls/suite">La PNL</a></li>
    <li class="item-112"><a class="dropdown-menu-child" href="/Jordan/index.php/la-pnls/lol">Definition</a></li>
    <li class="item-106"><a class="dropdown-menu-child" href="/Jordan/index.php/la-pnls/la-pnl">origine</a></li>
    <li class="item-120"><a href="/Jordan/index.php/la-pnls/faq">FAQ</a></li>
    <li class="item-121"><a href="/Jordan/index.php/la-pnls/la-pnl-pro">La PNL pro</a></li></ul></li><li class="item-138 deeper parent"><a title="afficher le sous menu" href="#">Formation</a>
    <ul style="display: none;" class="nav-child unstyled small">
    <li class="item-103"><a class="dropdown-menu" href="/Jordan/index.php/formation/fin">Formations</a></li>
    <li class="item-107"><a class="dropdown-menu-child" href="/Jordan/index.php/formation/ressources">Decouverte</a></li>
    <li class="item-108"><a class="dropdown-menu" href="/Jordan/index.php/formation/dexu">Technicien</a></li>
    <li class="item-122"><a href="/Jordan/index.php/formation/praticien">praticien</a></li>
    <li class="item-123"><a href="/Jordan/index.php/formation/maitre-patricien">MAitre patricien</a></li>
    </ul></li>
    <li class="item-139 deeper parent"><a title="afficher le sous menu" href="#">Ressource</a>
    <ul style="display: none;" class="nav-child unstyled small">
    <li class="item-113"><a class="dropdown-menu" href="/Jordan/index.php/ressource/ressources">Ressources</a></li>
    <li class="item-124"><a href="/Jordan/index.php/ressource/bibliographie">bibliographie</a></li>
    <li class="item-125"><a href="/Jordan/index.php/ressource/mail-list">mail-list</a></li><li class="item-126"><a href="/Jordan/index.php/ressource/humour">humour</a></li>
    <li class="item-127"><a href="/Jordan/index.php/ressource/video">Video</a></li>
    </ul></li>
    <li class="item-115"><a class="dropdown-menu" href="/Jordan/index.php/hypnose">hypnose</a></li><li class="item-109"><a class="dropdown-menu" href="/Jordan/index.php/contact">contact</a>
    </li></ul>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probléme position menu deroulant ?
    Par jesslegende dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 18/02/2010, 20h26
  2. Problème avec un menu deroulant horizontal
    Par samsso2006 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/10/2009, 22h12
  3. Problème d'espacement dans un menu deroulant sur IE
    Par gunth dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 03/09/2007, 18h28
  4. Problème de background dans un menu deroulant css
    Par lethyss dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 27/04/2007, 17h09
  5. JAVASCRIPT : problème de menu deroulant
    Par jakkihm dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/11/2006, 19h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo