Menu coulissant gauche/droite

J'ai ce menu qui est essentiellement une barre coulissante horizontale. Tous les éléments de menu ont des propriétés css par défaut spécifiques. Je veux que les éléments changent leur taille et leurs marges gauche/droite quand ils atteignent le centre du conteneur principal et rétablissent les valeurs par défaut quand ils le quittent (ou sont en dehors de celui-ci). Voir mon schéma.Menu coulissant gauche/droite

enter image description here

Il y a un bouton gauche/droite qui déclenchera quelle direction il va glisser. Je sais qu'il existe des bibliothèques pour ce genre de choses, mais je veux vraiment la chose la plus simple possible. Voici le balisage HTML:

<div id="leftBtn">Left</div> 
<div id="rightBtn">Right</div> 

<div id="centerArea"> 
    <div id="menuContainer"> 
     <div id="menuItem_1" class="menuItem"></div> 
     <div id="menuItem_2" class="menuItem"></div> 
     <div id="menuItem_3" class="menuItem"></div> 
     <div id="menuItem_4" class="menuItem"></div> 
    </div> 
</div>

... et le fiddle.

Merci.

Pedro

Source

2013-04-10 Pedro

menuItem_position = - (menuItem_place * 200) +25; http://jsfiddle.net/2Vngt/1/ –

Cela résout le problème de centrage. Merci David! Vous ne savez pas comment définir différentes valeurs CSS pour la zone centre intérieur/extérieur, n'est-ce pas? – Pedro

la meilleure chose serait d'ajouter une classe css à l'élément actif: http://jsfiddle.net/2Vngt/3/ –

Essayez cette jsfiddle

Il suit l'approche suivante * enfermer le contenu de .menuItem dans un autre récipient, .container afin qu'il puisse se déplacer librement à l'intérieur est parent. * utilisez le menuItem_place pour obtenir le .menuItem qui est au centre.

Source

2013-04-10 11:52:38 Ejaz

Fonctionne bien aussi! Au fait, est-il possible d'avoir aussi une option mouseover + click? – Pedro

oui certainement, en utilisant CSS ': hover' ou' jQuery.hover (.., ..) '.. Edit: ah, voulez-vous dire' click menuItem pour faire défiler la prochaine'? – Ejaz

Pas les boutons. :) Je voulais dire les articles eux-mêmes - lorsque vous cliquez sur les amener au milieu. – Pedro

Menu coulissant gauche/droite

Répondre

Questions connexes