mobile version of Smooth Navigational Menu (v3.0)

**devendradb** · 05-28-2015, 07:04 AM

1) Script Title: Smooth Navigational Menu (v3.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I have added separate id to each submenu and I am loading different pages via jquery $(id).click() function because I wanted to add page loading animation.
This method works in full width mode of the menu.
When width of browser is reduced to lowest width for mobile miniature menu to display jquery click function does not work
When width of browser again restored to show full menu it works
Thanks

**Beverleyh** · 05-28-2015, 07:33 AM

I have added separate id to each submenu and I am loading different pages via jquery $(id).click() function because I wanted to add page loading animation.

We'll need to see a link to your page in order to understand the problem, and offer solutions.

I'm moving the thread out of the bug reports forum too because the issue appears to be with your setup rather then the original script.

**devendradb** · 06-04-2015, 12:59 PM

HI
Here is my actual code
Menu part :

Code:

<div id='smoothmenu1'>
		<ul>
			<li><a id='home' href="#">Home</a></li>
			<li><a href="#">About Us</a>
			<ul>
			<li><a href="#">History</a></li>
			<li><a href="#">Office Bearer</a></li>
			<li><a href="#">Aim &amp; Objective</a></li>
			<li><a href="#">Bye-Laws</a></li>
			</ul>
			</li>
			<li><a href="#">Activities</a>
			<ul>
			<li><a href="#">AGM</a></li>
			<li><a href="#">CEC</a></li>
			<li><a href="#">Other</a></li>
			</ul>
			</li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Downloads</a>
			<ul>
			<li><a href="#">Photo Gallery</a></li>
			<li><a href="#">Important Documents</a></li>
			<li><a href="#">Important Links</a></li>
			</ul>
			</li>
			<li><a id='contact' href="#">Contact Us</a></li>
		</ul>
		<br style="clear: left" />
	</div>

Jquery part to load pages :

Code:

$(document).ready(function(){
	$('#content').load('home.html');
	$('#contact').click(function(){
	//alert('contact');
	$('#content').load('contact.html');
	});
	$('#home').click(function(){
	//alert('contact');
	$('#content').load('home.html');
	});
	});

I tried to put the jquery part in <head> and <body> also.
- Devendra

**ddadmin** · 06-04-2015, 06:34 PM

Before getting to your question, firstly, it's helpful to quickly describe how the menu's two modes, desktop and mobile, work. When the page loads, the script generates one version of the menu matching the current page mode; if the user resizes the browser enough to meet the criteria of the other mode, another mode-specific, duplicate version of the menu is added to the page. In other words, you end up with two menus on the same page. FYI the desktop menu has a CSS class of "ddsmoothmenu", while the mobile menu's CSS class is "ddsmoothmobile".

With that out of the way, using the "ID" attribute to target a particular menu item will only target that particular mode-specific menu item, and not both menus' menu item. You can try using a unique CSS class name instead:

Code:

<div id='smoothmenu1'>
		<ul>
			<li><a class='homeclass' href="#">Home</a></li>
			<li><a href="#">About Us</a>
			<ul>
			<li><a href="#">History</a></li>
			<li><a href="#">Office Bearer</a></li>
			<li><a href="#">Aim &amp; Objective</a></li>
			<li><a href="#">Bye-Laws</a></li>
			</ul>
			</li>
			<li><a href="#">Activities</a>
			<ul>
			<li><a href="#">AGM</a></li>
			<li><a href="#">CEC</a></li>
			<li><a href="#">Other</a></li>
			</ul>
			</li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Downloads</a>
			<ul>
			<li><a href="#">Photo Gallery</a></li>
			<li><a href="#">Important Documents</a></li>
			<li><a href="#">Important Links</a></li>
			</ul>
			</li>
			<li><a id='contact' href="#">Contact Us</a></li>
		</ul>
		<br style="clear: left" />
	</div>

When the above desktop menu is duplicated for its mobile menu counterpart, the class attribute is duplicated as well. Then in your jQuery code, you should be able to target both menus' menu item that way:

Code:

$(document).ready(function(){
	$('.homeclass').click(function(){
	//alert('contact');
	$('#content').load('home.html');
	});
	});

Thread: mobile version of Smooth Navigational Menu (v3.0)

Thread Tools

Search Thread

mobile version of Smooth Navigational Menu (v3.0)

Similar Threads

Bug with All Levels Navigational Menu (mobile menu porion). Fix coming soon

Smooth Navigational Menu for mobile devices

All Levels Navigational Menu : links buggy with the customized onClick driven version

Smooth Navigational Menu

Problem with Side version of All Levels Navigational Menu 2.2

Bookmarks

Bookmarks

Posting Permissions