Javascript ou pas?

**benjea06** · 06/09/2023, 20h05

Bonsoir à tous,
juste une petite question...

Je dois faire une page en html et css uniquement.
J'aurais aimé intégrer une menu déroulant avec des liens.
J'ai trouvé le code suivant et je voudrais savoir si cela est considéré comme du javascript...
Merci pour votre aide!

Code html :

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

<select size="1"  onChange="location = this.options[this.selectedIndex].value;">

Le code complet:

Code html :

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

1
2
3
4
5
6
7
8
<form name="form" >
<select size="1"  onChange="location = this.options[this.selectedIndex].value;">
	<option value="" >Choix</option>
	<option value="test.pdf" >Google</option>
	<option value="lien.html" >2</option>
	<option value="lien.html" >3</option>
</select>
</form>

**licardentaistor** · 06/09/2023, 20h22

oui y'a du JS dedans, si tu dois juste faire une page de présentation sans JS retire l'attribut onchange.

**benjea06** · 06/09/2023, 20h27

Bonsoir,
si je retire l'attribut Onchange, ca ne marche plus et je n'ai donc plus interet à garder le reste...
Ou j'ai pas pigé un truc...?

**ASCIIDEFOND** · 06/09/2023, 22h30

Salut benjea06,

Pour un menu déroulant avec des liens et sans JavaScript, tu peux utiliser les balises <ul> et <li>

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            padding: 30px;
            color: #333;
        }
 
        .dropdown {
            position: relative;
            display: inline-block;
        }
 
        .dropdown>input[type="checkbox"] {
            position: absolute;
            left: -100vw;
        }
 
        .dropdown>label,
        .dropdown>a[role="button"] {
            display: inline-block;
            padding: 6px 15px;
            color: #000000;
            line-height: 1.5em;
            text-decoration: none;
            border: 1px solid #8c8c8c;
            cursor: pointer;
            border-radius: 3px;
            width: 90px;
            text-align: center;
        }
 
        .dropdown>label::after,
        .dropdown>a[role="button"]::after {
            content: "\0025BC";
            display: inline-block;
            margin-left: 30px;
        }
 
        .dropdown>ul {
            position: absolute;
            z-index: 999;
            display: block;
            left: -100vw;
            top: calc(1.5em + 14px);
            border: 1px solid #8c8c8c;
            background: #fff;
            padding: 6px 0;
            margin: 0;
            list-style: none;
            width: 100%;
            border-radius: 3px;
        }
 
        .dropdown>ul a {
            display: block;
            padding: 6px 15px;
            text-decoration: none;
            color: #000000;
        }
 
        .dropdown>ul a:hover,
        .dropdown>ul a:focus {
            background: #ececec;
        }
 
        .dropdown>input[type="checkbox"]:checked~ul,
        .dropdown>ul:target {
            left: 0;
        }
 
        .dropdown>[type="checkbox"]:checked+label:after,
        .dropdown>ul:target~a:after {
            content: "\0025BC";
        }
 
        .dropdown a.close {
            display: none;
        }
 
        .dropdown>ul:target~a.close {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            z-index: 1000;
        }
    </style>
</head>
 
<body>
    <div class="dropdown">
        <input type="checkbox" id="my-dropdown">
        <label for="my-dropdown" data-toggle="dropdown">Choix</label>
        <ul>
            <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
            <li><a href="https://www.startpage.com/">Starpage</a></li>
            <li><a href="https://google.com/">Google</a></li>
        </ul>
    </div>
</body>
 
</html>