28172 sujets

CSS et mise en forme, CSS3

Menu avec changement d'image et transition au survol

Salut,

Je suis en train de créer un menu, je l'ai refait plusieurs fois, il n'est toujours pas placé au bon endroit, mais bon déjà j'aimerais bien qu'il fonctionne ^^

j'ai mon code html qui ressemble à ça :
<div id="menu">
					<div class="bouton">
						<a href="http://localhost/prune-plum/" id="accueil">
							<h1>Accueil</h1>
						</a>
					</div>
					<div class="bouton">
						<a href="http://localhost/prune-plum/"  id="oeuvres">
							<h1>Oeuvres</h1>
						</a>	
					</div>
					<div class="bouton">
						<a href="http://localhost/prune-plum/" id="fabrication">
							<h1>Fabrication</h1>
						</a>
					</div>
					<div class="bouton">
						<a href="http://localhost/prune-plum/" id="contact">
							<h1>Contact</h1>
						</a>
					</div>
				</div>

et ma css : 
.bouton h1{
	transition: all 1s;
	padding-left : 50px;
}
#accueil {
	background: url(http://localhost/prune-plum/wp-content/uploads/2018/01/bouton-accueil-f.png) no-repeat;
}
#accueil h1 {
	opacity: 0;
}
#accueil h1:hover {
	opacity: 1;
	transform: translatex(50px);
}
#accueil :hover {
	background: url(http://localhost/prune-plum/wp-content/uploads/2018/01/bouton-accueil-o.png) no-repeat;
}
#accueil :active {
	background: url(http://localhost/prune-plum/wp-content/uploads/2018/01/bouton-accueil-o.png) no-repeat;
}


ça continue de même pour les 3 autres id oeuvres fabrication et contact.
Mon problème, c'est que mon image ne s'affiche qu'au survol et pas en état inactif, je ne comprends pas pourquoi.
et mon deuxième problème, c'est que mon image bouge avec le titre, alors que je voudrais qu'uniquement le titre se déplace.
Quelqu'un aurais une idée pour régler ces deux problèmes ?

Merci d'avance,
Julien
Modifié par Jiloin (05 Jan 2018 - 23:02)
Ca me parait super complexe ta structure html ... ça mériterai un peu de ménage...
ensuite pour ton effets

Déjà te prend pas la tête pour le hover, si l'effet est le même partout: 
div h1:hover {
	opacity: 1;
	transform: translatex(50px);
}


En suite pour ton effet c'est normale que l'image n'est pas présente en inactif puis que tu l'as mis en background-image sur ton :hover 

#accueil :hover {
	background: url('http://localhost/prune-plum/wp-content/uploads/2018/01/bouton-accueil-o.png') no-repeat;
}


Bref: j'ai fais ça vite fait si c'est plus ou moins ce que tu cherche:

https://codepen.io/nwx/pen/wpPKRN?editors=1100

body{
  margin: 0;
  padding: 0;

  .bouton{
    position: relative;
    height: 80px; width: 50%;
    background: url("https://i.pinimg.com/736x/da/84/85/da84855fdba2c2f2d45ecc7f91350649--landscape-photography-tips-learn-photography.jpg") center no-repeat;
    a{
      display: inline-block;
      font-size: 1.6em;
      color: white;
      position: absolute;
      top: 25%; 
      left: 20px;
      transition: all 1s;
      opacity: .5;
      &:hover{
      opacity: 1;
      transition: all 1s;
      transform: translateX(50px); 
      }
    }
  }
}


Tu mes ton image sur ta div, ta div ne bouge pas tu la met en relatif et tu positionne n'importe quoi dessus en absolute.
Ah yes bonne idée la transition pour tout le monde en même temps, ça va alléger un peu le tout Smiley langue
Ce que je peux peut être faire c'est mettre les hover et active au même endroit avec une sorte de 
#accueil :hover :active {

Je ne sait pas si c'est correct.
Par contre j'ai deux images différentes, celles pour l'état inactif, et celle pour l'état hover/active.
Tiens toi en à l'hover, pour l'état actif tu dois passer par jQuery en ajoutant une class "active" car avec :active ton click ne restera pas.

genre: 


a{ tes propriétés  }
&:hover{ tes propriétés à l'état hover};
&.active{ tes propriétés à l'état actif );

Note bien que ce n'est pas du css mais du scss au cas où si jamais...

et en JS: 

$(document).ready(function() {
var a = document.querySelector('a');
a.onclick = function() {      
	 a.classList.toggle('active');
}
});


en gros tu sélection ton élément query selector dans une var(variable)
ensuite au click ( on click) tu ajoute la class active sur ton élément.

Ah et pour ta deuxième image suffis de changer de remettre ton background et changer l'image sur ta class active, mais moi je mettrait plutôt ton background image en inline en html , si tu veux changer tu changer sans passer par css, (après j'ai vu que t'avais des image local wp c'est en vue d'être du wordpress??) et ensuite l'image qui dois changer sur ton active en css. Sinon je trouve qu' il vaut mieux mettre un filtre par dessus et juste changer la couleur, l'opacité les contraste en fonction... garde la même images.
Modifié par newger (06 Jan 2018 - 01:00)
Modérateur
Hello,

newger a écrit :
Ca me parait super complexe ta structure html ... ça mériterai un peu de ménage...


+1 mais pas dans le sens que tu penses,

Ce code html manque cruellement de sémantique approprié. À cet endroit là, le <div> pour ce que tu veux faire, n'a pas lieu d'être. Pourquoi ne pas faire comme ceci ? 

<nav>
   <ul>
       <li><a href="">bla</a></li>
       <li><a href="">bla</a></li>
       <li><a href="">bla</a></li>
   </ul>
</nav>


ou encore mieux (plus léger) :

<nav>
   <a href="">bla</a>
   <a href="">bla</a>
   <a href="">bla</a>
</nav>


newger a écrit :


$(document).ready(function() {
var a = document.querySelector('a');
a.onclick = function() {      
	 a.classList.toggle('active');
}
});



Je ne suis pas sûr qu'il y ait le comportement voulu (toggle). Que tu aies fait ce script en JS standard, c'est très bien. Tu démontres que jQuery n'a pas lieu d'être pour ce genre de tâche. Mais alors pourquoi dans ce cas là, tu demandes à jQuery d'exécuter du code natif. 


window.addEventlistener('DOMContentLoaded', function() {
    //evite d'encombrer window avec des variables générales indésirables
    (function(){
        document.querySelector('a').addEventlistener('click', function() {      
             this.classList.toggle('active');
        });
    })();
});


J'ai retranscrit ce code en une écriture plus adaptée. Cependant, je ne suis pas sûr que ce soit la solution en fonction de la question initiale. Je pense qu’à priori le JS n'est pas la solution ultime. On peut faire sans.
Modifié par niuxe (06 Jan 2018 - 17:50)
Merci pour vos réponses, même si j'avoue que du coup je suis un peu perdu, je ne connais ni le SCSS ni le JavaScript et je ne sait même pas ou les insérer ^^

Mais à la limite le active c'est pas trop grave si je l'ai pas, le truc le plus important c'est surtout d'avoir l'image en état inactif pour savoir qu'il faut aller cliquer dessus.

Ben si je mettais uniquement des liens <a href=""> l'image se plaçait derrière le texte alors que je veut qu'elle soit à gauche, du coup je me suis dit que ça serait plus simple en plaçant ça dans des div pour pouvoir les placer facilement via les flexbox, c'est probablement pas le plus propre j'avoue ^^
Grace à ça j'ai pu déplacer le texte avec un padding et garder mon image à sa place, je ne sait pas si c'est possible si je rajoute mon image directement sur le lien.
Alors, j'ai recréé entièrement mon thème via http://underscores.me/
mais il me crée un menu sous la forme suivante :
<nav id="site-navigation" class="main-navigation">
				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
				<div class="menu-menu-vertical-container"><ul id="primary-menu" class="menu"><li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-70"><a href="http://localhost/prune-plumv2/">Accueil</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://localhost/prune-plumv2/oeuvres/">Oeuvres</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://localhost/prune-plumv2/fabrication/">Fabrication</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://localhost/prune-plumv2/contact/">Contact</a></li>
</ul></div>		</nav><!-- #site-navigation -->

et du coup je ne sait pas comment le mettre en forme, la liste est actuellement dans un format de liste, mais elle apparait en ligne en non en liste.
Par contre pas de soucis pour mes images en inactif et en hover.
Comment est-ce que je peux la mettre en colonne proprement ?
Je l'ai fait avec un width:150px pour l'instant, mais j'ai l'impression que c'est n'importe quoi ^^
Modifié par Jiloin (07 Jan 2018 - 03:54)
Sujet clos
Aller à