[TYPO3-english] responsive mobile menu

[Katja Lampela]

18.12.2013 10.07, Katja Lampela kirjoitti:
> 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');
>          });
> });
>
>
>

The plus sign is added with css
.menu2013 li.has-submenu > a:after {
content: '+';
]

I don't know if this could be used/wrapped somehow in ts...

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