Un effet de déplacement sur un border
Résolu
emrh Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
Pourriez-vous me conseiller des tutos ou lectures pour arriver à coder un effet de déplacement
sur un border ?
En image : J'aimerais qu'en cliquant sur "Adresse" le lien bleu sous facturation se déplace vers la gauche en glissant !
D'autre part, je n'arrive pas à cibler un enfant :
.lien .actif {
..../....
}
Ne fonctionne pas !
Merci d'avance pour votre aide
<nav>
<ul class="tabs">
<li class="item">
<a id="contact" class="lien actif" href="#client-contact" onclick="navSection2('contact')">
Adresse & Contact
</a>
</li>
<li class="item">
<a id="contrats" class="lien" href="#client-contrat" onclick="navSection2('contrats')">
Contrats
</a>
</li>
<li class="item">
<a id="factures" class="lien" href="#client-facture" onclick="navSection2('factures')">
Facturation
</a>
</li>
<li class="item">
<a id="reglements" class="lien" href="#client-reglements" onclick="navSection2('reglements')">
Règlements
</a>
</li>
<li class="item">
<a id="notes" class="lien" href="#client-notes" onclick="navSection2('notes')">
Notes
</a>
</li>
</ul>
</nav>
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.tabs {
border-bottom: 1px solid rgba(34,34,48,.1);
display: flex;
}
.item{
}
.lien{
display: block;
color: #888c9b;
padding: 1rem;
border: 1px solid transparent;
border-width: 0 0 3px;
}
.actif{
color: #222230;
border-color: #346cb0;
}
Linux / Chrome 106.0.0.0
- Impossible d'utiliser l'outil déplacement car la couche de destination est masquée.
- Impossible d'utiliser ce numéro de téléphone pour la validation. - Forum Gmail
- Utiliser chromecast - Guide
- Impossible d'utiliser ce numéro de téléphone pour la validation - Forum Gmail
- Outil de benchmark gratuit - Accueil - Utilitaires
- Télécharger outil capture d'écran ciseaux - Télécharger - Capture d'écran
2 réponses
Bonjour,
Tu peux t'inspirer des exemples présentés sur cet article (le premier exemple de la démo semble correspondre à ce que tu cherches) : https://tympanus.net/codrops/2016/01/06/inspiration-for-line-menu-styles/
Concernant les sélecteurs css :
.lien .actif -> cible les éléments qui ont la classe "actif" et qui sont enfants des éléments qui ont la classe "lien"
Puisque tes liens ont les deux classes "lien" et "actif", il ne faut pas mettre d'espace dans ton sélecteur css :
.lien.actif -> cible les éléments qui ont la classe "lien" et la classe "actif"
https://www.w3schools.com/cssref/css_selectors.asp
Merci pour ton aide Pitet...Après le Javascript, te voici sur mon CSS ! Décidément, je vais t'envoyer mon cahier des charges pour que tu puisses faire mon application !
:-)
Le premier lien que tu me donnes est parfait : la réaction de la ligne dans le menu "Alonso" de la démo correspond exactement à ce que je voudrais obtenir... C'est génial de pouvoir décortiquer le travail de développeurs grâce à l'inspecteur et d'essayer de comprendre comment c'est foutu ! Là, je m'attaque à un gros morceau pour moi car j'ai cru comprendre que pour déplacer une simple petite ligne sous le menu, le créateur de ce code s'amuse avec JavaScript pour déplacer dans la structure HTML la balise <li class="item-ligne"></li> en lui appliquant des effets de transition !
Un super exercice en perspective !
Merci également pour ce "détail" sur l'espace entre les deux sélecteurs et le lien vers w3schools dont la 2° ligne explique mon erreur !
J'admire ta patience et ta pédagogie...
Merci pour tout !
EDIT : Après une lecture du code JavaScript, je me rends rapidement compte que ce n'est pas de mon niveau...
J'essaierai plus tard de me pencher dessus, pour l'instant ça ne bloque pas mon application...
