Bonjour,

J'ai jusqu'à présent un menu classique. Je souhaiterai que mes liens soient soulignés lors du survol. Mais la difficulté et que je souhaite que le soulignement soit plus bas que la normal et que le soulignement soit gras. J'ai cherché sur plusieurs site mais rien de bien concret. pouvez-vous m'aider et m'expliquer comment cela fonctionne car je ne vois pas comment gérer l'espace entre le mot et le soulignement.

Merci de votre aide

novis

Salut

Utilises la bordure de ton élément ou crée un nouvel élément avec "::after" et lui ajouter le soulignement.

Bonjour,

on va ajouter un padding-bottom aux liens, de la hauteur désirée, quelques pixels,
et une border-bottom transparente de quelques pixels, pour l'effet "gras"
et au survol (hover), on change la couleur de la bordure, par exemple border-color: darkorange;

Si on ne mettait pas une bordure transparente au lien, mais seulement une bordure colorée au survol, les éléments au dessous se décaleraient, effet visuel déplaisant, notamment si les liens sont en display:block

Dpnc en résumé :

padding-bottom pour l'espace,
border-bottom transparente pour le souligné, qu'on colorise au survol

bonjour,

si j'ai bien compris, il faut que j'ajoute par exemple  padding-bottom: 8px;

avec un a:before, a:after

                     height: 2px;

                     position: absolute;                 

                     bottom: 2px;

             a:before

avec bien sur d'autres éléments... je vais tester et je reviens vers vous

novis

Hello,

Comme le dit mon VDD, avec les éléments :after ou :before, tu peux faire des trucs sympas.

Regarde ici : https://codepen.io/Chaaampy/pen/vxdqPE

petite question de débutant...

pourquoi lorsque j'inscris le code dans edit fiddle le rendu n'est pas le même?!

je souhaitais travaillais par ce biais car jje trouve ça pratique pour modifier les codes... mais là je comprends pas pourquoi en insérant les codes le menu n'est vraiment pas pareil! https://jsfiddle.net/gsyfe1xk/

merci de m éclairer

novis

Salut,

C'est parce que j'utilise un pré-processeur (LESS), c'est une syntaxe différente du CSS, qui est compilé ensuite pour devenir du 'vrai' CSS.

Houlala! OK!!

alors je suis novice du coup je découvre le css tranquillement et commence à apprécier jouer avec les codes! et là je découvre qu'on peut utiliser un pré-processeur! (je ne connaissais pas du tout!! merci j'ai encore appris un truc !)

par contre du coup, comment faire pour m'approprier le code en css (normal) afin de pouvoir modifier certains éléments pour mon site?

Merci de votre aide

Novis

Re,

Tout simplement en ré-écrivant le CSS de manière correcte. Pas de variables, ni d'incrémentation, ni de &:after ou autres.

Je t'aide pour ce coup-ci : https://jsfiddle.net/gsyfe1xk/1/

MERCI pour votre aide,

du coup par curiosité j'ai comparé les deux codes afin d'essayé de comprendre mais je crois que je suis encore trop débutant pour saisir les subtilités...

j'ai remarqué cette partie de code en plus:

@transition:all 0.25s ease-in-out;
@w:#fff;
@b:#000;
@g:#eee;

c'est donc ça qui synthétise les couleurs pour les différents éléments (si j'ai bien compris...)

la je vais faire des tests avec le code que tu m'as donné et je vais le mettre à ma sauce!)

merci beaucoup

novis

Bonjour,

Sur Codepen tu as même accès à beaucoup plus de pré-procésseur HTML, CSS et JavaScript et de librairies.

Et avec une combinaison des deux pseudo-éléments ::before et ::after tu peux donner un effet suivant le guideline Material Design.

Démo JSFiddle.

@NovisCanvas, oui, ce sont des variables, tu peux mettre n'importe quelle propriété CSS dedans (ici des couleurs ou une transition), tu peux aussi les combiner, et grâce aux pré-processeurs, tu peux aussi faire des loops, des mixins etc (comme tous les pré-processeurs en fait, même pour du HTML).

Et, pour compléter mon VDD, je dirais que tu peux faire des choses comme ça aussi : https://codepen.io/Chaaampy/pen/QpmWOd qui sont en fin de compte assez limitées si tu vois ce que certains arrivent à faire

Bonjour Mr Champy,

Je suis encore en phase de test avec edit fiddle afin de trouver comment intégrer au mieux mon menu dans mon site.

J'ai cependant deux questions (peut-être bateau mais bon...)

1: est-il possible de faire en sorte d'adapter le menu en responsive? (j'ai lu plusieurs articles à ce sujet et notamment qu'il fallait intégrer cette balise dans le html

 <meta name="viewport" content="width=device-width" />

 et css:

 <head> 
                 <meta name="viewport" content="width=device-width" />
                 <meta charset="utf-8"/>
                 <link rel="stylesheet" type="text/css" href="style.css">
                 </head> 

peut-on les insérer dans le code du menu. Si oui, je testerai de l'intégrer et vous montrerez afin d'être sûr de ne pas faire d'erreur.

2: comment faire pour que le menu soit toujours fixe sur le haut de la page. (je sais pas si c'est très clair mais j'aimerai que même si on descend sur la page, le menu reste tout de même affiché en haut...). là par contre je n'ai rien trouvé d'abordable pour les novices?

merci de votre aide

novis

Hello

Questions simples en effet.

1 > Je te conseille d'aller faire le cours HTML / CSS, tu verras cette partie là Pour info, ces balises s'insèrent en haut de page, comme toutes les métas, dans le <head>, du coup, tu ne peux pas les insérer "dans" ton menu. De plus, ce n'est pas uniquement ceci qui rendra ton menu responsive (CF cours).

2 > Regarde du côté de position: fixed; et aussi du côté du cours, où je crois que c'est abordé.

3 > Fais vraiment le cours (le relou t'sais), il est plutôt bien foutu, et traite de pas mal de choses basiques à propose desquelles tu te poses des questions

Bonsoir M. Champy ,

ok je vais aller faire un tour du côté des cours !!

Et du coup j'avais tout de même une dernière question de débutant avant de commencer les cours...

Si il n'est pas possible d'attribuer cet effet que tu as fait avec codepen juste au menu... n'est-il pas possible de créer un code css avec les mêmes effets mais de le rattacher spécifiquement au menu?

Je sais pas si j'ai été très clair mais bon...

Merci de votre réponse

novis

Salut,

Non en effet, ce n'est pas très clair. Tu veux dire un effet qui s'applique uniquement aux liens présents dans la nav et pas sur les autres liens du site ?

Oui c'est tout à fait ça!

Bonjour Mr Champy,

J'ai réussi à faire en sorte que seul le menu soit souligné lors du survol...

Néanmoins j'ai encore une question... J'aimerai que le soulignement soit de la même taille (voir un tout petit peu plus grand) que le mot mais pas aussi large que présenté actuellement. https://jsfiddle.net/gsyfe1xk/7/

.menu {
  margin:0;
  padding:0;
  font-family:sans-serif; 
  text-align: center;
}

header {
  width:auto;
  height:100px;
  }
  
  h1 {
    height:auto;
  }
  
  ul {
    width:100%;
    display:flex;
    justify-content:space-around;
    align-items:center;
  }
  li {
    display:inline-flex;
    width:100%;
    height:50px;
  }
  menu {
    color:#360b42;
    width:100%;
    height:50px;
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    transition:all .5s ease;
    }
    
    menu:after {
      content: '';
      display: block;
      position:absolute;
      bottom:0;
      left:0;
      width: 0;
      height: 4px;
      background: #360b42;
      transition: all .5s ease;
    }
    
    menu:hover:after {
      width:100%;
    }

De plus, et je ne sais pas si cela est possible, je souhaiterai que ce menu soit responsive. Si je l'insère dans un tableau a 100% est-ce que cela est suffisant?

Pouvez-vous m'éclairer?

Merci d'avance

novis

-
Edité par NovisCanvas 14 septembre 2017 à 11:03:34

Salut,

Change la dernière propriété CSS, c'est la largeur qui s'applique au survol.

Pour le responsive pas de miracle, non, il va falloir apprendre sur les cours.

Merci,

alors j'ai inséré ce code:

   menu:hover:after {
      position:relative;
      width:70%;
    }

j'ai ajouté position relative pour qu'il soit pile sur le mot mais il y a un effet bizarre juste avant le soulignement.

https://jsfiddle.net/gsyfe1xk/7/

Je trouvais cet effet pas trop mal mais j'aimerai comprendre pourquoi il y a un soulignement juste à coté du mot avant d'être souligné en dessous. Et par contre une fois publié, l'effet ne rend pas pareil...

Bref qu'est-ce qui cloche dans mon code?

Merci

novis

Salut,

Une fois de plus, va faire le cours, ce que tu as mis (la position:relative;) n'a rien à faire ici, et ça fait partie des notions de base ...

Bonjour,

J'ai modifié plusieurs fois mon code. Sur edit fiddle je sui parvenu à avoir l'alignement voulu!

J'ai donc intégré mon menu sur mon html et en  insérant  les items dans un tableau (que je n'avais pas mis sur fiddle) le soulignement est un peu décalé.

Est-ce normal?

mon css modifié:

menu {
  margin:0;
  padding:0;
  font-family:sans-serif;
}

body {
  background-color:transparent;
  height:auto;
}


 {
  width:auto;
  height:100px;
  }
  h1 {
    height:auto;
  }
  nav {
    width:100%;
    height:50px;
    display:flex;
    justify-content:left;
    align-items:left;  
    background-color:trasparent;
    border-bottom:0px solid #000;
  }
  ul {
    width:100%;
    display:flex;
    justify-content:space-around;
    align-items:left;
  }
  li {
    display:inline-flex;
    width:100%;
    height:50px;
  }
  menu {
    color:#641a89;
    width:100%;
    height:50px;
    position:relative;
    display:inline-flex;
    justify-content:left;
    align-items:left;
    flex-wrap:wrap;
    transition:all .5s ease;
    }
    
   menu:after {
      content: '';
      display: block;
      position:absolute;
      bottom:0;
      left:0;
      width: 0;
      height: 4px;
      background: #481860;
      transition: all .5s ease;
    }
    
    menu:hover:after {
          align-items:center;

      width:70%;
    }

merci

novis

-
Edité par NovisCanvas 16 septembre 2017 à 15:19:45

Bonjour,

Après acharnement,  j'ai ENFIN réussi!!! Trop content!

J'ai modifié le 'left' dans "menu after" et le 'padding' du "menu"et enfin j'ai ajusté le width du menu hover que Mr Champy m'avait conseillé!!!

merci beaucoup pour votre aide...

Je sais que je suis un peu long mais je compense en travaillant énormément!

encore merci des conseils

novis