Menu récursif border

**senacle** · 19/09/2022, 18h51

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

Invité · 19/09/2022, 21h43

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

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

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.

**Toufik83** · 20/09/2022, 00h06

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

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

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

**senacle** · 20/09/2022, 09h26

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.

Envoyé par Toufik83

Code css :

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

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

Parfait

Menu récursif border

CSS

Vue hybride

Discussions similaires

Partager

Partager