[TYPO3-english] responsive mobile menu

[Katja Lampela]

Hi Michael,

6.12.2013 1.01, Michael Albers (Concatenate) kirjoitti:
> I would check if it is possible with this site to implement it with
> css and html. Create two menus in html with different classes. And
> use display:none in css for the menu class you don't want to show.

Thanks for this, it works nicely :)

Now there is another issue.

Site structure:

Mainpage1
  subpage1.1
  subpage1.2
Mainpage2
Mainpage3
  subpage3.1
   subpage3.1.1
  subpage3.2

and so on. There is content on every page. I have this menu working now
in mobile:

Mainpage1 +
Mainpage2
Mainpage3 +

And the plus sign nicely indicates there are subpages. Now the problem
is the next step, what happens when I click the Mainpage3.

One of these I can make happen when clickin "Mainpage3 +":
A. Submenu opens (and you can't get to the Mainpage3 where there is
content also)
OR
B. You are taken to the linked page Mainpage3 (and you miss the submenu)

What I want is one of the following
A. "Mainpage3" opens the linked page and the "+" opens the submenu
OR
B. "Mainpage3 +" opens the submenu and the second click opens the linked
page Mainpage3

At the moment I have this ts:

      expAll = 1
      NO.allWrap = <li>|</li>
      NO.ATagTitle.field = abstract // description // title
      ACT = 1
      ACT.wrapItemAndSub = <li class="active">|</li>
      ACT.ATagTitle.field = abstract // description // title
      IFSUB = 1
      #IFSUB.before = <a href="#">
      #IFSUB.after =  </a>
      IFSUB.doNotLinkIt = 0
      IFSUB.wrapItemAndSub = <li class="has-submenu">|</li>
      IFSUB.ATagTitle.field = abstract // description // title
      ACTIFSUB = 1
      #ACTIFSUB.before = <a href="#">
      #ACTIFSUB.after =  </a>
      ACTIFSUB.doNotLinkIt = 0
      ACTIFSUB.wrapItemAndSub = <li class="has-submenu">|</li>
      ACTIFSUB.ATagTitle.field = abstract // description // title
      wrap = <div class="head cf"><div class="menucontainer"><a
class="menu-link" href="#menu">Menu</a><nav id="menu2013"
class="menu2013"><ul>|</ul></nav></div></div>

and this jquery

jQuery( document ).ready( function( $ ) {	
		$('body').addClass('js');
		  var $menu = $('#menu2013'),
		  	  $menulink = $('.menu-link'),
		  	  $menuTrigger = $('.has-submenu > a');

		$menulink.click(function(e) {
			e.preventDefault();
			$menulink.toggleClass('active');
			$menu.toggleClass('active');
		});

		$menuTrigger.click(function(e) {
			var $this = $(this);
			$this.toggleClass('active').next('ul').toggleClass('active');
		});		
});



-- 
Kind regards,
Katja Lampela
www.lieska.net