Sujet Précédent Sujet Suivant

Site e-commerce html css php

Fermé
saida22 - Modifié le 21 nov. 2022 à 10:51
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 - 21 nov. 2022 à 15:39

Bonjour, je voudrais de l'aide car je dois créer un site e-commerce avec du PHP , css et du html mais je bloque sur les liste déroulantes je ne sais pas comment faire pour que si on clique dessus sa nous ramène sur la page je suis désolé je suis débutante dans la matière.

***** Pour une lecture plus facile du code, à l'avenir utilisez les balises, voir cette page.

voici mon code html : 

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Le monde de la glisse</title>

    <link rel="stylesheet" href="style.css">

    <forme action="menu.php" method="POST">

</head>

<body>

    <header class="navbar">

        <nav class="navbar">

            <a href="#" class="logo">LE MONDE DE LA GLISSE</A>

            <ul class="liste-items">

        <li class="items">Acceuil</li>

            <li class="items">Vetement<span>▼</span>

        <ul class="sous_liste">

            <li class="items-sous-liste">Femme</li>

            <li class="items-sous-liste">Homme</li>

            <li class="items-sous-liste">Enfant</li>

        </ul>

        </li>            

       <ul class="liste-items">

            <li class="items">Accessoires<span>▼</span>

        <ul class="sous_liste">

            <li class="items-sous-liste">Ski nautique</li>

            <li class="items-sous-liste">Planche à voile</li>

            <li class="items-sous-liste">SUP</li>

            <li class="items-sous-liste">canoë kayak</li>

            </ul>

            </li>

                <li class="items">Tutoriel</li>

                <li class="items">contact</li>

                <li class="items">Panier</li>

            </ul>

        </nav>

    </header>

</html>

 Et voici mon code css:

*,::before, ::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html{

    font-family: Arial, Helvetica, sans-serif;

}

body{

    background: rgb(242, 243, 245);

    height: 100vh;

}

nav{

    width: 100%;

    height: 50px;

    background: rgb(151, 105, 108);

    border-bottom: 0.5px solid rgb(0, 2, 5);

}

.liste-items {

     display: flex;

     justify-content: center;

     color:black;

     list-style-type: none;

     height: 100%;

     line-height: 20px;

     font-size: 20px;

}

.items {

     cursor: pointer;

     margin: 0 10px;

     flex-shrink: 0;

}

.items span{

    font-size: 17px;

}

.items:nth-child(3) {

    margin-left: 0;

}

/* Sous liste */

.sous-liste{

    position: relative;

    top:-1px;

    display:none ;

}

.items-sous-liste{

    list-style-type:none ;

    text-align: center;

    padding:0 10px;

    background: rgb(215, 195, 198);

    border-bottom: 0.5px solid rgb(151, 105, 108);

}

.items-sous-liste:hover {

    background: rgb(151, 105, 108);

}

header{

    height: 100vh;

    width: 100vw;

    background-image:url(image/fond.jpg);

    background-size: cover;

}

.navbar .logo {

    font-size: 20px;

    font-weight: bold;

    color: black;

   margin-left: 30px;

   padding: 50px;

}
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
21 nov. 2022 à 15:39

Bonjour,

Pour changer de page lors du choix dans la liste déroulante, il te faut du javascript.

Tu trouveras sans trop de mal,de nombreux exemples à ce sujet sur le net...
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses