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