liste déroulante avec liens sur d'autres pages

Black-punch Le 26 novembre 2019 à 21:10

Bonsoir svp comment créer une liste déroulante dont les option donnent sur d'autres pages. Merci!

Profil introuvable Le 20 mars 2020 à 17:57

Hello @Black-punch,

Je t'invite à lire cet article 😉

toitoine Le 20 mars 2020 à 22:52

Salut salut! Tu cherches à faire une dropdown menu ?

Black-punch Le 16 avril 2020 à 14:36

salut! @toitoine c'est ce que je veux oui

toitoine Le 16 avril 2020 à 18:18

Yop @Black-punch ! Au niveau du html ça ressemble à ça :

<header>
    <ul>
        <li>
            <a href="#">Dropdown <i class="fas fa-caret-down"></i></a>
            <ul>
                <li><a href="#">Lien 1</a></li>
                <li><a href="#">Lien 2</a></li>
            </ul>
        </li>
    </ul>
</header>

et puis pour le css :

.header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: relative;
  text-align: center;
  z-index: 99;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #f1f1f1;
  position: fixed;
}
.header ul ul {
  position: absolute;
  min-width: 200px;
  background: lightgrey;
  display: none;
}

.header ul ul li {
  display: block;
  background: #f1f1f1;
}

.header ul li {
  display: inline-block;
}

.header ul li i {
  color: #181818;
  padding-left: 20px;
}

.header ul li a {
  color: #181818;
  text-decoration: none;
  padding: 15px;
  display: block;
  font-weight: 500;
}

.header ul li a:hover {
  color: #27ae60;
}

.header ul li:hover {
  background: lightgrey;
}

.header ul li:hover ul {
  display: block;
}

voilà voilà, je crois que tout y est. Après, c'est un design perso, à toi de l'adapter comme tu souhaites l'utiliser. ;)

Antoine

toitoine Le 16 avril 2020 à 18:20

Et puis, pour les liens sans dropdown, c'est simple :

<header>
    <ul>
        <!-- Dropdown -->
        <li>
            <a href="#">Dropdown <i class="fas fa-caret-down"></i></a>
            <ul>
                <li><a href="#">Lien 1</a></li>
                <li><a href="#">Lien 2</a></li>
            </ul>
        </li>
        <!-- Pas Dropdown -->
        <li><a href="#">Pas dropdown</a></li>
    </ul>
</header>

Échange

Articles / Vidéos

Ressources