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

JavaScript Discussion :

Open close des sous menu


Sujet :

JavaScript

  1. #1
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2010
    Messages : 2
    Par défaut Open close des sous menu
    Bonjours a tous.

    J'ai un menu déroulant horizontal.

    Voici les codes :

    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    var ddsmoothmenu={
     
    arrowimages: {down:[23], right:[]},
    transition: {overtime:300, outtime:300}, 
    shadow: {enable:true, offsetx:5, offsety:5}, 
    showhidedelay: {showdelay: 100, hidedelay: 200}, 
     
    detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, 
    detectie6: document.all && !window.XMLHttpRequest,
     
    getajaxmenu:function($, setting){ 
    	var $menucontainer=$('#'+setting.contentsource[0]) 
    	$menucontainer.html("Loading Menu...")
    	$.ajax({
    		url: setting.contentsource[1],
    		async: true,
    		error:function(ajaxrequest){
    			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
    		},
    		success:function(content){
    			$menucontainer.html(content)
    			ddsmoothmenu.buildmenu($, setting)
    		}
    	})
    },
     
     
    buildmenu:function($, setting){
    	var smoothmenu=ddsmoothmenu
    	var $mainmenu=$("#"+setting.mainmenuid+">ul") 
    	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
    	var $headers=$mainmenu.find("ul").parent()
    	$headers.hover(
    		function(e){
    			$(this).children('a:eq(0)').addClass('selected')
    		},
    		function(e){
    			$(this).children('a:eq(0)').removeClass('selected')
    		}
    	)
    	$headers.each(function(i){ 
    		var $curobj=$(this).css({zIndex: 100-i}) 
    		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
    		$subul.data('timers', {})
    		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
    		this.istopheader=$curobj.parents("ul").length==1? true : false 
    		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
    		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( 
    			'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
    			+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
    			+ '" style="border:0;" />'
    		)
    		$curobj.hover(
    			function(e){
    				var $targetul=$subul 
    				var header=$curobj.get(0) 
    				clearTimeout($targetul.data('timers').hidetimer)
    				$targetul.data('timers').showtimer=setTimeout(function(){
    					header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
    					var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
    					menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft 
    					if ($targetul.queue().length<=1){ 
    						$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
    						if (smoothmenu.shadow.enable){
    							var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
    							var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
    							if (!header.istopheader && ddsmoothmenu.detectwebkit){ 
    								header.$shadow.css({opacity:1})
    							}
    							header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
    						}
    					}
    				}, ddsmoothmenu.showhidedelay.showdelay)
    			},
    			function(e){
    				var $targetul=$subul
    				var header=$curobj.get(0)
    				clearTimeout($targetul.data('timers').showtimer)
    				$targetul.data('timers').hidetimer=setTimeout(function(){
    					$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
    					if (smoothmenu.shadow.enable){
    						if (ddsmoothmenu.detectwebkit){ 
    							header.$shadow.children('div:eq(0)').css({opacity:0})
    						}
    						header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
    					}
    				}, ddsmoothmenu.showhidedelay.hidedelay)
    			}
    		) 
    	}) 
    	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
    },
     
    init:function(setting){
    	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ 
    		var mainmenuid='#'+setting.mainmenuid
    		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
    		document.write('<style type="text/css">\n'
    			+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
    			+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
    		+'</style>')
    	}
    	this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable
    	jQuery(document).ready(function($){ 
    		if (typeof setting.contentsource=="object"){ 
    			ddsmoothmenu.getajaxmenu($, setting)
    		}
    		else{ 
    			ddsmoothmenu.buildmenu($, setting)
    		}
    	})
    }
     
    }
    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <script type="text/javascript">
    			ddsmoothmenu.init({
    				mainmenuid: "menu", 
    				orientation: 'h', 
    				classname: 'ddsmoothmenu', 				
    				contentsource: "markup" 
    			})
    		</script>
    	</head>
    	<body>
    		<div id="page">
    			<div id="menu">
    			<ul>
    			<li><a href="">Site Map</a></li>
    			<li><a href="#">Folder 0</a>
    			  <ul>
    			  <li><a href="#">Sub Item 1.1</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  </ul>
    			</li>
    			<li><a href="#">Folder 1</a>
    			  <ul>
    			  <li><a href="#">Sub Item 1.1</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  </ul>
    			</li>
    			<li><a href="#">Folder 2</a>
    			  <ul>
    			  <li><a href="#">Sub Item 1.1</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  </ul>
    			</li>
    			<li><a href="#">Folder 3</a>
    			  <ul>
    			  <li><a href="#">Sub Item 1.1</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  </ul>
    			</li>
    			<li><a href="#">Folder 4</a>
    			  <ul>
    			  <li><a href="#">Sub Item 1.1</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  <li><a href="#">Sub Item 1.2</a></li>
    			  <li><a href="#">Sub Item 1.3</a></li>
    			  <li><a href="#">Sub Item 1.4</a></li>
    			  </ul>
    			</li>
    			</ul>
     
    			</ul>
    			<br style="clear: left" />
    			</div>
    J'aimerais avoir un nouveau bouton. Ou lorsque je clique sur site map par exemple. Il m'ouvre tous les sous menu, et me les referme que si je reclique sur le bouton en question.

    Comment faire ceci.

    Lien vers le menu déroulant en question : http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    Merci de votre aide

    Cordialement

  2. #2
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Bonjour,

    tu peux essayer quelque chose dans le genre :
    * créer un style css qui défini que les ul sont visibles (.showallul ul li ul {display:block !important;}
    * lors du clic sur ton bouton il suffit de positionner ou non showallul dans les classes du DIV#menu

    devyan

  3. #3
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    Juin 2010
    Messages
    2
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2010
    Messages : 2
    Par défaut
    Citation Envoyé par devyan Voir le message
    Bonjour,

    tu peux essayer quelque chose dans le genre :
    * créer un style css qui défini que les ul sont visibles (.showallul ul li ul {display:block !important;}
    * lors du clic sur ton bouton il suffit de positionner ou non showallul dans les classes du DIV#menu

    devyan
    je vois se que tu veux dire.

    mais je vois pas comment le faire, si je n'est pas de nouvelle fonctions javascript

  4. #4
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Citation Envoyé par justforme Voir le message
    je vois se que tu veux dire.

    mais je vois pas comment le faire, si je n'est pas de nouvelle fonctions javascript
    Effectivement puisque tu veux modifier le comportement par défaut du menu, il va falloir écrire de "nouvelles fonctions javascript" (en fait une seule )

Discussions similaires

  1. arborescence des sous Menu
    Par craesys dans le forum VB 6 et antérieur
    Réponses: 6
    Dernier message: 21/08/2008, 20h23
  2. emplacement des sous menu par rapport aux menus principaux
    Par newmar dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 14/05/2008, 17h10
  3. open.close différent sous XP et 2000 ?
    Par _sybe_ dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 17/10/2007, 16h36
  4. probleme d'affichage des sous menu! FF/IE7/IE6
    Par hybride1106 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 04/09/2007, 10h47
  5. Réponses: 9
    Dernier message: 14/10/2003, 15h35

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