[HTML][CSS]Menu

Résolu

CrazyLegy Messages postés 33 Statut Membre -
Kopros Messages postés 631 Statut Membre - 3 nov. 2014 à 17:02

Bonjour,

je code en HTML et CSS et j'ai besoin d'aide.

Je veux faire un petit menu mais je bloque à un endroit.

Voila le code CSS:

#mini_menu{
	background-color: DimGrey;
	width: 30px;
	height: 30px;
	border: Black 1px solid;
	border-radius: 5px;
	transition: width 1s;
	}

#mini_menu:hover{
	width: 100px;
	transition: width 1s;
	}

Voila le code HTML:


<div id="mini_menu">
   <img src="Test HTML/index.png"/><a href="index.html">Accueil</a>
</div>

Je voudrais que le mot Accueil soit aligner à l'image et qu'il apparaisse quand la sourie survole l'image.

Merci d'avance.

Afficher la suite

2 réponses

Réponse 1 / 2
Kopros Messages postés 631 Statut Membre 89
Ajoute ça à ton code CSS :
```
#mini_menu * {
      display: inline-block;
      vertical-align: middle;
}
```
Ainsi, tous les éléments enfants de #mini_menu auront le display inline-block, qui est très utile (ça prend les avantages des blocks, pour les dimensions notamment, et des inlines, pour éviter que les éléments suivants ne se placent en dessous. )

+ d'explications : https://www.alsacreations.com/article/lire/1209-display-inline-block.html
0
Réponse 2 / 2
CrazyLegy Messages postés 33 Statut Membre

Merci pour la réponse rapide, je testerais ça plus tard.
0
1. CrazyLegy Messages postés 33 Statut Membre
  
  J'ai ajouté le code, le mot accueil est bien aligné mais j'aimerai bien qu'il s'affiche qu'au survol de la souris au fur et à mesure que la div grandit .
  
  Merci :)
  
  PS: Dites-moi si je vous en demande trop :/
  
  0
2. Kopros Messages postés 631 Statut Membre 89
  
  Ah pardon j'avais zappé la 2e partie de la question ^^
  
  Voici le code :
  #mini_menu a{
  visibility: hidden;
  }
  
  #mini_menu:hover a{
  visibility: visible;
  }
  
  Et pour que l'effet de transition fonction, modifie dans ton code ceci :
  transition: width 1s;
  
  par cela :
  transition: all 1s;
  
  0
3. CrazyLegy Messages postés 33 Statut Membre
  
  Merci pour vos réponses mais je pense que le mieux serais d'utiliser du Javascript.
  
  Du coup j'ai essayé de coder sa, mais sa fait cracher mon navigateur xD
  
  Code HTML:
  
  <div id="mini_menu">
  <img src="index.png"/>
  <a href="index.html" id="okk">Accueil</a>
  </div>
  
  Code JS:
  
  <script>
  while (document.getElementById('mini_menu').style.width != "100px"){
  document.getElementById('okk').style.visibility = "hidden";
  }
  </script>
  
  0
4. Kopros Messages postés 631 Statut Membre 89
  
  Oui il fait faire gaffe avec ce genre de boucles, ça peut prendre de la ressource inutilement !
  
  Pourquoi ne pas passer par du css ? Pour la rétro-compatibilité ? (parce que ça marche même sur les anciens navigateurs qui supportent le css2)
  
  Si tu tiens au js, je te conseille d'utiliser la bibliothèque jQuery :
  - Tu la télécharges ici : https://jquery.com/download/
  - Tu fais appel au fichier js dans ton html
  - Et tu places ce code entre </body> et </html> :
  
  <script type="text/javascript">
  $('#mini_menu").hover(function(){
  $('#okk').css('visibility','visible');
  }, function(){
  $('#okk').css('visibility','hidden');
  });
  }
  </script>
  
  Voilà et dans le fichier css tu dis bien que #okk a la visibility hidden.
  
  0
5. CrazyLegy Messages postés 33 Statut Membre
  
  J'ai pas réussi à faire marcher le code mais c'est pas grave je trouverais un autre moyen :) .
  
  0

[HTML][CSS]Menu

2 réponses

Discussions similaires

Newsletters