Discussion :

[pierrot10]

Bonjour à tous,

J'ai recupérer un code qui me permets de dérouler mes sous menu.

Ce code me plait, mais j'aimerais avoir l'option que les sous-menu se deroule orizotalement.

Je ne peux le faire que verticalement

Alors j'essaye de modifier le code.

Je mettrai le code complet qui n'est pas enorme.

Je pesne que je dois agir sur cette partie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$this.hover(function () {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                //$this.css('border','3px solid #ff22ff')
                $this.trigger(showEvent);
            });

A savoir que la class open s'ajoute sur le li qui le parent du ul que je soihaite qui s'affiche sur sa droite, et se deploie verticalement

J'ai ajouter ce qui est en commentaie.
J'aimerais remplacer ceci pour que le ul enfant au li se déploie horizontalement , sur la droite, et juste en bordure du li, au meme niveau. Et que se dernier se deploie verticalement.

Et ainsi de suite, le prochaine sous menu de deploie a droite du li (donc a l'horizontal) et il se deploie verticalement.

Je n'arrive pas deja remplacer ceci
//$this.css('border','3px solid #ff22ff')

J'ai essayl ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$this.find('ul.dropdown-menu').css('background-color','#ff22ff');

Pour qu'il agisse sur le ul enfant au li.

Pourriez-vous me guider?

merci

[pierrot10]

J'ai partielement trouvé.

Je ne devais pas faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$this.find('.dropdown-menu').css("background-color", "red");

mais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$parent.find('.dropdown-menu').css("background-color", "red");

Le truc maintenant est de le déplacer à droite, à une distance egal à la largeur du li.

Je ne comprends pas pourquoi quand je change ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  $parent.find('.dropdown-menu').css("position", "absolute");
                $parent.find('.dropdown-menu').css("right", "20px");

Il n'y a absolument rien qui se passe.
Il devait au moin se deplacer de 20px, non?

[pierrot10]

Ben j'ai trouvé, mais suis pas trop confient sur mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
  // this helps with button groups!
            $this.hover(function () {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.find('.dropdown-menu').css("position", "absolute").css("top","0px").css("left",$parent.width());
                $this.trigger(showEvent);
            });

Voici le code complet de la fonction

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
 
$.fn.droprightHover = function (options) {
        // don't do anything if touch is supported
        // (plugin causes some issues on mobile)
        if('ontouchstart' in document) return this; // don't want to affect chaining
 
        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());
 
        return this.each(function () {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                showEvent   = 'show.bs.dropdown',
                hideEvent   = 'hide.bs.dropdown',
                // shownEvent  = 'shown.bs.dropdown',
                // hiddenEvent = 'hidden.bs.dropdown',
                settings = $.extend(true, {}, defaults, options, data),
                timeout;
 
            $parent.hover(function (event) {
 
                // so a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    // stop this event, stop executing any code 
                    // in this callback but continue to propagate
                    return true; 
                }
 
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $this.trigger(showEvent);
            }, function () {
                timeout = window.setTimeout(function () {
                    $parent.removeClass('open');
                    $this.trigger(hideEvent);
                }, settings.delay);
            });
 
            // this helps with button groups!
            $this.hover(function () {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');
 
                window.clearTimeout(timeout);
                $parent.addClass('open');
                $parent.find('.dropdown-menu').css("position", "absolute").css("top","0px").css("left",$parent.width());
                $this.trigger(showEvent);
            });
 
            // handle submenus
            $parent.find('.dropdown-submenu').each(function (){
                var $this = $(this);
                var subTimeout;
                $this.hover(function () {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();
                    alert("3");
                    // always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function () {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function () {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

Que me diriez-vous pour mieux faire?

[NoSmoking]

Bonjour,
l'essentiel se passant dans la déclaration du style de la class open, autant utiliser celle ci en modifiant son CSS. Ensuite faire comme c'est fait dans le code initial en ajoutant/supprimant la class open.