Hi Guys
So I'm doing a mobile version of a site - see http://www.vintessential.com.au/resources/
The menu on the left just drops down when you click the top level link (using KK's menu maker) - nice and easy.
However, now I'm trying to fit it onto a mobile screen, so there is no left side / right side.
The menu sits at the top, with the articles underneath.

When you click 'Articles' there's a long list, clicking on an individual one takes you to the article but way way down the page on the mobile - the menu stays open.

What I'd like to do is either:
a) Have the menu close back up after clicking an article link.
b) Get the page to scroll to the article heading which is below the menu.
With regards to b) I've tried the standard id="title", then adding #title to the end of the link but it's not working, the screen is still focused on the menu. (any idea why this wouldn't be working?)

Was wondering if any of you have tried this before and what solutions you came up with.
I don't have a live version yet, it's all on the home server at the moment.

Thanks

webecho

[cheesypoof]

Something like FlexNav (http://jasonweaver.name/lab/flexiblenavigation/) may be a solution. I'm also thinking that with as many items as you have in the 'Articles' section of the sidebar, a select dropdown may be more user-friendly - especially for a mobile device.

It's hard to say what could be the problem with your hash (#title) implementation without seeing the page for myself.

Best of luck with this.

We use Foundation for our site project and this works fine with couch (http://foundation.zurb.com/).
Those functions you asked for are standard stuff in foundation.

So, I'm back chasing up on this again.

Test page is
http://webecho.net.au/vin/resources.php

Naturally you'll have to visit from a mobile.

As you can see, when clicking on a menu item, the list drops down.
The problem is, when you click on a post, the screen stays where it is with the actual post all the way at the end of the menu.

I think ideally, I just want to have the menu collapse back up again.

I'm sure it's a simple bit of JS code to do it, but it's not my forte ... I'd be very grateful for any help you could offer.

Thanks

webecho


EDIT: And after testing again to see what could be happening ... it's working exactly as it should?????

EDIT 2: But only if SEO urls are OFF

[cheesypoof]

I think the answer lies with collapsing the menu when on the page view as you said. Could you post the relevant code which generates the menu?

HI Cheesypoof.
I'm just using the stand Couch menu system:

Code: Select all

<div class="resource-menu resources-menu">
<h1>Resources Menu</h1>
<cms:if k_is_page || k_is_folder >
    <cms:if k_folder_name ><cms:set current_folder=k_folder_name /></cms:if>
    <cms:if k_page_foldername ><cms:set current_folder=k_page_foldername /></cms:if>
</cms:if>
<ul>
<cms:folders extended_info='1'  >

<cms:if k_element_start >

 <cms:set my_class='' />
        <cms:if "<cms:is_ancestor parent=k_folder_name child=current_folder />" >
            <cms:set my_class='class="selected"' />
        </cms:if>
      
<li <cms:show my_class />>
<a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a>
</cms:if>
<cms:if k_element_end ></li></cms:if>
<ul>
<cms:pages masterpage='resources.php' folder=k_folder_name >

<li><a href="<cms:show k_page_link />#title"><cms:show k_page_title /></a></li>


</cms:pages>
</ul>

</cms:folders>
</ul>

</div>

This is the only relevant CSS

Code: Select all

.resource-menu  ul.level-1{display:none;}
.resource-menu .current ul.level-1{display:block;}
.resource-menu .active ul.level-1 {display:block;}

[cheesypoof]

Give this a try:

Code: Select all

<div class="resource-menu resources-menu">

<h1>Resources Menu</h1>

<cms:if k_folder_name >
    <cms:set current_folder=k_folder_name />
<cms:else />
    <cms:if k_page_foldername >
        <cms:set current_folder=k_page_foldername />
    </cms:if>
</cms:if>

<ul>
    <cms:folders extended_info='1' >
        <cms:if k_element_start >
            <cms:if "<cms:is_ancestor child=current_folder parent=k_folder_name />" >
                <cms:if k_is_page >
                    <cms:set menu_class=' class="selected page-view"' />
                <cms:else />
                    <cms:set menu_class=' class="selected"' />
                </cms:if>
            </cms:if>

            <li<cms:show menu_class />>
                <a href="<cms:show k_folder_link />"><cms:show k_folder_title /></a>
        </cms:if>

        <cms:if k_element_end >
            </li>
        </cms:if>

        <ul>
            <cms:pages folder=k_folder_name masterpage='resources.php' >
                <li><a href="<cms:show k_page_link />#title"><cms:show k_page_title /></a></li>
            </cms:pages>
        </ul>
    </cms:folders>
</ul>

</div>

Add the following to your mobile media query:

Code: Select all

.resource-menu .selected.page-view>ul{display:none;}

Let me know how this works for you.

[cheesypoof]

Oops, I left off the following which should be placed after <cms:if k_element_start >:

Code: Select all

<cms:set menu_class='' />

That didn't do it:

What it did was open up all the submenus for Articles, Factsheets and Tips and keep them open.
Oddly, it had the same effect on the desktop version ... even though that css rule was only in mobile?

I can see what you're going for there though, not sure why it wouldn't behave as expected ...


BUT ... you solved it ...

All I had to do was remove the selected class from the if k_is_page

Code: Select all

 <cms:if k_is_page >
                    <cms:set menu_class=' class="page-view"' />
                <cms:else />
                    <cms:set menu_class=' class="selected"' />
                </cms:if>

Now just collapses the menu on both desktop and mobile which is fine.

Thank you so much mate ... such a simple answer in the end ... well, I do need to study your changes to the parent child relationship to understand why that works.

Lifesaver!


webecho

ha ha .. although now I have to do the same on the Certification page which uses the menumaker
<cms:menu masterpage='certification.php' />

Will leave that for tomorrow ... I really need a Beer