HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Core ocPortal structure

Use this space to share information relating to core ocPortal structure


In addition to the community-editable documentation above, we have the following official tutorials:

  • ocPortal site structure
    An explanation of the ocPortal systems that together form the structure and navigation for ocPortal-powered websites.
  • Admin Zone overview
    An explanation of how to use the Admin Zone, and the special features available from the Admin Zone front page.
  • Customising what's on the menus
    All about ocPortal's menu system. Did you know you can set up and configure as many different levels of navigation as you like?
  • Comcode and attachments
    Create dynamic effects and display rich media, without having to write any XHTML, CSS, or Javascript.
  • WYSIWYG editing
    This tutorial provides some advanced information on the WYSIWYG editor, for those wanting to push it to the limit.
  • Custom pages of information
    How to add new pages, using Comcode. It couldn't be simpler to do: Comcode pages almost look like plain text.
  • Advanced Comcode Pages
    How to add dynamism and inline content to your pages, using blocks; and multimedia, using attachments.
  • Advanced Comcode
    Some of the more advanced aspects of the Comcode system explained, for those who already know the basics.

There are no pages beneath this page

Posted
Submitted by Chris Graham
Changing menu types:
2013-06-25_2046 - ocProducts's library
 
Posted
Submitted by Chris Graham
When considering your mobile version, you'll want to give special consideration to navigation. Deep menu structures, long horizontal menus, or mouse-over effects, all present compatibility problems with mobile.

Generally I'd suggest making sure your top level pages provide in-page links to child pages. That kind of "progressively tunnelling down" approach is best for mobile navigation.

Some menu types in ocPortal will intentionally not show anything below the top level of menu items. Although, that's just a default in the templates, and the ocPortal menu templates are very customisable.

Assuming you currently use a dropdown menu called 'example', if you change your panel_top to:

Code

[semihtml]
{+START,IF,{$MOBILE}}
[block param="example" type="embossed"]side_stored_menu[/block]
{+END}
{+START,IF,{$NOT,{$MOBILE}}}
[block param="example" type="dropdown"]side_stored_menu[/block]
{+END}
then it will target an 'embossed' menu to mobile, which works a whole lot better. This menu type is one-level only by default (as discussed above).

Or, you could do something similar to move the menu to the footer. panel_top:

Code

[semihtml]
{+START,IF,{$NOT,{$MOBILE}}}
[block param="example" type="dropdown"]side_stored_menu[/block]
{+END}
[/semihtml]
panel_bottom:

Code

[semihtml]
{+START,IF,{$MOBILE}}
[block param="example" type="embossed"]side_stored_menu[/block]
{+END}
[/semihtml]


If you do want to support multiple levels with the embossed menu type, edit the MENU_BRANCH_embossed template to:

Code

<li class="{$?,{CURRENT},current,non_current}" style="padding-left: {$MULT,{$SUBTRACT,{THE_LEVEL},1},10}px">
   <a{+START,INCLUDE,MENU_LINK_PROPERTIES}{+END}{+START,IF,{LAST}} class="last"{+END}>{+START,IF_NON_EMPTY,{IMG}}<img alt="" src="{$IMG*,{IMG}}" /> {+END}{CAPTION}</a>
</li>
{CHILDREN}
I have added in 'CHILDREN' (so that multiple levels are all folded in) and some custom CSS to grow out the left most spacing based on how deep the menu node is in the menu tree structure.


In the perfect world, there'd be a lot of individual design work targeting mobile. In v10 we're actually going to have a much more customised mobile version of the default theme with a button to open up a large structured menu on top of what you're looking at (as has become common in the last year or two). Similar things can be done in earlier versions via customisation of CSS/templates/Comcode-pages.
 
CEDI change-log Post