0 / 0 / 0
Регистрация: 23.09.2014
Сообщений: 7

Нужен совет по редактированию меню

23.09.2014, 22:43. Показов 660. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Пишу весь скрипт, так как точно не знаю где именно проблема. Изначально скрипт был задуман с открытием после нажатия (click), я поменяла на hover, но при наведении подменю исчезает. Надо, чтобы исчезало меню при переходе на пустое место (фон сайта). http://sait.daisy.com.ua - на сайте можно в левом углу увидеть меню.
JavaScript
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
 /**
 * jquery.dlmenu.js v1.0.1
 * [url]http://www.codrops.com[/url]
 *
 * Licensed under the MIT license.
 * [url]http://www.opensource.org/licenses/mit-license.php[/url]
 * 
 * Copyright 2013, Codrops
 * [url]http://www.codrops.com[/url]
 */
;( function( $, window, undefined ) {
 
    'use strict';
 
    // global
    var Modernizr = window.Modernizr, $body = $( 'body' );
 
    $.DLMenu = function( options, element ) {
        this.$el = $( element );
        this._init( options );
    };
 
    // the options
    $.DLMenu.defaults = {
        // classes for the animation effects
        animationClasses : { classin : 'dl-animate-in-1', classout : 'dl-animate-out-1' },
        // callback: click a link that has a sub menu
        // el is the link element (li); name is the level name
        onLevelhover : function( el, name ) { return false; },
        // callback: click a link that does not have a sub menu
        // el is the link element (li); ev is the event obj
        onLinkhover : function( el, ev ) { return false; }
    };
 
    $.DLMenu.prototype = {
        _init : function( options ) {
 
            // options
            this.options = $.extend( true, {}, $.DLMenu.defaults, options );
            // cache some elements and initialize some variables
            this._config();
            
            var animEndEventNames = {
                    'WebkitAnimation' : 'webkitAnimationEnd',
                    'OAnimation' : 'oAnimationEnd',
                    'msAnimation' : 'MSAnimationEnd',
                    'animation' : 'animationend'
                },
                transEndEventNames = {
                    'WebkitTransition' : 'webkitTransitionEnd',
                    'MozTransition' : 'transitionend',
                    'OTransition' : 'oTransitionEnd',
                    'msTransition' : 'MSTransitionEnd',
                    'transition' : 'transitionend'
                };
            // animation end event name
            this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
            // transition end event name
            this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
            // support for css animations and css transitions
            this.supportAnimations = Modernizr.cssanimations,
            this.supportTransitions = Modernizr.csstransitions;
 
            this._initEvents();
 
        },
        _config : function() {
            this.open = false;
            this.$trigger = this.$el.children( '.dl-trigger' );
            this.$menu = this.$el.children( 'ul.dl-menu' );
            this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
            this.$el.find( 'ul.dl-submenu' ).prepend( '<li class="dl-back"><a href="#">inapoi</a></li>' );
            this.$back = this.$menu.find( 'li.dl-back' );
        },
        _initEvents : function() {
 
            var self = this;
 
            this.$trigger.on( 'hover.dlmenu', function() {
                
                if( self.open ) {
                    self._closeMenu();
                } 
                else {
                    self._openMenu();
                }
                return false;
 
            } );
            this.$menuitems.on( 'hover.dlmenu', function( event ) {
                
                event.stopPropagation();
 
                var $item = $(this),
                    $submenu = $item.children( 'ul.dl-submenu' );
 
                if( $submenu.length > 0 ) {
 
                    var $flyin = $submenu.clone().css( 'opacity', 0 ).insertAfter( self.$menu ),
                        onAnimationEndFn = function() {
                            self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classout ).addClass( 'dl-subview' );
                            $item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
                            $flyin.remove();
                        };
 
                    setTimeout( function() {
                        $flyin.addClass( self.options.animationClasses.classin );
                        self.$menu.addClass( self.options.animationClasses.classout );
                        if( self.supportAnimations ) {
                            self.$menu.on( self.animEndEventName, onAnimationEndFn );
                        }
                        else {
                            onAnimationEndFn.call();
                        }
 
                        self.options.onLevelhover( $item, $item.children( 'a:first' ).text() );
                    } );
 
                    return false;
 
                }
                else {
                    self.options.onLinkhover( $item, event );
                }
 
            } );
 
            this.$back.on( 'hover.dlmenu', function( event ) {
                
                var $this = $( this ),
                    $submenu = $this.parents( 'ul.dl-submenu:first' ),
                    $item = $submenu.parent(),
 
                    $flyin = $submenu.clone().insertAfter( self.$menu );
 
                var onAnimationEndFn = function() {
                    self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.classin );
                    $flyin.remove();
                };
 
                setTimeout( function() {
                    $flyin.addClass( self.options.animationClasses.classout );
                    self.$menu.addClass( self.options.animationClasses.classin );
                    if( self.supportAnimations ) {
                        self.$menu.on( self.animEndEventName, onAnimationEndFn );
                    }
                    else {
                        onAnimationEndFn.call();
                    }
 
                    $item.removeClass( 'dl-subviewopen' );
                    
                    var $subview = $this.parents( '.dl-subview:first' );
                    if( $subview.is( 'li' ) ) {
                        $subview.addClass( 'dl-subviewopen' );
                    }
                    $subview.removeClass( 'dl-subview' );
                } );
 
                return false;
 
            } );
            
        },
        closeMenu : function() {
            if( this.open ) {
                this._closeMenu();
            }
        },
        _closeMenu : function() {
            var self = this,
                onTransitionEndFn = function() {
                    self.$menu.off( self.transEndEventName );
                    self._resetMenu();
                };
            
            this.$menu.removeClass( 'dl-menuopen' );
            this.$menu.addClass( 'dl-menu-toggle' );
            this.$trigger.removeClass( 'dl-active' );
            
            if( this.supportTransitions ) {
                this.$menu.on( this.transEndEventName, onTransitionEndFn );
            }
            else {
                onTransitionEndFn.call();
            }
 
            this.open = false;
        },
        openMenu : function() {
            if( !this.open ) {
                this._openMenu();
            }
        },
        _openMenu : function() {
            var self = this;
            // clicking somewhere else makes the menu close
            $body.off( 'hover' ).on( 'hover.dlmenu', function() {
                self._closeMenu() ;
            } );
            this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
                $( this ).removeClass( 'dl-menu-toggle' );
            } );
            this.$trigger.addClass( 'dl-active' );
            this.open = true;
        },
        // resets the menu to its original state (first level of options)
        _resetMenu : function() {
            this.$menu.removeClass( 'dl-subview' );
            this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
        }
    };
 
    var logError = function( message ) {
        if ( window.console ) {
            window.console.error( message );
        }
    };
 
    $.fn.dlmenu = function( options ) {
        if ( typeof options === 'string' ) {
            var args = Array.prototype.slice.call( arguments, 1 );
            this.each(function() {
                var instance = $.data( this, 'dlmenu' );
                if ( !instance ) {
                    logError( "cannot call methods on dlmenu prior to initialization; " +
                    "attempted to call method '" + options + "'" );
                    return;
                }
                if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                    logError( "no such method '" + options + "' for dlmenu instance" );
                    return;
                }
                instance[ options ].apply( instance, args );
            });
        } 
        else {
            this.each(function() {  
                var instance = $.data( this, 'dlmenu' );
                if ( instance ) {
                    instance._init();
                }
                else {
                    instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
                }
            });
        }
        return this;
    };
 
} )( jQuery, window );
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
23.09.2014, 22:43
Ответы с готовыми решениями:

Нужен совет с прыгающим меню
Здравствуйте, подскажите как сделать прыгающие меню с появлением последующиго прыгающего меню при выборе в первом. К примеру в первом...

Вариант свободно раскрывающегося меню div+jQuery нужен совет
Всем день добрый! Поставил себе задачку на jQuery соорудить следующий эффект Вначале все пункты меню (или не меню, вариантов применения...

Нужен совет по редактированию шаблона сайта
Здравствуйте, ребята. Скачал шаблон сайта в сети. Он на английском изначально. На английском все нормально отображается. Стал менять на...

2
Модератор
 Аватар для Thisman
771 / 352 / 142
Регистрация: 17.07.2013
Сообщений: 992
24.09.2014, 08:37
Daisy, у вас так и работает. Между кнопкой меню и самим меню есть фон, поэтому срабатывает событие unhover ( это мое название события, суть в том, что выделение спадает с кнопки меню )
Повесть все в один контейнер, что бы он по площади вмещал себя и кнопку и само подменю. Далее уже работайте с ним, точнее проверяйте если мышка ушла с кнопки на контейнер, то не закрывайте подменю
1
0 / 0 / 0
Регистрация: 23.09.2014
Сообщений: 7
24.09.2014, 16:38  [ТС]
Интересует решение еще одной проблемы. Это плагин WP и в "меню" есть подменю, но почему-то они не отображаются на сайте. Как это исправить?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
24.09.2014, 16:38
Помогаю со студенческими работами здесь

нужен совет по редактированию записей в файле
доброго времени суток. сейчас изучая в колледже паскаль, дошли до темы файлы. из-за потрясающих способностей группы в целом, препод в...

Нужен совет по редактированию базы данных на С#, Unity3d
Здравствуйте. Суть проблемы в следующем: есть игра(мобильное приложение, веб-версия...), разработанная на Unity3d. Как из скрипта,...

Требуется совет по редактированию нетипизированного файла
В символьном файле заменить все последовательности идущих подряд символов одним символом, т.е. &quot;сжать&quot; файл. program pepelaz; ...

Выделение активного пункта меню. Нужен совет!
Доброго времени суток, форумчане! Я в принципе нуб в CSS, помогите решить задачу. Необходимо выделить активные пункты меню (выделяется...

Нужен совет по css для выпадающего меню
Структура меню &lt;ul class=&quot;nice-menu1&quot;&gt; &lt;li&gt;&lt;a...&lt;/li&gt; &lt;li&gt;&lt;a...&lt;/li&gt; &lt;li&gt; &lt;a...&gt; &lt;ul class=&quot;nice1&quot;&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru