IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jQuery, mise en page, et menu à onglet.


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 4
    Par défaut jQuery, mise en page, et menu à onglet.
    Bonjour à tous, et merci de vous intéresser à mon problèmes ! =)

    Je développe actuellement un menu à onglets, mélant la fonction .animate() de jQuery et CSS.

    J'ai plusieurs problèmes :

    1- Lorsque je clique sur "Cellule", le menu se place à coté de "Menu", au lieu de se placer en dessous
    2- je n'arrive pas à faire apparaitre les borders des menus non sélectionnés


    c'est tout pour le moment... ^^'

    Voici les codes :

    HTML :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    <!DOCTYPE html>
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="menu.css" /> 
    	<script src="jQuery.js"></script>
     
    </head>
    <body>
    <div id="Menu">
     
    	<div id="conteneur">
    		<div id="boutonMenu"><a href="" Title="Afficher le Menu"><img src="./Images/transparant.gif" Title="Afficher menu"></a></div>
    		<ul id="blockMenu">
    			<li onclick="controleur.nouveauMonde();">Nouveau Monde</li>
    			<li><a href="javascript:window.close()">Quitter</a></li>
    		</ul>	
    		<div id="boutonCellule"><a href="" Title="Afficher le Menu"><img src="./Images/transparant.gif" Title="Afficher Cellules"></a></div>	
    		<ul id="blockCellule">
    			<li onclick="controleur.nouveauMonde();">Cellule 1</li>
    			<li><a href="javascript:window.close()">Cellule 2</a></li>
    		</ul>
    	</div>
     
     
    </div>
     
    <script src="Menus.js"></script>
     
    </body>
    </html>

    Le CSS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    #Menu {
    	width : 430px;
    }
     
    #conteneur{
    z-index : 1;
    width : 200px;
    height : 600px;
    border : 1px solid black;
    }  
     
    #boutonMenu {
    z-index: 2;
    float : left;
    position:relative;
    width : 30px;
    height : 130px;
    left : 200px;
    background-image : url(./Images/menu.png);
    }
    #boutonCellule {
    z-index : 0;
    float : left;
    position:relative;
    width:30px;
    height : 130px;
    left:200px;
    background-image : url(./Images/menu_cellule.png);
    }
     
     
    #blockMenu {
    width:100px;
    height : 110px;
    }
    #blockCellule {
    width:100px;
    height : 110px;
    }
    Et enfin le javascript (utilisant jQuery v1.5, me semble-t-il) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
     
    $("#boutonMenu>a").click(function(){
    	$("#blockMenu").animate({
    		opacity : 'show',
    		width : "170px"
    	}, 'fast' );
    	$("#blockCellule").animate({
    		opacity : 'hide',
    		width : "170px"
    	}, 'fast' );
    	$("#boutonCellule").animate({
    		 borderLeftWidth: '1px'
    	}, 'fast' );
    	$("#conteneur").animate({
    		left : "10px",
    		width : "200px"
    	}, 'fast' );
    	return false; 
    });
     
    $("#boutonCellule>a").click(function(){
    	$("#blockCellule").animate({
    		opacity : 'show',
    		width: "170px"
    	}, 'fast' );
    	$("#blockMenu").animate({
    		opacity : 'hide',
    		width: "170px"
    	}, 'fast' );
    	$("#boutonMenu").animate({
    		left : "200px",
    		border : "1px"
    	}, 'fast' );
    	$("#conteneur").animate({
    		left : "10px",
    		width : "200px"
    	}, 'fast' );
    	return false; 
    });

    J'ai essayé plusieurs choses. Pour le problème de bouton, j'ai triché en positionnant de manière définie le bouton, ce en fonction de l'onglet selectionné. Ca marche à peine, et c'est très moche.

    Concernant mon problème de bordures, j'ai essayé de bidouiller les z-index, d'utiliser une image transparante, mais bon, je n'y arrive pas...

    J'utilise des images de 30x130 : 1 pour l'onglet "Menu", une pour l'onglet "Cellule", et un transparante qui recouvre celle-ci. (Les images Menu et Cellule sont défini en tant que background image).

    Merci d'avance à ceux qui auront le courage de m'aider !

    Voilà ! Bonne soirée !
    Images attachées Images attachées    

Discussions similaires

  1. Problème de mise en page avec Menu
    Par Luke spywoker dans le forum Tkinter
    Réponses: 1
    Dernier message: 11/12/2010, 07h12
  2. Mise en page CSS: menu élastique?
    Par glourby dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 09/10/2008, 17h14
  3. Mise en page d'un menu
    Par babafredo dans le forum ASP.NET
    Réponses: 2
    Dernier message: 28/12/2007, 14h25
  4. [Menu deroulant] Mise en page.
    Par Arbisis dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 16/05/2007, 12h03
  5. mise en page, superposition du menu et du bas de page
    Par takinelinfo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 05/11/2006, 21h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo