[Bootstrap 3] Affichage du menu

Version imprimable

Bonjour à tous

Le menu suivant s'affiche parfaitement sans Symfony2 mais dès que je l'intègre dans Symfony2, la couleur de fond (rouge) du menu actif change vers l'élément sur lequel j'ai cliqué (jusque là tout va bien) puis après avoir afficher la page, la couleur ne 'reste pas' et 'retourne' au menu précédemment actif. je précise que sans Symfony2 tout est OK, mais je souhaite appliquer tout ce que j'ai appris sur Symfony2. Merci par avance pour votre aide.

Le HTML est le suivant:

Code:

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
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a id="first_menu" href={{ path('dl_cv_competences') }} class="lien_menu">Compétences</a>
                    </li>
                    <li>
                        <a href={{ path('dl_cv_annonces') }} class="lien_menu">Plateforme d'annonces</a>
                    </li>
                    <li>
                        <a href={{ path('dl_cv_discussion') }} class="lien_menu">Plateforme de discussion</a>
                    </li>
                    <li>
                        <a href={{ path('dl_cv_profil') }} class="lien_menu">Profil et postes</a>
                    </li>
                </ul>
            </div>
 
        </div>
    </nav>

et le CSS pour le menu est:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.navbar{
        background-color: #66cccc;/*bleu pale*/
        color:white;
      }
 
      .navbar .container .nav >li >a{
        font-size: 16px;
        color: white;
      }
 
      .navbar .container .nav >li:hover, .navbar .container .nav >li > a:focus{
         background-color: #CF0A2C;/*rouge*/
         color: white;
         font-size:18px;
      }
 
 
 
      nav li{
        border-left: 1px solid white;
      }

09/09/2015, 15h15
kolodz

Bonjour,

Symfony 2 ne fait rien de particulier au niveau du rendu de la page. Si tu utilise un template Twig qui est présent par défaut dans Symfony 2. Il est possible que tu ai fait une erreur dans ton template où que tu n'importe pas proprement ta CSS.

As-tu faire un différentiel entre le code html généré par ta page symfony et celui "sans" ?
As-tu vérifier que toutes les dépendances de la page sont chargées (notamment les dépendances CSS) ?

Cordialement,
Patrick Kolodziejczyk.
09/09/2015, 23h57
dlamart
Une des solutions que j'ai choisi, a été de passer par JS et mettre le code directement dans le template twig appelé par le lien du menu- voici le code JS:
Code:

1 2 $('.nav').find('.current').removeClass('current'); $('.nav > li:nth-child(2)').addClass('current');
current étant la class "active" (donc en rouge).

Le JS est à déclencher sur un onload de la page.

Ainsi sur l'onload, on supprime la class 'current' du menu précédemment actif et on ajoute la class 'current' au menu spécifié.

Donc exit la méthode avec le CSS:focus.

Merci et à bientôt.