responsive menu


Author Message
jrgweb

Posted: 2/1/2013
Quote message 

One of the top complaints with artister4 is the responsive menu.
Here is a jquery alternative: the example site is a joomla 2.5.x
http://joomla.artisteertoday.com/

This can also be done in HTML websites:

http://www.jrgweb.net/home.html

Here are the instructions for an artisteer 4.x HTML website.

step 1- Download the .js file from here: http://www.jrgweb.net/artisteer_mobilemenu.zip

Since this is an HTML website example, place this in the root directory.

step 2- Paste this between the <head> </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.mobilemenu.js"></script>
<script>
$(document).ready(function(){
$('#test, #test2, #test3').mobileMenu();
});
</script>

step 3- In your pages find the ul class. Will look like this:
<ul class="art-hmenu"><li><a href="index.html" class="">Home</a>

add an id so it knows which menu is to be converted.

<ul class="art-hmenu" id="test"><li><a href="index.html" class="">Home</a>

step 4- Now if you want to style this then the class will be called mnav

I made mine width: 100% You can add this to the styles.css
.mnav {
width: 100%
}

And yes, all this has to be done outside of artisteer with the exception of the css.

Since this is a HTML website these steps have to been done to every page. If using a CMS you won't have that problem.

I'm still testing joomla but the instructions are pretty much the same.

If you are using a few menu items I don't see a need for this but some here have many, many menu items and this would work great.

You can customize this script so if you can't figure it out let me know.






 
Nick

Posted: 2/1/2013
Quote message 

You my friend rock. We were screaming for something like this. Looking forward in giving this a try.

Thanks a million...
 
Pieter

Posted: 2/1/2013
Quote message 

This is great. This should be built-in into Artisteer, so we can rely on it for each and every template. Well done!
 
jrgweb

Posted: 2/1/2013
Quote message 

@Kris - additional jscript is needed for that feature. This example is simply to give a boost to some that have larger menus until artisteer provides this feature. That said, I may look at this feature more as I'm not sure artisteer will add the feature. :(

I will have some more examples coming later.
 
lenamtl

Posted: 2/1/2013
Quote message 

Thanks for this js script.

I have tested only main menus and sub-level1 appear in the dropdown.
How to add support for extra sub menu level2-3-4 ...

Main menu
- sub-level1
- sub-level2
- sub-level3
- sub-level4

 
Tom

Posted: 2/1/2013
Quote message 

Yes, stop filling the mobile screen with menu and make it a drop down list.
 
Raymee

Posted: 2/1/2013
Quote message 

As usual great advice Jrgweb - certainly had me testing it out.

I think I may have sent you an email if the one on your linked website is correct.
 
Steve

Posted: 2/1/2013
Quote message 

Quote jrgweb:

@Kris - additional jscript is needed for that feature. This example is simply to give a boost to some that have larger menus until artisteer provides this feature. That said, I may look at this feature more as I'm not sure artisteer will add the feature. :(

I will have some more examples coming later.


Thanks a mill .... you should look at adding this as a plug via SDK ...

Just a suggestion, and I must say one thing, once plug ins from third parties get made that actually work, that's when Artisteer will take of like a rocket ... I've seen this before with GoLive, Dreamweaver and so on, once plug ins start getting made, the applications take on a different flavor and dimension
:-)
 
Dean

Posted: 2/6/2013
Quote message 

I found another great little responsive menu here http://www.meanthemes.com/plugins/meanmenu
I have tweaked the script a little and it can be found here http://www.premiumstockprints.com/js/jquery.meanmenu.js
I kept the original responsive script as well as it affects other layout features.
Hope this helps someone.
 
Nick

Posted: 2/6/2013
Quote message 

Thanks for sharing Dean. I will give it a try tomorrow...

jrgweb's menu was easily implemented in QuickerSite, since Quickersite's templates are html+css based, so implementing things manually is straight forward, unlike other cms that their templates are php based (WP, Joomla, etc...).

We are buying some time until Artisteer implements a true descent responsive menu I guess...
 
Rasha

Posted: 10/14/2014
Quote message 

I'm sorry, I must be a little clumsy, :( but I need to modify the appearance of a menu responsive to my joomla template, and I can't do it. I like what Dean has taught. The examples of Jrgweb I can't see it, plus I think it would not know to adapt the code to templates the joomla without more information.

The template example to my work, you can see it here:

http://fan.hol.es/

Please, can someone tell me how I can modify the files so that the result looks similar to what Dean has taught?

Thank you

PS: Sorry if the is not well understood what I write, I am Spanish and my English isn't very good :-/
 
Rasha

Posted: 10/20/2014
Quote message 

Please, can anyone help me? At least tell me how to enter the code that gave Dean, I don't get it to work. :-(

Thanks
 
responsivemultimenu

Posted: 7/27/2015
Quote message 

you may check this http://responsivemultimenu.com