source: spip-zone/_squelettes_/median/inc-menuDD.html @ 32153

Last change on this file since 32153 was 32153, checked in by neofutur777@…, 10 years ago

ajout du CDATA pour la validation plus qu une erreur a eclater sur http://ww7.pe

File size: 4.8 KB
Line 
1[(#REM) le nécessaire pour le menu de navigation dynamicDrive ]
2
3  <link rel="stylesheet" type="text/css" href="#CHEMIN{jqueryslidemenu.css}" />
4   
5  <!--[if lte IE 7]>
6  <style type="text/css">
7    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
8  </style>
9  <![endif]-->
10 
11<!--  on utilise hoverIntent principalement pour pouvoir donner une latence au onmouseOut  -->
12  <script type="text/javascript" src="#CHEMIN{jquery.hoverIntent.min.js}"></script>
13 
14  <script type="text/javascript">
15  /* <![CDATA[ */
16    // http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
17    // ici on utilise le fichier menuDD/jqueryslidemenu.js dans un script intégré pour pouvoir passer les valeurs #CHEMIN{...}
18   
19    //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
20// pour pas faire passer à la ligne le menu, on réduit le padding right des cases quitte à chevaucher les flêches bas
21//    var arrowimages={down:['downarrowclass', '#CHEMIN{down.gif}', 23],
22    var arrowimages={down:['downarrowclass', '#CHEMIN{down.gif}', 3],
23                     right:['rightarrowclass', '#CHEMIN{right.gif}']}
24   
25    var jqueryslidemenu={
26       
27        animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
28       
29        buildmenu:function(menuid, arrowsvar){
30                jQuery(document).ready(function($){
31                        var $mainmenu=$("#"+menuid+">ul")
32                        var $headers=$mainmenu.find("ul").parent()
33                        $headers.each(function(i){
34                                var $curobj=$(this)
35                                var $subul=$(this).find('ul:eq(0)')
36                                this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
37                                this.istopheader=$curobj.parents("ul").length==1? true : false
38                                $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
39                                $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
40                                        '<img alt="image header" src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
41                                        +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
42                                        + '" style="border:0;" />'
43                                )
44/* le code de base, sans hoverIntent
45                                $curobj.hover(
46                                        function(e){
47                                                var $targetul=$(this).children("ul:eq(0)")
48                                                this._offsets={left:$(this).offset().left, top:$(this).offset().top}
49                                                var menuleft=this.istopheader? 0 : this._dimensions.w
50                                                menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
51                                                if ($targetul.queue().length<=1) //if 1 or less queued animations
52                                                        $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
53                                        },
54                                        function(e){
55                            var $targetul=$(this).children("ul:eq(0)")
56                                                $targetul.slideUp(jqueryslidemenu.animateduration.out)
57                                        }
58                                ) //end hover
59*/               
60                                $curobj.hoverIntent({
61                                        over: function(e){ // function = onMouseOver callback (required)
62                                                var $targetul=$(this).children("ul:eq(0)")
63                                                this._offsets={left:$(this).offset().left, top:$(this).offset().top}
64                                                var menuleft=this.istopheader? 0 : this._dimensions.w
65                                                menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
66                                                if ($targetul.queue().length<=1) //if 1 or less queued animations
67                                                        $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
68                                        },
69                                        out: function(e){ // function = onMouseOut callback (required)
70                            var $targetul=$(this).children("ul:eq(0)")
71                                                $targetul.slideUp(jqueryslidemenu.animateduration.out)
72                                        },
73                        sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
74                        interval: 100,   // number = milliseconds of polling interval
75                        timeout: 300   // number = milliseconds delay before onMouseOut function call
76                                }) //end hover
77                   
78                        }) //end $headers.each()
79                        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
80                }) //end document.ready
81        }  // end buildmenu
82    } // end jqueryslidemenu
83   
84    //build menu with ID="myslidemenu" on page:
85    jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
86        /* ]]> */
87  </script>
Note: See TracBrowser for help on using the repository browser.