[TYPO3-english] responsive mobile menu
Katja Lampela
katja.lampela at lieska.net
Wed Dec 18 09:11:25 CET 2013
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
More information about the TYPO3-english
mailing list