[WP.org] Sous menu (avec wp_nav_menu) pas affecté par un overflow

• 

  airo9993 · Membre · janvier 26, 2022 at 8:52

  • Copier le lien
  • Ajouter le thème aux favoris

  Bonjour à vous,
  Pour un stage, j’ai besoin de faire un effet de grossissement/agrandissement d’une image en CSS dans mon sous-menu mais je veux pas que l’image s’agrandisse pour autant (l’effet escompté est un effet du sous-menu de ce site : https://www.clsh-lannilis.com/), j’ai essayé avec le overflow, le display etc mais j’arrive pas à trouver la solution à mon problème.

  Quelqu’un aurait une idée à mon problème ?

  Voici mon code CSS:

  #nav-option{
      background: #5161ce;
    }
  #nav-option ul{
       display: flex;
       flex-direction: row; 
       list-style:none;
       margin: 0 auto;
       padding: 0;
    }
    
  #nav-option li{
      text-transform: uppercase;
    }
    
  #nav-option a{
      text-decoration: none;
      color: #fff;
    }
  
  #nav-option ul li a{
      padding: 20px 20px;
      position: relative;
      transition: color .30s;
    }
   
  #nav-option ul li a:before{ /*animation de la barre*/
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      left: 0;
      bottom: 0;
      background: #37b4f8;
      transition: width.30s;
    } 
  /**********************************************/ 
  #nav-option ul li ul > #nav-link:focus,
    #nav-link:hover{
      color: #37b4f8;
    }
  /**********************************************/
  #nav-option ul li a:hover{
       color: #37b4f8;
    }
    
  #nav-option ul li a:hover:before{
      content: '';
      width: 100%;
    }
  #nav-option ul li ul{ /*SUB MENU*/
      position:absolute;
      overflow: hidden;
      left: 200;
      /* height: 5000; */
      opacity: 0;
      top:calc(100%);
      background-color: #5161ce; /*FOND DU SUB MENU*/
      padding: 10;
      margin: 10;
      border-radius:.25em;
      box-shadow:0 2px 5px 0 rgba(0,0,0,1);
      pointer-events: none;
      transform: translateY(-20px);
      transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
    }
  #nav-option ul li:hover ul{ /*transition+apparition du dropdown menu*/
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto; /*REACTIVATION DE L'INTERACTION AVEC L'INTERFACE*/
    }
  
  #nav-option ul li ul li{ /*selectionne les items en sub-menu*/ /*j'aime bien sans*/
      display: grid;
      grid-template-columns: repeat(2, max_content);
      background-image: url('img/image_1.jpg');
      background-position: center; /*RECENTRAGE IMAGE*/
      background-size: cover;
      padding: 35px; /*FORMATION DU SOUS MENU*/
      margin: 25px;
      /****************/
      position: static; /*POSITION*/
      overflow: hidden;
      text-align: center;
      height: 150px; /*TAILLE*/
      width: 300px;
      -moz-transition: all 0.5s; /*TRANSITION + ANIMATION*/
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
    }
  #nav-option ul li ul li:hover{
      -moz-transform: scale(1.1); /*AGRANDISSEMENT IMAGE*/
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      filter: brightness(75%); /*ASSOMBRISSMENT*/
    }
  #nav-option ul li ul li:hover a{
    border: 1px solid #333;
    -moz-transform: scale(1.1); /*AGRANDISSEMENT IMAGE*/
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    
  /**********************************************************************************************************/
  
  @media (max-width: 768px){
  	#nav-option ul{
        display: flex;
        flex-direction: column;  
        justify-content:center;
      }
      
      #nav-option ul li a{
        display: flex;
        justify-content: center;
      }
      
      #nav-option ul li a:before{
        right: 0;
        left: 0;
        bottom: 0;
      }
    }

  Merci à vous

• 

  airodyssey · Modérateur · janvier 26, 2022 at 12:33

  • Copier le lien

  Bonjour. Vous êtes sur le forum WordPress.com. Nous sommes habilités à répondre uniquement aux questions sur les sites WordPress qui sont hébergés par WordPress.com.

  Votre site fonctionne lui aussi sous WordPress, mais il n’est pas hébergé sur les serveurs de WordPress.com. Veuillez donc reposer votre question à l’adresse : https://wpfr.net/support/

  Pour mieux comprendre, je vous invite à lire attentivement cette annonce importante : https://wordpress.com/fr/forums/topic/important-ce-forum-est-reserve-aux-sites-heberges-par-wordpresscom/

  Merci et bonne continuation.