Sujet Précédent Sujet Suivant

Un effet de déplacement sur un border

Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 20 oct. 2022 à 15:57
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 21 oct. 2022 à 08:51

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 &amp; 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

2 réponses

Réponse 1 / 2
Pitet
20 oct. 2022 à 17:37

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
1
Réponse 2 / 2
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
Modifié le 21 oct. 2022 à 09:14

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...
0

Discussions similaires

couche de destination masquée
on dira petite pomme -
Hans33 -

25 réponses
Impossible d'utiliser l'outil déplacement
Dollems -
rene4 -

1 réponse
Sécurité de l'URL
ghaouar -
fiddy -

2 réponses
comment lire un message masqué????
linx33 -
linx33 -

6 réponses
Impossible d'utiliser ce numéro de téléphone pour la validat
Marie -
MPMP10 -

1 réponse