Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 23.09.2014
Сообщений: 7

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

23.09.2014, 22:43. Показов 652. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru