Fought with superfish and several others.
I am using CMSMS 1.11.10
I have set up mobile detection rather then screen size as there are a lot of rich people with 240 - 400 dpi phones. Thanks Goran thats the only one I found that worked and is well explained. Great work!
So I can switch the css and the div on a mobile detect. I have used the mobile menu on the computer screen just for debugging.
What I would like to do is repeat the navigation in my temporary static site http://www.edible-gold.com.
(Or preferably have a slide in from the side)
This collapses to an acordian menu for click only on mobile or smaller screens.
In the static site the expansion is set by
Code: Select all
<div id="mobilemainnav" class="fluid"><a href="#" class="indent50" onMouseOver="dmxAnimate('#mobilemainnav', {'height': 30}, {'height': 240})">Navigation</a>
I can not see how to add the behaviour in CMSMS when calling the menu template.
Code: Select all
<a href="#" class="indent50" onMouseOver="dmxAnimate('#mobilemainnav', {'height': 30}, {'height': 240})">Navigation</a>
{menu number_of_levels='1'}
Code: Select all
<div id="menuwrapper">
<a href="#" class="indent50" onMouseOver="dmxAnimate {literal}('#menuwrapper', {'height': 30}, {'height': 240}){/literal}">Navigation</a>
{menu number_of_levels='1'}
</div>
In the head I have
Code: Select all
{literal}
<__script__>function dmxAnimate() {//v1.0
jQuery.dmxAnimate.apply(this, arguments);
}</__script>
<__script__ type="text/javascript" src="/uploads/ScriptLibrary/jquery.easing.1.3.js"></__script>
<__script__ type="text/javascript"src="/uploads/ScriptLibrary/jquery.dmxzone_animations_pack.js"></__script>
<__script__ type="text/javascript" src="/uploads/ScriptLibrary/jquery-latest.pack.js"></__script>
<__script__ type="text/javascript"src="uploads/css-responsive/respond.min.js"></__script>
{/literal}
Code: Select all
<div id="menuwrapper"><a href="#" class="indent50" onMouseOver="dmxAnimate ('#menuwrapper', {'height': 30}, {'height': 240})">Navigation</a>
The above is not elegant in that the hight of the menu div is predetermined (240 px). If you add content you have to change this.
The resengoerg.de works great almost exactly what I am trying to do. I may drop in for a drink its not that far from me. I tried to implement this as per the instructions, but failed.
In the simplex template when the menus collapses to vertical you can not select the submenus. Try selecting a child of “CMSMS works.
The solution shown in http://themes.multiintech.com/ looks good, but this dose not seem to be available (just for show?).
Is there a way of swapping CSS on click?
The Url is http://www.entwurf.wats-on.de/ depending of which version of the template I have attached it could be a mess or a bigger mess as this is my place for learning. Not intended to be public or have perfect HTML.
I have looked at several templates with a view to purchase. I was amazed to see that even many of these failed on a mobile device and small screens, with the menu disappearing off the bottom of the screen or other problems.
I am inspired by the team at CMSMS when I see what is produced, at least it can be done, but I also see a lot of people struggling with this subject.
There are massive hurdles for nubies to fight with to produce a responsive site in CMSMS. Once I have solved this I will try and write up a detailed post from a greenhorns view point of what we did. It may help others. If it gets solved.
I think that is enough. If anyone can save my sanity I would be greatfull.
I will even buy them a beer next time I am passing the Resengörg.
Thanks
Dave