Discussion :

[dananchet]

Bonjour,
je souhaiterais afficher mon menu à l'horizontal (comme dans le site darty par exemple).
pour le moment j'ai un KnpMenuBundle, mais il me l'affiche à la verticale.
Existe-t-il une option pour ça? je n'ai pas trouvé dans la doc... (ou pas compris!)
Merci.

[Tsilefy]

C'est à toi de styler le menu avec CSS.

[dananchet]

Merci.
Mais alors du coup je ne comprends pas comment faire.
Dans ma construction de menu j'ai mis ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        $menu = $this->factory->createItem('root');
        $menu->setChildrenAttributes(array('class' => 'nav_header'));
 
 
        $menu->addChild('accueil', 
                        array('label' => 'Accueil',
                            'route' => 'bam_accueil_homepage'))
                    ->setAttribute('dropdown', true);
        $menu->addChild('adherents', 
                        array('label' => 'Adhérents'))
                    ->setAttribute('dropdown', true);
// etc...
       return $menu;

et dans mon fichier css, j'ai ceci:

Code :

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

1
2
3
4
5
6
 
.nav_header{
    ul li{
        display     : inline-block;
    }
}

Mais ça ne fait rien.
Comment faire pour donner une classe à mon menu, réutilisable dans le css?

Merci.

[Tsilefy]

tu utilises une syntaxe SASS, pas CSS. Est-ce que tu as bien activé SASS, configuré assetic etc?

De plus,

Code :

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

$menu->setChildrenAttributes(array('class' => 'nav_header'));

donne la classe nav_header aux éléments du menu, pas au menu lui même. Pour le menu, il faut utiliser setAttribute().

Poste ici le HTML généré et le CSS généré.

[dananchet]

Bonjour,
Alors j'ai donc modifié la déclaration des classes de mon menu comme ceci:

Code :

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

1
2
3
 
        $menu->setAttributes(array('class' => 'nav_header'));
        $menu->setChildrenAttributes(array('class' => 'nav_children'));

et mon fichier .css comme ceci;

Code :

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

1
2
3
4
5
6
7
8
9
10
 
ul.nav_header{
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}
li.nav_header{
display: inline;
padding: 20px;
}

Ensuite j'ai fait un:

Code :

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

 sudo php app/console assets:install web

Et j'obtiens le code source 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
                    <link href="/bundles/bamaccueil/css/FeuilleStyleGenerale.css" type="text/css" rel="stylesheet" />
 
                             <ul class="nav_children">
                    <li dropdown="dropdown" class="current first">        <a href="/app_dev.php/accueil">Accueil</a>        
    </li>
 
            <li dropdown="dropdown">        <span>Adhérents</span>                <ul class="menu_level_1">
                    <li divider_append="divider_append" class="first">        <a href="/app_dev.php/adherent/affichage/tous">Gérer l'existant</a>        
    </li>
 
            <li divider_append="divider_append" class="last">        <a href="/app_dev.php/adherent/ajout">Ajouter</a>        
    </li>
 
 
    </ul>
 
    </li>
 
            <li dropdown="dropdown">        <span>Producteurs</span>                <ul class="menu_level_1">
                    <li divider_append="divider_append" class="first">        <a href="/app_dev.php/producteur">Gérer l'existant</a>        
    </li>
 
            <li divider_append="divider_append" class="last">        <a href="/app_dev.php/producteur/ajout">Ajouter</a>        
    </li>
 
 
    </ul>
 
    </li>
 
            <li dropdown="dropdown">        <span>Commandes</span>                <ul class="menu_level_1">
                    <li divider_append="divider_append" class="first">        <a href="/app_dev.php/commande/encours">Commandes en cours</a>        
    </li>
 
            <li divider_append="divider_append" class="last">        <a href="/app_dev.php/commande/termine">Commandes terminées</a>        
    </li>
 
 
    </ul>
 
    </li>
 
            <li dropdown="dropdown" class="last">        <span>Se déconnecter</span>        
    </li>
 
 
    </ul>

Par contre où trouver le code .css généré?

[dananchet]

Et voici ma configuration d'assetic:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [BAMProducteurBundle,BAMCommandeAdherentBundle,BAMAccueilBundle]
 
    filters:
        less:
            node: /usr/local/bin/node
            node_paths: [/usr/local/lib/node_modules]
            apply_to: "\.less$"
        cssrewrite: ~

[Tsilefy]

Hmm, je pense qu'il y a un souci avec setAttributes et setChildrenAttributes (je ne peux pas vérifier là). En tout cas, tu as le css qui s'applique sur ton menu si dans Chrome tu fais click droit/inspecter.

Et en donnant à .nav_children une width suffisante et en faisant

Code css :

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

.nav_children li { display: inline-block}

tu devrais avoir le menu à l'horizontale.

[dananchet]

Bonjour,
Alors j'avais déjà tenté cette commande. Mais aussi étrange que cela puisse paraître, mon menu apparait alors bien à l'horizontal, mais les menus "accueil" et "se déconnecter" apparaissent au même niveau que les sous-menus (sûrement parce qu'ils n'en ont pas de sous-menus, mais c'est embêtant quand même!).

J'ai donc trouvé et appliqué ce code trouvé sur internet et qui fonctionne (sûrement grâce au "list-style-type:none").

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
.nav_children ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
.nav_children li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
.nav_children li a {
 display:block;
 width:150px;
 color:white;
 text-decoration:none;
 padding:5px;
 }

Merci pour ton aide. Je n'ai pas trop compris encore d'où venait le problème mais je marque quand même en résolu le sujet, car la solution fonctionne quand même. Ce qui ne m'empêchera pas de chercher une explication!