Navbar responsive Bootstrap : toggle ne fonctionne pas

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Navbar responsive Bootstrap : toggle ne fonctionne pas

    Bonjour,

    J'essaye depuis un moment de faire un menu avec Bootstrap, sur Joomla 3.1.5 (je travaille en local pour le moment).
    J'ai réussi à faire un menu fixed qui fonctionne correctement, sans être responsive.
    Concernant le problème du responsive : Lorsque je rétrécie la fenêtre de mon navigateur le bouton toggle apparait, mes liens se cachent, tout est donc normal jusque là.
    En revanche lorsque je clique sur mon bouton toggle qui devrait dérouler mon menu en dessous, rien ne se passe...
    Je ne sais pas si j'ai oublié quelque chose quelque part, j'ai pourtant regardé plusieurs tutoriels, je n'arrive pas à trouver.
    Mon menu se présente comme ceci :
    Code:
    [HTML]
    		<div class="navbar navbar-fixed-top">
    			<div class="navbar-inner">
    				<div class="container">
    
    					<div class="navbar-header">
    						<a class="btn btn-navbar navbar-toggle" data-target=".nav-collapse .navbar-responsive-collapse" data-toggle="collapse">
    					      <span class="icon-bar"></span>
    					      <span class="icon-bar"></span>
    					      <span class="icon-bar"></span>
    					    </a>
    					
    						<a class="brand" href="/black-whale/">
    							<img src="templates/mandarina-web-black-whale/images/black-whale-studio-tail-copyright.png" alt="Black Whale">
    						</a>
    					</div>
    
    					<div class="nav-collapse collapse topbtn navbar-responsive-collapse">
    						<jdoc:include type="modules" name="menu-navbar" style="none" />
    					</div>
    				</div>
    			</div>
    		</div>[/HTML]
    Dans mon template, dans index.php, j'ai appelé bootstrap de manière suivante :

    Code:
    [HTML]<?php
    	defined('_JEXEC') or die;
    
    	$doc = JFactory::getDocument();
    
    	JHtml::_('bootstrap.framework');
    
    	$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
    	$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
    
    ?>
    <!DOCTYPE html>
    <html>
    
    	<head>
    
    		<jdoc:include type="head" />
    
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    		<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
    		<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    
    	</head>[/HTML]
    Mon problème vient-il de l'appel de Bootstrap (et notamment de collapse), ou de la façon dont j'ai construit mon menu? (ou d'ailleurs?) A savoir que d'autre fonctionnalités de bootstrap fonctionnent correctement sur mon site (carrousel, row et span responsive, styles pour les boutons etc)

    Toute aide sera la bienvenue Merci beaucoup!
    Dernière édition par Clemandarina à 08/09/2013, 17h09

  • #2
    Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

    J'ai aussi quelques bug avec le template isis(admin et ma version virtuemart bootstrap. Par contre,pour moi le phénomène est aléatoire.
    Souvent le premier toggle fonctionne. Dans d'autre cas non.
    Je pensais que cela venais car j'ai implanté tous le css isis dans joomla 2.5 avec un namespace pour mon composant.
    Mais dans joomla 3.0 j' importe pas ces fichiers. donc ISIS de j3.1 devrait être correct. Mais l'erreur est la même.

    Pur ma part j'ai repris la structure du template isis pour le code HTML(menu et responsive design) en utilisant comme exemple com_content dans la plus part des cas pour le reste. mais bon le bug du toggle apparait aussi dans com_content. Donc je pense que tous sipmplement c'est un BUG de bootstrap. Mais dans quel condition? là je n'est pas regardé plus loin car dans mon cas c'est pas trop génant.
    http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
    http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

    Commentaire


    • #3
      Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

      @electrocity
      Sur quel support testes-tu (iPhone ? iPad ? une tablette Android ?
      Je n'arrive pas à répéter l'erreur toggle dans l'admin sur un iPhone.

      Il existe un petit plugin tres pratique pour injecter des css en back-end (et front, si nécessaire) sans se préoccuper des updates joomla.
      Hier stelle ich Ihnen mein Hobby, das CMS Joomla, vor. Neben Anleitungen auch Neuigkeiten zu den aktuellen Joomla Versionen.

      (en allemand, que je ne lis pas, donc j'ouvre l'url avec chrome et utilise la fonctionnalité traduction);

      @Clemandarina
      avec quel template testes-tu ?
      Je pense que le meilleur moyen de tester les fonctionnalités bootstrap est avec Beez 3, qui est entierement adapté à ce framework.
      Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

        Bonjour ghazal,
        Mes testes ce fond sur genimotion(surcouche virtualBox) pour avoir le rendu Android 4.1 tablet+phone ...
        Je fait aussi des teste android 2 sur un smartphone.
        Le bug est plus fréquent sur un ordinateur standard que sur les émulateurs ou smartphone, c'est pour cela que je précise que ce n'est pas vraiment un problème pour moi car le toggle n'ext que visible en dessous de 640px, donc il faut le faire volontairement.
        Comme dit plus haut, vu que c'est une interface d'administration et que le bug apparaît rarement sur smartphone , ce n'et pas trop un soucis.
        J'ai juste répondu à Clemandarina pour qu'il il a une chance que tous simplement sont menu n'est peut être pas en cause mais bootstrap.
        J'ai visité d'autre site avec des réponse similaire genre :
        I'm adapting Twitter's Bootstrap to my Ruby on Rails tutorial project (By Michael Hartl) and the upper navigation isn't collapsing. I'm currently getting this: My end goal is this: I've copied and

        et d'autres liens, qui ne donne pas de solution trés clair.
        Cela a l'air d'être au petit bonheur la chance...
        Salutation,
        Patrick
        http://www.st42.fr : Astuce et téléchargement d’extension Joomla! et virtuemart
        http://shop.st42.fr Catalogue extentions gratuit et Pro pour Virtuemart et Joomla

        Commentaire


        • #5
          Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

          Bonjour,

          Merci pour vos réponses
          Personnellement c'est peut-être un peu kamikaze mais je me suis lancée avec un template que j'ai créé moi-même... J'ai quasiment fini le site et en local tout fonctionne (pour le moment!) sauf le toggle du menu responsive.
          Du coup je vais peut-être tester un peu sur Beez3 ce que ca peut donner. En même temps si le problème vient directement de Bootstrap (comme le suggère electrocity), il faudra que je trouve une alternative (peut-etre une extension pour créer un menu?).

          Je creuserai ça prochainement et je vous dirai si jamais je trouve une solution.

          Commentaire


          • #6
            Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

            pourquoi ne pas recycler le fichier hide.js de beez 3? c'est ce fichier qui modifies le menu beez 3 selon la résolution......

            Commentaire


            • #7
              Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

              Belle idée! Je ne l'ai pas fait tout simplement par ignorance... Ca ne fait pas longtemps que je me suis mise à Joomla et je découvre encore beaaauucoup de choses! Je vais essayer mettre ça en place dès que j'ai un peu de temps devant moi. Merci beaucoup du conseil!

              Commentaire


              • #8
                Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                peut etre qu'en modifiant ceci
                <div class="nav-collapse collapse topbtn navbar-responsive-collapse">

                en ceci
                <div class="nav-collapse collapse navbar-responsive-collapse">

                Cela fonctionneras.

                Commentaire


                • #9
                  Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                  Envoyé par lefabdu51 Voir le message
                  peut etre qu'en modifiant ceci
                  <div class="nav-collapse collapse topbtn navbar-responsive-collapse">

                  en ceci
                  <div class="nav-collapse collapse navbar-responsive-collapse">

                  Cela fonctionneras.
                  Je viens de tester et cela ne fonctionne malheureusement pas...

                  Sinon j'ai essayé de recycler le fichier hide.js de beez 3, mais je me casse les dents dessus..
                  J'ai récupéré le fichier hide.js que j'ai mis dans le dossier js de mon template.
                  Je l'ai appelé dans index.php ainsi :
                  Code:
                  <?php
                   $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/hide.js', 'text/javascript');
                  ?>
                  (J'ai juste fait un copié collé de index.php de Beez3 en remplaçant javascript par js pour l'adapter à mon chemin)

                  Mais c'est après que ca se corse. J'ai l'impression que index.php de Beez3 appelle la position du module pour le menu sans l'inclure dans un div particulier : pas de class ou d'id en particulier. Dans le fichier d'origine il y a juste :
                  Code:
                  		<h2 class="unseen"><?php echo JText::_('TPL_BEEZ3_NAV_VIEW_SEARCH'); ?></h2>
                  		<h3 class="unseen"><?php echo JText::_('TPL_BEEZ3_NAVIGATION'); ?></h3>
                  		<jdoc:include type="modules" name="position-1" />
                  Du coup dans mon index.php j'ai tenté de supprimer les class bootstrap de mon menu, histoire de n'avoir plus que
                  Code:
                  <jdoc:include type="modules" name="menu-navbar" style="none" />
                  mais ensuite je ne sais pas trop comment continuer pour que mon menu se serve de hide.js... Je tourne un peu en rond à ce stade là...
                  Je dois sûrement manquer de logique ou de connaissances pour aller plus loin.. Est-ce très compliqué? Si ça l'est je finirai par me tourner vers une extension. Mais c'est vrai que le menu de Beez3 fait exactement ce que je recherche...

                  Merci d'avance pour les conseils!

                  Commentaire


                  • #10
                    Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                    Envoyé par Clemandarina Voir le message
                    mais ensuite je ne sais pas trop comment continuer pour que mon menu se serve de hide.js... Je tourne un peu en rond à ce stade là...
                    Je vais creuser vers les CSS, j'ai bien compris que c'est eux qui gèrent l'affichage selon la résolution, il faut juste que je me plonge bien dedans je crois.
                    Pas ce soir, mais très bientot et je vous tiens au courant

                    Commentaire


                    • #11
                      Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                      Bon... Concernant le hide.js de Beez3, ce n'est toujours pas ça, même en reprenant les éléments du CSS qui m'intéressent.
                      J'ai l'impresion que dans Beez3 tout est trop intriqué entre le template, le css et le javascript...

                      Du coup pour revenir à Bootstrap, est-ce que quelqu'un a une idée de comment l'appeler correctement dans un template Joomla? (mon pbm vient peut-être de là...) Genre une liste complète des éléments qu'on doit appeler pour que ce soit fonctionnel (est-ce que JHtml::_('bootstrap.framework'); suffit?) et dans quel ordre, etc. ? Bref, une petite documentation... ?

                      Je mettrai très prochainement le site sur un serveur distant, peut-être que certaines choses s'éclaireront d'elles-mêmes et sinon je posterai le lien ici au cas où...

                      Merci pour toutes vos pistes en tout cas! Je continue de chercher une solution, si un jour je trouve je la posterai ici

                      Commentaire


                      • #12
                        Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                        Salut,
                        * principe de base
                        toujours checker avec soin les templates de la distribution de base, dans ce cas beez3.
                        Tous les éléments nécessaires à un réglage de base y sont présents.

                        @ Clemandarina
                        Pour ton souci, et dans la mesure où ton template est une créa personnelle, je parierais que si tu ajoutes :
                        JHtml::_('bootstrap.loadCss', true);
                        au niveau des appels CSS (comme dans beez3), tu vas régler ton souci (ou du moins une partie).

                        PS : dans ton module Menu, essaie également de placer :
                        nav-pills nav-dropdown
                        - y compris l'espace devant nav-pills -
                        dans le Suffixe CSS de menu
                        Mais ceci dépend un peu de la manière dont ce que tu as paramétré ton index.php.
                        Le principe étant d'appliquer au container du menu les spécifications CSS de bootstrap.


                        Fais le test suivant avec beez3 :
                        * cherche :
                        /*
                        if (in_array($option, $bootstrap))
                        {
                        // Load optional rtl Bootstrap css and Bootstrap bugfixes
                        JHtml::_('bootstrap.loadCss', true, $this->direction);
                        }
                        */
                        commente ces lignes, comme je l'ai fait.

                        * Rajoute - au même endroit :
                        JHtml::_('bootstrap.loadCss', true);
                        Regarde la source, tu y verras, entre autres :
                        <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap.min.css" type="text/css" />
                        <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap-responsive.min.css" type="text/css" />
                        <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap-extended.css" type="text/css" />
                        qui sont les fichiers CSS nécessaires à bootstrap pour fonctionner normalement.

                        * Supprime (ou commente) la ligne
                        JHtml::_('bootstrap.loadCss', true);
                        Tous ces fichiers auront disparu.

                        NB : par défaut, dans n'importe quel template, le fichier JS
                        <script src="/xxx/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
                        est chargé.

                        NB IMPORTANT pour ceux qui consulteraient ce post :
                        Si votre template s'appuie sur un framework (gantry, yootheme, ou autre), les choses pourraient fonctionner différemment.

                        Voir cette discussion, post n°10

                        Mise en page d'articles avec Jetstrap


                        Hope it helps.
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                          Bonjour,

                          Je viens d'essayer d'ajouter JHtml::_('bootstrap.loadCss', true); dans index.php et nav-pills nav-dropdown dans le suffixe css du module de menu, mais cela ne change rien.
                          En fait mon index.php charge déjà

                          Code:
                          <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap.min.css" type="text/css" />
                          <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap-responsive.min.css" type="text/css" />
                          <link rel="stylesheet" href="/xxx/media/jui/css/bootstrap-extended.css" type="text/css" />
                          mais je l'avais appelé différemment :
                          Code:
                          <?php
                          	defined('_JEXEC') or die;
                          	$app = JFactory::getApplication();
                          	$doc = JFactory::getDocument();
                          
                          	JHtml::_('bootstrap.framework');
                          
                          	$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
                          	$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
                          	$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-extended.css');
                          	$doc->addScript($this->baseurl . '/media/jui/js/bootstrap.js');
                          
                          ?>
                          Le site est désormais en ligne si besoin (mais il n'est pas totalement terminé, notamment pour le contenu et quelques détails...) :


                          Merci pour ton aide et tes conseils (oui, j'aurai effectivement dû me pencher un peu plus sur Beez3 avant de me lancer...)

                          Commentaire


                          • #14
                            Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                            Salut,
                            tout est correct, mais vire cette ligne :
                            $doc->addScript($this->baseurl . '/media/jui/js/bootstrap.js');
                            car bootstrap est déjà chargé par défaut.
                            bootstrap.js et bootstrap.min.js, c'est la même chose, sauf que dans le 2e cas le script est compressé.

                            J'ai regardé de près sur ton site, tous les éléments sont corrects, mais le fichier hide.js fout le souk.
                            Supprime-le et teste.

                            NB1
                            JHtml::_('bootstrap.loadCss', true);
                            et
                            $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
                            $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
                            $doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-extended.css');
                            font la même chose.
                            Sauf que dans le 1er cas, c'est la nouvelle API joomla3.

                            NB2 :
                            nav-pills nav-dropdown
                            c'était une grosse bêtise de ma part. Sorry.

                            Au fait, joli site, bien conçu.
                            A part le toggle, tout à l'air de fonctionner nickel.
                            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                            Commentaire


                            • #15
                              Re : Navbar responsive Bootstrap : toggle ne fonctionne pas

                              Je viens de faire les modifs que tu m'as indiquées, merci beaucoup pour les tuyaux!

                              Je reviendrai sur le problème du Toggle plus tard, si jamais je ne trouve pas, je pense me tourner vers l'extension Maximenu Mobile CK.

                              C'est un peu dommage de devoir utiliser une extension pour une fonctionnalité que je devrais réussir à mettre en place avec ce qui se trouve nativement dans Joomla, mais bon... ça m'évitera de continuer à m'arracher les cheveux!

                              Merci beaucoup en tout cas!

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X