Discussion :

[dlamart]

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 html :

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
<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 css :

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
.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;
      }

[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.

[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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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.