Quitar desplegable de menu responsive

  • Autor Autor josemanuelprz24
  • Fecha de inicio Fecha de inicio
J

josemanuelprz24

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola que tal Betas.

Estoy trabajando en un Proyecto y el cliente solicito, que el menú responsive, se visualizara directo, sin necesidad de hacer clic para que se despliegue, ya estuve intentando mediante Javascript quitar esto, pero no lo he conseguido, les comparto el código.

Insertar CODE, HTML o PHP:
(function ($, document, window) {
	var
	// default settings object.
	defaults = {
		label: '',
		duplicate: true,
		duration: 200,
		easingOpen: 'swing',
		easingClose: 'swing',
		closedSymbol: ' ',
		openedSymbol: ' ',
		prependTo: '#jmsmenuwrap',
		parentTag: 'a',
		closeOnClick: false,
		allowParentLinks: true
	},
	mobileMenu = 'slicknav',
	prefix = 'slicknav';
	
	$.fn[mobileMenu] = function (options) {
		return this.each(function() {
			var $this = $(this);
			var settings = $.extend({}, defaults, options);
			
			// clone menu if needed
			if (settings.duplicate) {
				var mobileNav = $this.clone();
				//remove ids from clone to prevent css issues
				mobileNav.removeAttr('id');
				mobileNav.find('*').each(function(i,e){
					$(e).removeAttr('id');
				});
			}
			else
				var mobileNav = $this;
			
			// styling class for the button
			var iconClass = prefix+'_icon';
			
			if (settings.label == '') {
				iconClass += ' '+prefix+'_no-text';
			}
			
			if (settings.parentTag == 'a') {
				settings.parentTag = 'a href="#"';
			}
			
			// create menu bar			
			mobileNav.attr('class', prefix+'_nav');
			var menuBar = $('<div class="'+prefix+'_menu"></div>');
			var btn = $('<div class="slicknav_btn_wrap"><'+settings.parentTag+' aria-haspopup="true" tabindex="0" class="'+prefix+'_btn"></a></div>');
			$(menuBar).append(btn);		
			menuBar.attr('id', 'jmsresmenu_dropdown');
			$(settings.prependTo).prepend(menuBar);
			//menuBar.parent().prepend(menuBar);
			menuBar.append(mobileNav);
			
			// iterate over structure adding additional structure
			var items = mobileNav.find('li');
			$(items).each(function () {
				var item = $(this);
				data = {};
				data.children = item.children('ul').attr('role','menu');
				item.data("menu", data);
				
				// if a list item has a nested menu
				if (data.children.length > 0) {
				
					// select all text before the child menu
					var a = item.contents();
					var nodes = [];
					$(a).each(function(){
						if(!$(this).is("ul")) {
							nodes.push(this);
						}
						else {
							return false;
						}
					});
					
					// wrap item text with tag and add classes
					var wrap = $(nodes).wrapAll('<'+settings.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+prefix+'_item"/>').parent();
					
					item.addClass(prefix+'_collapsed');
					item.addClass(prefix+'_parent');
					
					// create parent arrow
					$(nodes).last().after('<span class="'+prefix+'_arrow">'+settings.closedSymbol+'</span>');
					
				
				} else if ( item.children().length == 0) {
					 item.addClass(prefix+'_txtnode');
				}
				
				// accessibility for links
				item.children('a').attr('role', 'menuitem').click(function(){
					//Emulate menu close if set
					if (settings.closeOnClick)
						$(btn).click();
				});
			});
			
			// structure is in place, now hide appropriate items
			$(items).each(function () {
				var data = $(this).data("menu");
				visibilityToggle(data.children, false);
			});
			
			// finally toggle entire menu
			visibilityToggle(mobileNav, false);
			
			// accessibility for menu button
			mobileNav.attr('role','menu');
			
			// outline prevention when using mouse
			$(document).mousedown(function(){
				outlines(false);
			});
			
			$(document).keyup(function(){
				outlines(true);
			});
			
			// menu button click
			$(btn).click(function (e) {
				e.preventDefault();
				visibilityToggle(mobileNav, true);
			});
			
			// click on menu parent
			mobileNav.on('click', '.'+prefix+'_item', function(e){
				e.preventDefault();
				itemClick($(this));
			});
			
			// check for enter key on menu button and menu parents
			$(btn).keydown(function (e) {
				var ev = e || event;
					if(ev.keyCode == 13) {
					e.preventDefault();
					visibilityToggle(mobileNav, true);
				}
			});
			
			mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
				var ev = e || event;
				if(ev.keyCode == 13) {
					e.preventDefault();
					itemClick($(e.target));
				}
			});
			
			// allow links clickable within parent tags if set
			if (settings.allowParentLinks) {
				$('.'+prefix+'_item a').click(function(e){
						e.stopImmediatePropagation();
				});
			}
			
			// toggle clicked items
			function itemClick(el) {
				var data = el.data("menu");
				if (!data) {
					data = {};
					data.arrow = el.children('.'+prefix+'_arrow');
					data.ul = el.next('ul');
					data.parent = el.parent();
					el.data("menu", data);
				}
				if (el.parent().hasClass(prefix+'_collapsed')) {
					data.arrow.html(settings.openedSymbol);
					data.parent.removeClass(prefix+'_collapsed');
					visibilityToggle(data.ul, true);
				} else {
					data.arrow.html(settings.closedSymbol);
					data.parent.addClass(prefix+'_collapsed');
					visibilityToggle(data.ul, true);
				}
			}

			// toggle actual visibility and accessibility tags
			function visibilityToggle(el, animate) {
				var items = getActionItems(el);
				var duration = 0;
				if (animate)
					duration = settings.duration;
				
				if (el.hasClass(prefix+'_hidden')) {
					el.removeClass(prefix+'_hidden');
					el.slideDown(duration, settings.easingOpen);
					el.attr('aria-hidden','false');
					items.attr('tabindex', '0');
					setVisAttr(el, false);
					
				} else {
					el.addClass(prefix+'_hidden');
					el.slideUp(duration, settings.easingClose, function() {
						el.attr('aria-hidden','true');
						items.attr('tabindex', '-1');
						setVisAttr(el, true);
						el.hide(); //jQuery 1.7 bug fix
					});
				}
			}
			
			// set attributes of element and children based on visibility
			function setVisAttr(el, hidden) {
			
				// select all parents that aren't hidden
				var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
				
				// iterate over all items setting appropriate tags
				if (!hidden) {
					nonHidden.each(function(){
						var ul = $(this);
						ul.attr('aria-hidden','false');
						var items = getActionItems(ul);
						items.attr('tabindex', '0');
						setVisAttr(ul, hidden);
					});
				} else {
					nonHidden.each(function(){
						var ul = $(this);
						ul.attr('aria-hidden','true');
						var items = getActionItems(ul);
						items.attr('tabindex', '-1');
						setVisAttr(ul, hidden);
					});
				}
			}
			
			// get all 1st level items that are clickable
			function getActionItems(el) {
				var data = el.data("menu");
				if (!data) {
					data = {};
					var items = el.children('li');
					var anchors = items.children('a');
					data.links = anchors.add(items.children('.'+prefix+'_item'));
					el.data("menu", data);
				}
				return data.links;
			}
			
			function outlines(state) {
				if (!state) {
					$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
				} else {
					$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
				}
			}
		});
	};
}(jQuery, document, window));

Esta es la pagina:

http://www.potenciafluida2015.incubaciondigital.com/

SOLO MENU RESPONSIVE.

Existe solución para ello?

Gracias un saludo. 😉
 
Hola.

Por lo que vi creo que puedes hacerlo con media querys, busca la clase .slicknav_nav y en tus medias querys dale display block.

Otra cosa que puedes hacer es en el Load o ready de jquery hacer que se ejecute lo siguiente:

Insertar CODE, HTML o PHP:
$( document ).ready(function() {
  $('.slicknav_nav').css('display','block');
});

Saludos, espero haberte ayudado.
 
Hola, gracias por la respuesta inmediata.

Lo intente de las dos maneras, tanto en CSS como en el Archivo Javascript, pero no se vio reflejado el cambio.

Alguna otra idea?

De antemano gracias.

Un saludo.

- - - Actualizado - - -

Perdon no lo habia empleado en el archivo correcto, me sirvio de mucho. De antemano te lo agradezco.

🙂

- - - Actualizado - - -
 
Última edición:
¡Que bien que te funcionara!

Saludos.
 
Atrás
Arriba