css Barre de menus, animation CSS

HenriK

Membre
Bonjour à tout le monde,

Je suis tombé sur un site et j'ai trouvé la barre de menu en haut de page géniale !!
J'aimerais refaire la même sur mon site mais même en regardant les outils de développement je ne comprends pas bien comment il a fait.
Pourriez-vous, encore une fois, m'aider ??

Voici le site

Apparemment le bloc semi-transparent qui se déplace c'est ce CSS
CSS
#selector {
    -moz-transition-property: top,left,background,width;
    -o-transition-property: top,left,background,width;
    -webkit-transition-property: top,left,background,width;
    transition-property: top,left,background,width;
    opacity: .2;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    top: -8px;
    z-index: -1;
    height: 40px;
}

Mais il n'y a pas de propriété background pour définir la couleur suivant l'élément du menu.
Est-ce qu'il y a du JavaScript aussi ?
 
Dernière modification par un modérateur:

L'occitan

Membre
Chouette le menu effectivement.
Il y a un script JQuery et un script JS, donc probablement que le menu utilise l'un ou l'autre

HTML
<script src="https://www.lucaswillems.com/js/jquery-2.2.3.min.js"></script>
<script async="async" src="https://www.lucaswillems.com/build/js/script.min-8126328a05.js"></script>
 

Nicolas

Membre
Comment peut-on définir si un élément utilise JS ou JQuery et comment être plus précis en définissant si c'est l'un ou l'autre ?
Est-ce qu'on peut aller si loin dans l'analyse d'une page web ?
 

yule

Membre
Hello,

Quand je fais ce genre de recherche, je commence par voir tout ce qui est utilisé sur le site en question . Pour se faire j'utilise ce très bon outils ( A garder dans vos favoris..) LUCASWILLEMS.COM Technology Profile on BuiltWith Pour toi Nicolas : COCORIWEB.COMMUNITY Technology Profile on BuiltWith

Puis par la suite je fais comme L'occitan, je vais chercher dans les pages (Y a peut-être mieux comme solution ?) En l'occurrence, je suis allé chercher l'id de ce menu <div id="selector"></div> pour aller le retrouver dans les fichiers JS (comme HenriK l'a fait pour le css), et il se trouve "par chance" sur celui-ci https://www.lucaswillems.com/build/js/script.min-8126328a05.js Mais je ne suis pas allé plus loin, c'est juste pour expliquer une méthode parmi tant d'autres.
A+
 

WWWest

Membre
Le fichier est un min.js donc un peu plus difficile à décrypter.
C'est intéressant ce petit challenge, essayer de reproduire un menu trouvé sur un site comme ça. Le CSS c'est facile avec les outils de développement des navigateurs mais comment faire le lien avec JS ? Ok tu trouves le fichier JS correspondant mais comment appliquer le script sur le menu ?
 

Cascadeur

Membre
Quand je fais ce genre de recherche, je commence par voir tout ce qui est utilisé sur le site en question . Pour se faire j'utilise ce très bon outils ( A garder dans vos favoris..) LUCASWILLEMS.COM Technology Profile on BuiltWith Pour toi @Nicolas : COCORIWEB.COMMUNITY Technology Profile on BuiltWith
Dommage que ce ne soit pas totalement gratuit.
Le plus intéressant est payant et pas à moindre prix !!
 

LaPomme

Membre
Mais après.. ???? Sur codepen par tatonnement ??
Et bien si quelqu'un trouve comment faire je lui en serais très reconnaissante parce qu'il me plait bien aussi ce menu.
En regardant le code source de la page on voit ceci
HTML
<nav class="text-center">
    <div id="selector"></div>
    <a href="https://www.lucaswillems.com/fr" class="home active">Accueil</a>
    <a href="https://www.lucaswillems.com/fr/projects" class="projects">Projets</a>
    <a href="https://www.lucaswillems.com/fr/articles" class="articles">Articles</a>
    <a href="https://www.lucaswillems.com/fr/tools" class="tools">Outils</a>
    <a href="https://www.lucaswillems.com/fr/about" class="about">A propos</a>
    <a href="https://www.lucaswillems.com/fr/contact" class="contact">Contact</a>
</nav>
Pourquoi on ne voit pas la fonction JS ? C'est délibérément caché ou bien cela n'apparait jamais dans les codes sources ?
 

Nicolas

Membre
Il faudrait le contacter pour lui dire que sa page de contact n'est pas utilisable et que donc on peut pas le contacter pour lui dire que sa page de contact n'est pas utilisable.
 

yule

Membre
A part lui demander , ça va être coton pour trouver exactement les éléments sachant que jquery est également nécessaire on fonctionnement de ce menu. La partie css va plus loin que juste selector, il faut le nav . Le js à plus de 8800 lignes et le css 6000.. faut que le confinement perdure...

Pourquoi on ne voit pas la fonction JS ? C'est délibérément caché ou bien cela n'apparait jamais dans les codes sources ?
Pas certain de comprendre.. le fichier JS est lu intégralement (bibliothèque de plusieurs fonctions), l'appel se fait en bas de page
 
L

Lucas Willems

Invité
Salut HenriK,

C'est du CSS et un peu de JS.

Le HTML :

HTML
<div class="menu">
    <div class="item">Item A</div>
    <div class="item">Item B</div>
    <div class="item">Item C</div>
    <div class="selector"></div>
</div>

Le CSS :

CSS
.menu {
    position: relative;
    display: flex;
}

.selector {
    position: absolute;
}

Et avec le JS, quand la souris passe au dessus d'un élément, je récupère la position horizontale de l'item et je la donne au selecteur via la propriété CSS left.
 

Ces discussions pourraient vous intéresser...

Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
bonjour, le forum ici c'est xenforo ? je ne vois pas la barre de liens sous la barre de navigation et quand j'essaye de faire la même chose en décochant tous les sous-menus ils disparaissent mais la barre blanche des sous-menus restent. comment avez-vous fait pour la supprimer ? merci
-->


X 4 36
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Haut