Rendre cliquable un élément :before
Résolu
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train d'essayer de reproduire une maquette photoshop et je souhaiterais rendre cliquable une icône (ou du texte) placé dans une classe:before est-ce possible ?
exemple:
Je souhaite donc qu'en cliquant sur le + mon sous-menu s'affiche mais je ne sais pas comment faire pour solliciter mon +.
Je sais afficher mon menu mais pas solliciter le +.
Je vous remercie de votre aide.
Je suis en train d'essayer de reproduire une maquette photoshop et je souhaiterais rendre cliquable une icône (ou du texte) placé dans une classe:before est-ce possible ?
exemple:
.music:before {
content: '+';
font-size: 24px;
margin-top: -10px;
padding-left: 15px;
padding-right: 5px;
border-left: 1px solid #333;
padding-top: 5px;
padding-bottom: 5px;
float: right;
}
Je souhaite donc qu'en cliquant sur le + mon sous-menu s'affiche mais je ne sais pas comment faire pour solliciter mon +.
Je sais afficher mon menu mais pas solliciter le +.
Je vous remercie de votre aide.
A voir également:
- Rendre cliquable un élément :before
- Comment rendre un fichier moins lourd - Guide
- Open element - Télécharger - HTML
- Sommaire cliquable word - Guide
- Comment nettoyer son mac pour le rendre plus rapide - Guide
- Élément introuvable impossible à supprimer - Guide
2 réponses
Salut,
La pseudo-classe before permet seulement d'ajouter du contenu (via la propriété content), mais ce contenu ne peut pas être une balise html donc il n'est pas possible de le rendre cliquable.
Tu peux par contre encapsuler ton élément .music dans une balise cliquable, le contenu ajouté avec before sera donc lui aussi cliquable, par exemple :
Bonne journée
La pseudo-classe before permet seulement d'ajouter du contenu (via la propriété content), mais ce contenu ne peut pas être une balise html donc il n'est pas possible de le rendre cliquable.
Tu peux par contre encapsuler ton élément .music dans une balise cliquable, le contenu ajouté avec before sera donc lui aussi cliquable, par exemple :
<a href="#" class="music">Musique</a> <!-- ou --> <a href="#"><div class="music"></div></a> <!-- ou --> <button class="music">Musique</button> <!-- ou --> <button><div class="music"></div></button>
Bonne journée
Merci pour vos réponses j'ai donc fait:
function sous_menu() {
var sous_menu = document.getElementById('sous_menu');
var btn_plus = document.getElementById('btn_plus')
var btn_moins = document.getElementById('btn_moins')
if (sous_menu.style.display == 'none' || sous_menu.style.display == '') {
sous_menu.style.display = 'block';
btn_plus.style.display = 'none';
btn_moins.style.display = 'block';
}
else {
sous_menu.style.display = 'none';
btn_plus.style.display = 'block';
btn_moins.style.display = 'none';
}
}
