Menu récursif border

Version imprimable

Bonjour,

J'ai un menu construit récursivement.
On retrouve donc les mêmes balises avec les mêmes classes.
Je voudrais faire apparaître un border-bottom pour le niveau 1 du menu.
Je n'ai pas la possibilité d'ajouter un nom de classe.
J'ai tenté first-child et autre de ce genre, mais je ne trouve pas comment faire.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="adminmenu">
    <ul class="nav navbar-nav">
        <li class="">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="http://gestion" class="a_menu">
                <span class="icon voyager-boat"></span><span class="title">Tableau de bord</span>
            </a>
        </li>
	<li class="">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="http://gestion/media" class="a_menu">
                <span class="icon voyager-images"></span><span class="title">Fichiers</span>
            </a>
        </li>
	<li class="dropdown active">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="#5-dropdown-element" data-toggle="collapse" aria-expanded="true" class="a_menu">
                <span class="icon voyager-tools"></span><span class="title">Administration</span>
            </a>
	    <div id="5-dropdown-element" class="panel-collapse collapse in" aria-expanded="true" style="">
                <div class="panel-body">
                    <ul class="nav navbar-nav">
                        <li class="">     PAS DE BORDER BOTTOM
                            <a target="_self" href="http://gestion/database" class="">
                                <span class="icon voyager-data"></span><span class="title">Base de données</span>
                            </a>
                        </li>
                        <li class="">     PAS DE BORDER BOTTOM
                            <a target="_self" href="http://gestion/bread" class="">
                                <span class="icon voyager-bread"></span><span class="title">BREAD</span>
                            </a>
                        </li>
			<li class="dropdown">     PAS DE BORDER BOTTOM
                            <a target="_self" href="#14-dropdown-element" data-toggle="collapse" aria-expanded="false" class="collapsed">
                                <span class="icon voyager-lock"></span><span class="title">Droits</span>
                            </a>
			    <div id="14-dropdown-element" class="panel-collapse collapse " aria-expanded="false">
                                <div class="panel-body">
                                    <ul class="nav navbar-nav">
                                        <li class="">     PAS DE BORDER BOTTOM
                                            <a target="_self" href="http://users" class="">
                                                <span class="icon voyager-person"></span><span class="title">Utilisateurs</span>
                                            </a>
                                        </li>
                                        <li class="">     PAS DE BORDER BOTTOM
                                            <a target="_self" href="http://roles" class="">
                                                <span class="icon voyager-lock"></span><span class="title">Rôles</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

Bonjour,

Pourquoi tu n'as pas la possibilité d'ajouter un nom de classe?

Si les puce ne sont pas importante, et si tu peut quand même éditer le fichier HTML, tu peut rajouter une balise <br> à la suite de chaque fermeture de balise </li>;
Voici le html apres:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div id="adminmenu">
    <ul class="nav navbar-nav"><li class="">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="http://gestion" class="a_menu">
                <span class="icon voyager-boat"></span><span class="title">Tableau de bord</span>
            </a>
        </li><br>
	<li class="">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="http://gestion/media" class="a_menu">
                <span class="icon voyager-images"></span><span class="title">Fichiers</span>
            </a>
        </li><br>
	<li class="dropdown active">   ICI AJOUTER UN BORDER BOTTOM
            <a target="_self" href="#5-dropdown-element" data-toggle="collapse" aria-expanded="true" class="a_menu">
                <span class="icon voyager-tools"></span><span class="title">Administration</span>
            </a>
	    <div id="5-dropdown-element" class="panel-collapse collapse in" aria-expanded="true" style="">
                <div class="panel-body">
                    <ul class="nav navbar-nav">
                        <li class="">     PAS DE BORDER BOTTOM
                            <a target="_self" href="http://gestion/database" class="">
                                <span class="icon voyager-data"></span><span class="title">Base de données</span>
                            </a>
                        </li><br>
                        <li id="">     PAS DE BORDER BOTTOM
                            <a target="_self" href="http://gestion/bread" class="">
                                <span class="icon voyager-bread"></span><span class="title">BREAD</span>
                            </a>
                        </li><br>
			<li class="dropdown">     PAS DE BORDER BOTTOM
                            <a target="_self" href="#14-dropdown-element" data-toggle="collapse" aria-expanded="false" class="collapsed">
                                <span class="icon voyager-lock"></span><span class="title">Droits</span>
                            </a>
			    <div id="14-dropdown-element" class="panel-collapse collapse " aria-expanded="false">
                                <div class="panel-body">
                                    <ul class="nav navbar-nav">
                                        <li class="">     PAS DE BORDER BOTTOM
                                            <a target="_self" href="http://users" class="">
                                                <span class="icon voyager-person"></span><span class="title">Utilisateurs</span>
                                            </a>
                                        </li><br>
                                        <li class="">     PAS DE BORDER BOTTOM
                                            <a target="_self" href="http://roles" class="">
                                                <span class="icon voyager-lock"></span><span class="title">Rôles</span>
                                            </a>
                                        </li><br>
                                    </ul>
                                </div>
                            </div>
                        </li><br>
                    </ul>
                </div>
            </div>
        </li><br>
    </ul>
</div>

Tu pourra ensuite utiliser ce CSS

Code:

1
2
3
4
5
6
7
8
9
li{
display:inline;
	border-style:solid;
	border-width: 0px 0px 1px 0px;
	border-color:black;
}
li ul li{
	border-style:none;
}

Je rajoute des balises <br> au HTMl car j'utilise la propriété css display:inline; sur les balises <li>. Si je n'utilise pas la propriété display:inline; la bordure se forme en bas du dernier enfant.

Si on utilise les classes, cela fait sauter les puces également.

Si on tu veux garder les puce, tu peut aussi utiliser les balise <u>...</u> dans ton code HTML pour surligner le texte.

A tester si cela ne casse pas tout ton autre code CSS.
Et à voir si quelqu'un n'as pas trouver quelque chose de plus simple.

20/09/2022, 00h06
Toufik83

Bonjour,

Vous pouvez utiliser le sélecteur d'enfants > (ou "Child_combinator" en anglais) pour cibler les enfants du premier niveau d'un élément HTML, dans votre cas vous devriez cibler seulement les <li> de l'enfant directe .navbar-nav de #adminmenu

Code:

#adminmenu > .navbar-nav > li{border-bottom:solid;}
20/09/2022, 09h26
senacle

Citation:

Envoyé par VBrice

Pourquoi tu n'as pas la possibilité d'ajouter un nom de classe?

Ca provient d'un framework et je n'ai pas trop envie de toucher au code.

Citation:

Envoyé par Toufik83

Code:

#adminmenu > .navbar-nav > li{border-bottom:solid;}

Parfait :D