Editar el menú de una web responsive para que aparezca desplegado
Publicado por Alonso (1 intervención) el 03/09/2018 19:57:19
Hola, estoy editando una web en wordpress. El problema está cuando abro la web en moviles, ya que al ser responsive el menú se contrae y aparece un botón de menú.
Lo que quiero hacer es que el menú aparezca desplegado desde un comienzo cuando entran por moviles.
Lo que quiero hacer es que el menú aparezca desplegado desde un comienzo cuando entran por moviles.
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
(function( $ ){
"use strict";$.fn.mfnMenu = function( options ){
var menu = $(this);
var defaults = {
addLast : false,
arrows : false,
delay : 100,
hoverClass : 'hover',
mobileInit : 768,
responsive : true };options = $.extend( defaults, options );
var init = function(){
// add '.submenu' class
$( 'li:has(ul)', menu ).addClass( 'submenu' );
// append mobile toggle button
$( 'li:has(ul)', menu ).append( '<span class="menu-toggle"></span>' );
// add '.mfn-megamenu-parent' class
menu.children( 'li:has( ul.mfn-megamenu )' ).addClass( 'mfn-megamenu-parent' );
// add '.last-item' class
$( '.submenu ul li:last-child', menu ).addClass( 'last-item' );
// add '.last' class
if( options.addLast ) {
$( '> li:last-child', menu ).addClass( 'last' )
.prev().addClass( 'last' );
} // appand submenu arrows
if( options.arrows ) {
$( 'li ul li:has(ul) > a', menu ).append( '<i class="menu-arrow icon-right-open"></i>' );
} };var doMenu = function(){
if( ( window.innerWidth >= options.mobileInit ) || ( ! options.responsive ) ){
// desktop --------------------------------
$( '> li, ul:not(.mfn-megamenu) li', menu ).hover(function() {
$(this).stop(true,true).addClass( options.hoverClass );
$(this).children( 'ul' ).stop(true,true).fadeIn( options.delay );
}, function(){
$(this).stop(true,true).removeClass( options.hoverClass );
$(this).children( 'ul' ).stop(true,true).fadeOut( options.delay );
});
} else {
// mobile ---------------------------------
$( 'li', menu ).unbind('hover');
$( 'li > .menu-toggle', menu ).off('click').on('click', function(){
var el = $(this).closest('li');
if( el.hasClass( options.hoverClass ) ){
el.removeClass( options.hoverClass )
.children('ul').stop(true,true).fadeOut( options.delay );
} else {
el.addClass( options.hoverClass )
.children('ul').stop(true,true).fadeIn( options.delay );
}});
} };$(window).bind( 'resize', doMenu );
var __constructor = function(){
init();
doMenu();
};__constructor();
};})(jQuery);
Valora esta pregunta
0
