Menu curseur horizontal

Question

J'essaye de construire un menu fixe comme l'image.
J'ai cherché un plugin jquery, mais la seule chose que j'ai trouvée était un accordéon ou un menu à onglets qui s'ouvre dans la direction verticale.
Je souhaite mettre en œuvre ce contenu de menu avec jquery + css comme flottant système de panneau de Visual Studio avec un contenu dans le sens horizontal

Avez-vous des exemples pour cela?

content http://img233.imageshack.us/img233/859/menuij.png

Answer 1

J'ai trouvé exactement ce que je dois, JQuery plug-in Tab-Slide-Out

Answer 2

Il est possible d'avoir un contenu hors page. La spécification W3C indique que les nombres négatifs sont autorisés dans le positionnement (cela fonctionne sur Firefox, pas sur l'explorateur Invalid).

Mettez les deux ensemble et la solution devient très simple:

Je suppose que vous avez déjà créé un div (avec id = « menu ») entourant l'onglet (id = « MenuTab ») et le contenu (onglet et le contenu sont eux-mêmes séparés divs). Vous pouvez utiliser le positionnement relatif ou des directives flottantes CSS simples pour obtenir l'onglet et le contenu où vous le souhaitez. Une fois que cela semble bien, ajoutez le code suivant:

$('#menutab').addClass('in'); 
var contentWidth = $('#content').width(); 

$('#menutab').click(function(){ 
    if($(this).is('.out')){ 
    $(this).removeClass('out').addClass('in'); 
    $('#menu').css({left: '-'+contentWidth}); 
    } 
    if($(this).is('.in')){ 
    $(this).removeClass('in').addClass('out'); 
    $('#menu').css({left: 0}); 
    } 
}); 

J'ai supposé que le menu est activé par défaut. L'état est maintenu par la classe associée à l'onglet de menu (entrée/sortie). Attachez simplement une fonction de rappel de clic à l'onglet du menu, cette fonction de rappel vérifie si le menu est dedans ou dehors en utilisant les classes qui lui sont assignées. Si elle est sortie, la position de gauche est définie sur moins la largeur du contenu, si elle est dans la position de gauche, elle est définie sur le bord de la page.

Si vous voulez être vraiment snazzy, vous pouvez utiliser la fonction .animate() de jquery pour qu'il glisse dedans et dehors. Mais je pense à ces choses comme un gaspillage de ressources navigateur parce que je grandi faire le codage scientifique, de sorte que vous devrez travailler que peu vous-même;)