[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : [Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas (/thread-3585.html)

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Joey0007 - 05/09/2015

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.12
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.12.1
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.7
#~ MicroTiny: 1.2.9
#~ ModuleManager: 1.5.8
#~ News: 2.15.2
#~ Search: 1.7.13
#~ ThemeManager: 1.1.8
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 2000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.4.31
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 30
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: D:/DRIVE-REPTIKA/REPTIKA/Developpements/Uwamp/bin/apache/sessions (0555)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.20
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Je viens d'installer cmsms 1.12. Voulant utiliser Bootstrap (version 3.3.5) afin d'avoir un site "responsive.
J'ai créé un nouveau gabarit de menu sur base d'une source venant de ce site :

elgatodesign.com rubrique blog

Résultat :

- Mon site s'affiche correctement
- Mon menu déroulants'affiche correctement

Problème :

- Afin de tester si mon boostrat fonctionne bien, j'ai réduit la fenêtre de mon navigateur ("chrome"). Le bouton "Toggle button" apparaît mais lorsque je clique dessus, mon menu n'apparaît pas.

Voici le code de mon gabarit de menu :

Code :
[== Indéfini ==]

{strip}

{if $count > 0}

<div class='navbar-collapse collapse'>

    <ul class='nav navbar-nav' role='menu'>

    {* if using cmsms lower then 1.11 change foreach below to {foreach from=$nodelist item='node'} *}

    {foreach $nodelist as $node} 

        {* if depth is greater then previous we need ul *}

        {if $node->depth > $node->prevdepth}

            {repeat string="<ul class='dropdown-menu' role='menu'>" times=$node->depth-$node->prevdepth}   

        {* if depth is lower then we have to close unordered list *}

        {elseif $node->depth < $node->prevdepth}

            {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}

            </li>

        {elseif $node->index > 0}

            </li>

        {/if}

        {* is menu item current? *}

        {if $node->current == true}

            <li class='active{if $node->parent == true || $node->haschildren == true}{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown-toggle {$node->alias}' data-toggle='dropdown' data-target='#'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        

        {* is menu item parent and not sectionheader? *}

        {elseif $node->parent == true && ($node->type != 'sectionheader' && $node->type != 'separator')}

            <li class='{if $node->parent == true || $node->haschildren == true} active{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>

                <a href='{$node->url}' data-toggle='dropdown' data-target='#' class='dropdown-toggle active {$node->alias}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        

        {* is menu item a sectionheader? *}

        {elseif $node->type == 'sectionheader' && ($node->parent == true || $node->haschildren == true)}

            <li class='sectionheader {if $node->depth > 1} dropdown-submenu{else} dropdown{/if}'>

                <a href='#' data-toggle='dropdown' role="button" class='dropdown-toggle {$node->alias}{if $node->current == true} active{/if}'>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {* and sectionheader has no children? *}

        {elseif $node->type == 'sectionheader' && $node->haschildren == false}

            <li class='sectionheader nav-header'>

                {$node->menutext}             

        {* should a menu item be separated? *} 

        {elseif $node->type == 'separator'}

            <li class='divider'>

        {else}

            <li{if $node->parent == true || $node->haschildren == true} class='{if $node->depth > 1}dropdown-submenu{else}dropdown{/if}'{/if}>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown {$node->alias}'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {/if}

    {/foreach}

    {repeat string='</li></ul>' times=$node->depth-1}</li>

    </ul>

</div>

{/if}

{/strip}

Voici le code de mon gabarit de menu :

Code :
[== HTML ==]

{strip}

{process_pagedata}

{* With cms_lang_info we retrieve current language information, assign gives us $nls variable we can work with *}

{cms_lang_info assign='nls'}

{* using strip as we don't want useless whitespace, especially not before doctype *}

{/strip}<!doctype html>

<html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'>

<head>

<meta charset='{if isset($nls)}{$nls->encoding()}{/if}'>

<title>{title} - {sitename}</title>

<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />

<meta name='HandheldFriendly' content='true' />

{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{metadata}

{* See in news detail template how cannonical url can be assigned from module *}

{if isset($canonical)}<link rel='canonical' href='{$canonical}' />{elseif isset($content_obj)}<link rel='canonical' href='{$content_obj->GetURL()}' />{/if}

{* This is how all the stylesheets attached to this template are linked to *}

{cms_stylesheet}

<link href="{root_url}/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

{* learning IE lower then Version 9 some html5 *}

<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}

{cms_selflink dir='start' rellink='1'}

{cms_selflink dir='prev' rellink='1'}

{cms_selflink dir='next' rellink='1'}

</head>

<body>

    <!-- Static navbar -->

    <nav class="navbar navbar-default navbar-static-top">

      <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">{Sitename}</a>

        </div>

        <div id="navbar" class="navbar-collapse collapse">

        {menu template='carryall.tpl'}

        </div><!--/.nav-collapse -->

      </div>

    </nav>

    <div class="container">

     {content}

    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="{root_url}/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

    <script src="{root_url}/bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>

J'ai l'impression qu'il pourrait y avoir un problème au niveau du target mais je ne suis pas sûr. En espérant que vous pourrez me mettre sur la piste.

D'avance merci

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Jean le Chauve - 05/09/2015

Bonjour et bienvenue,
Très difficile de te répondre sans avoir de lien vers ton site, ni le javascript appliqué à #navbar (?), ni la css de collapse.
A tout hasard, supprime <div class='navbar-collapse collapse'> et sa fermeture </div> qui me semblent inutiles.

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Joey0007 - 05/09/2015

Bonjour,

Je suis occupé de mettre cela en ligne. Je devrais être prêt dans quelques minutes.

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Joey0007 - 05/09/2015

Voilà, c'est uploadé à cette adresse : carryall.fr

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Jean le Chauve - 05/09/2015

C'est exactement ce que je t'ai écris plus tôt : supprime <div class='navbar-collapse collapse'> et sa fermeture </div>, tire la chevillette et la bobinette cherra Smile

Code :
{if $count > 0}

<div class='navbar-collapse collapse'>

    <ul class='nav navbar-nav' role='menu'>

...

</div>

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Joey0007 - 05/09/2015

Yes , ça marche ! Impeccable.

Je te remercie.

A bientôt sur le forum Smile

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Jean le Chauve - 05/09/2015

Content pour toi, n'oublie pas de modifier le titre de ton post pour y insérer [Résolu] Smile

A bientôt pour de nouvelles aventures Wink

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Joey0007 - 05/09/2015

Dois-je fermer le sujet ou je laisse comme ça ? Dans ce cas comment faire ?

[Résolu]cmsms 1.12 Bootstrap 3.3.5 ==> toggle button ne fonctionne pas - Jean le Chauve - 05/09/2015

Tu remontes sur le premier post et tu cliques sur modifier (signaler citer), puis tu insères [Résolu] au début de ton titre.