Bonjour,
J'ai un projet "création d'un site web" en classe de Seconde, et j'ai insérer un menu déroulant.
je souhaiterais donner un lien à chaque mot contenu dans une liste déroulante. Des que le mot est selectionné on va sur la page. Pouvez-vous m'aider pour que je puisse aller sur une page après avoir cliqué dans le menu déroulant. Quels sont les codes ? Merci pour votre aide et vos réponses !
Voici mes codes
HTML et
CSS :
HTML :
[code]
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Site web HTML CSS</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav>
<ul>
<li class="menu-html"><a href="html.html">Acceuil</a>
<ul class="submenu">
<li><a href="#">Téléphones</a></li>
</ul>
</li>
<li class="menu-css"><a href="css.html">A propos</a>
<ul class="submenu">
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Evolution du téléphone jusqu'à aujourd'hui</a></li>
</ul>
</li>
<li class="menu-javascript"><a href="javascript.html">Contact</a>
<ul class="submenu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</nav>
</body>
</html>
[code]
CSS :
[code]
body {
font-family: 'Source code pro', Calibri, serif;
margin: 0px;
padding: 0px;
}
nav {
width: 100%;
background-color: #424558;
}
nav > ul {
margin: 0px;
padding: 0px;
}
nav > ul::after {
content: "";
display: block;
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > a {
padding: 20px 30px;
color: #FFF;
}
nav > ul > li:hover a {
padding: 15px 30px 20px 30px;
}
nav li {
list-style-type: none;
}
.submenu {
display: none;
}
nav a {
display: inline-block;
text-decoration: none;
}
nav li:hover .submenu {
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
padding: 0px;
z-index: 1000;
}
.submenu li {
border-bottom: 1px solid #CCC;
}
.submenu li a {
padding: 15px 30px;
font-size: 13px;
color: #222538;
width: 270px;
}
.menu-html:hover {
border-top: 5px solid #e44d26;
background-color: RGBA(228,77,38,0.15);
}
.menu-css:hover {
border-top: 5px solid #0070bb;
background-color: RGBA(000,112,192,0.15);
}
.menu-javascript:hover {
border-top: 5px solid #f1dc4f;
background-color: RGBA(241,211,79,0.15);
}
.menu-contact:hover {
border-top: 5px solid #BBB;
background-color: RGBA(220,220,220,0.15);
}
.menu-html .submenu {
background-color: RGB(230,100,40);
}
.menu-css .submenu {
background-color: RGB(000,160,240);
}
.menu-javascript .submenu {
background-color: RGB(250,215,100);
}
.submenu li:hover a {
color: #EEE;
font-weight: bold;
}
.menu-html .submenu li:hover {
background-color: RGB(210,77,60);
}
.menu-css .submenu li:hover {
background-color: RGB(000,115,200);
}
.menu-javascript .submenu li:hover {
background-color: RGB(200,165,75);
}
[code]
- Messages postés
-
31093
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 19 janvier 2021
3 194Quelles sont les noms des pages de ton site ? Quelles sont leurs url ?
Bref....des details... sinon on ne pourra pas t aider
- Messages postés
-
65
- Date d'inscription
- vendredi 23 novembre 2018
- Statut
- Membre
- Dernière intervention
- 7 octobre 2019
1Je veux faire ceci (menu déroulant qui mène à une autre page du site)
Dois-je créé une page, puis prendre l'URL ?
- Messages postés
-
65
- Date d'inscription
- vendredi 23 novembre 2018
- Statut
- Membre
- Dernière intervention
- 7 octobre 2019
1Il faut créer un fichier correspondant à une page HTML.
- Messages postés
-
31093
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 19 janvier 2021
3 194 > MaxBMX17As tu bien créé un fichier "page2.html" ? se trouve t'il dans le même répertoire que celui qui contient ton menu ?
Car c'est bien ça qu'il faut faire...
- Messages postés
-
65
- Date d'inscription
- vendredi 23 novembre 2018
- Statut
- Membre
- Dernière intervention
- 7 octobre 2019
1Merci.