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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
ALERT en php
snoopy -
appkech -

14 réponses