Sujet Précédent Sujet Suivant

Menu déroulant HTML CSS

Résolu/Fermé
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - Modifié le 23 nov. 2018 à 19:50
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 24 nov. 2018 à 12:18
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]
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 nov. 2018 à 22:43
Bonjour,
https://www.w3schools.com/tags/att_a_href.asp

NB: A l'avenir, merci d'utiliser les BALISES DE CODE pour poster ton code sur le forum.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
23 nov. 2018 à 23:36
J'ai reposte, merci pour votre reponse
0
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 nov. 2018 à 00:06
Pas besoin de reposter....
Je t'ai déjà donné la réponse dans ma précédente réponse.
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
24 nov. 2018 à 10:11
Bonjour, j'arrive bien a mettre a lien dans mon menu déroulant, mais moi je veut aller sur une page de mon site, donc comment dois-je faire ?
0
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 nov. 2018 à 10:26
Qu'as tu essayé au juste ??
Quelles sont les noms des pages de ton site ? Quelles sont leurs url ?
Bref....des details... sinon on ne pourra pas t aider
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322 > MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021
24 nov. 2018 à 10:27
Bonjour
insère simplement simplement le lien de ta page dans le menu, par exemple 
<li><a href="http//www.tonsite.tld/youtube.html">YouTube</a></li> 
ou plus simplement
<li><a href="youtube.html">YouTube</a></li>


évidemment il faudra que tu crée une page youtube.html si elle n'existe pas
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses