Hello forum,
I was wondering if it is possible to do a media query with couch?
I am about to make a nested menu site, and the layout of the page should have two parts of the menu in a desktop view, and all-in-one menu in a mobile view.

So I was wondering, if I it is possible to do something like this:

Code: Select all

<cms:if  min-width-is-desktop >
                     <cms:menu masterpage='this.php' exclude='lowermenu' />
             <cms:else/>
                   <cms:menu masterpage='this.php' >
</cms:if>

and for the lower menu

Code: Select all

<cms:if  min-width-is-desktop  >
                    <cms:menu masterpage='this.php' childof='lowermenu' />
     <cms:else/>
                   <div style="display:none">
                     <cms:menu masterpage='this.php' childof='lowermenu' />
                </div>
        </cms:if>

That would be great, if possible..

thanks in advance

[cheesypoof]

Hi Tanja,

This can be accomplished with CSS. We just need to target the classes and/or ids present in the menus. Since you are displaying two menus on the same page, I would recommend that you use the cms:nested_pages tag instead of cms:menu (so that we don't end up with duplicate id attribute values). Could you please post the code you are using to generate the menus? Thanks.

Hi cheesypoof!
thanks for answering my post!

I did not yet transfer my site to couch….I am just thinking of how to solve this what I have posted about....
I do use css media queries, but I would not know how to call just a portion of the menu (made by nested pages) and then use all nested pages when the screen changes…I will shorten the code I use so that it is exemplary, since it is too long otherwise…

The Couch generated pages would be like this:

Code: Select all

|---Home
|---Menu 1
   |---Submenu 1
   |---Submenu 2
   |---Submenu 3
|---Menu3
|---Lowermenu
   |---Lmenu1
   |---Lmenu1
   |---Lmenu1

This is my upper, dropdown menu, which should exclude the sites that are contained in the "Lowermenu". I thought because I have two different ids for the upper and for the lower menu, I could use cms:menu…

Code: Select all

<div id="menu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu1</a>
                    <ul>
                      <li><a href="#">Submenu 1</a></li>
                      <li><a href="#">Submenu 2</a></li>
                      <li><a href="#">Submenu 3</a></li>
                    </ul>
            </li>
           </ul>          
</div>

And this is the lower menu, just a simple horizontal list…there should only be the children of "lowermenu"….

Code: Select all

<div id="navigation">
      <ul>
            <li>Links</li>
            <li>Kontakt</li>
            <li>Impressum</li>
            <li>Newsletter</li>
            </ul>
            </div>

I use slicknav menu with jquery for the mobile version of the menu. The script I use assigns a class to the #menu, the assigned class is slicknav_menu and that is done with this javascript (and jquery)

Code: Select all

<script>
   $(function(){
      $('#menu').slicknav();
   });
</script>

The visibility is then switched by media query

Code: Select all

@media only screen and (min-width: 0px) and  (max-width: 768px) {
#menu {display: none;}
.js .slicknav_menu  {display: block;}
#navigation {display: none;}  /*becasue this portion should now be included in the #menu aka slicknav_menu*/
}

@media only screen and (min-width: 769px) {
.slicknav_menu {display: none;}
}

I send the link to the code for the menu, since it is too long to post it here….SlickNav - Responsive Mobile Menu Plugin for jQuery => http://slicknav.com/
and this is just the stylesheet...
http://slicknav.com/mobile-menu/slicknav.css


Thanks!

Tanja

[cheesypoof]

Thanks for the extra information

If any page were to be present in both menus, we should not use cms:menu tags. As noted in the documentation, cms:menu adds an id attribute (like the code below) to each list item. This would output duplicate id values (invalid HTML) in the case stated earlier where any page is present in both menus.

Code: Select all

id="item-<cms:show k_nestedpage_name/>"

I'm not sure what classes you require to style your menu appropriately, but the example below includes only what we need to show/hide menus as described in your original post. Nevertheless, the nested_pages documentation (docs/tags-reference/nested_pages.html) has a good example for adding first, last, current, and has-submenu classes.

Code: Select all

<div id="menu">
    <cms:nested_pages extended_info='1' masterpage='this.php'>
        <cms:if k_level_start><ul></cms:if>

        <cms:if k_element_start>
            <li class="item-<cms:show k_level/>-<cms:show k_nestedpage_name/> level-<cms:show k_level/>"><a href="<cms:show k_menu_link/>"><cms:show k_menu_title/></a>
        </cms:if>

        <cms:if k_element_end></li></cms:if>
        <cms:if k_level_end></ul></cms:if>
    </cms:nested_pages>
</div>


<div id="navigation">
    <cms:nested_pages childof='lowermenu' extended_info='1' masterpage='this.php'>
        <cms:if k_level_start><ul></cms:if>

        <cms:if k_element_start>
            <li><a href="<cms:show k_menu_link/>"><cms:show k_menu_title/></a>
        </cms:if>

        <cms:if k_element_end></li></cms:if>
        <cms:if k_level_end></ul></cms:if>
    </cms:nested_pages>
</div>

We now have a method to target and hide the 'lowermenu' when in desktop resolutions:

Code: Select all

@media only screen and (min-width: 769px) {
    #menu .item-lowermenu.level-0 {display: none;}
}

Do let me know if I misunderstood anything.

Hi cheesypoof!

this helps a lot, thanks! I need to study bit more nested_pages Tag, as the concepts of first, last and current classes is not so clear to me...
As for now, I just need .slicknav_menu class, and id #menu and #navigation for styling...

But until I am so far, could you please tell me, if in the code that you posted with nested_pages, once when the #menu .item-lowermenu.level-0 is not displayed anymore, do the invisible menu items form here appear in the upper menu?

Because this is what I would like to do. After making lower menu invisible, the pages from there should be added to the upper menu....Therefore I thought, the easiest way would be, if couch would have a tag for media query itself...

Thanks

Tanja

[cheesypoof]

This is what I see in desktop:

desktop.png (2.63 KiB) Viewed 3676 times

... and mobile:

mobile.png (5.07 KiB) Viewed 3676 times

Hi cheesypoof!
Yes, that is exactly what I would like to do....

Thanks a milion!!!!!

I will study nested_pages this afternoon and I hope with your post I will understand what was unclear to me before...

best regards

Tanja

[cheesypoof]

I am glad I could be of help Tanja.

HI again cheesypoof!

and thanks a lot for jumping in with your answer to my question.. I was not aware that all what i wanted can be achieved with styles and addressing classes that are generated with couch!!!!!

Great thing!!!!!

I have just one minor issue, because in the mobile menu, I would like to display only the children of lowermenu, ie to keep that k_nestedpage_title invisible...
I do not succeed to manage that with css (only the whole lowermenu can be invisible, the children also), because that mobile menu is working on javascript and generates things like aria-hidden=true and i cannot handel java script.

So I was thinking of using couch conditions with k_nestedpage_name for example , but I do not know where and how to start conditions here , cause cms:nested_pages has itself already many ifs, and then it must be I miss something again...

I wonder if something like this would be possible

Code: Select all

<cms:nested_pages masterpage='index.php' extended_info='1' >
    <cms:if k_template_name='lowermenu'>
       then show just childof='lowermenu'
   <cms:else/>
       show all items and submenus for other nested pages
</cms:if>

Tanja

[cheesypoof]

I found this somewhat challenging to accomplish in an elegant manner. The code below should suffice, but perhaps others have some better ideas. The following assumes that the 'Lowermenu' children should be output at the end of the menu.

Code: Select all

<div id="menu">
    <cms:nested_pages exclude='lowermenu' extended_info='1' masterpage='this.php'>
        <cms:if k_level_start><ul></cms:if>

        <cms:if k_element_start>
            <li><a href="<cms:show k_menu_link/>"><cms:show k_menu_title/></a>
        </cms:if>

        <cms:if k_element_end></li></cms:if>
        <cms:if k_level_end>
            <cms:if k_level == '0'>
                <cms:nested_pages childof='lowermenu' extended_info='1' masterpage='this.php'>
                    <cms:if k_level_start && k_level != '0'><ul></cms:if>

                    <cms:if k_element_start>
                        <li class="lowermenu"><a href="<cms:show k_menu_link/>"><cms:show k_menu_title/></a>
                    </cms:if>

                    <cms:if k_element_end></li></cms:if>
                    <cms:if k_level_end && k_level != '0'></ul></cms:if>
                </cms:nested_pages>
            </cms:if>
            </ul>
        </cms:if>
    </cms:nested_pages>
</div>

The CSS then becomes:

Code: Select all

@media only screen and (min-width: 769px) {
    #menu .lowermenu {display: none;}
}