Site child map / Extra navigation

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

9/4/2017 12:23:27 AM
Gravatar
Total Posts 4

Site child map / Extra navigation

Hi,

Im trying to set up this "standard" page that content creators can use to create new pages.

For that page, I would like an extra navigation bar or sitemap to the left. The child page map works almost as intended, but I would like to have all parents, and bold font on the page im actually looking at.

Furthermore, it doesnt seem possible to create templates for that kind of task? A template page with site navigation map to the left and html content in the center, and perhaps a searchbar to the right.

 

 

Thanks in advance,

Zeb

9/6/2017 12:25:46 PM
Gravatar
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Site child map / Extra navigation

Hi Zeb,

We don't currently have page templates - it is a feature we would like to implement in the future, but I can't give you an ETA. For now, you can accomplish something similar by creating a duplicate of your skin and adjusting the layout.Master to match what you want, then when you create new pages you just select which skin should be used on that page (make sure you enable the "can set skins on pages" setting in your site settings first, though).

If you do this, you can then add a site menu control to your left pane in your new skin. You can also add the search input control in your right pane, if you'd like.

By the way, to configure the classes and settings on your left pane, I'd recommend using this in your layout master:

<portal:SiteMenu id="SideMenu1" runat="server" MenuSkinId="SideMenu" UseFlexMenu="true" />

And this in your theme.skin:

<portal:FlexMenu runat="server" SkinID="SideMenu"
    AnchorChildSelectedCssClass="child-active"
    AnchorCssClass=""
    AnchorInnerHtmlBottom=""
    AnchorInnerHtmlTop=""
    AnchorSelectedCssClass="active"
    ChildContainerCssClass=""
    ChildContainerElement=""
    ChildNodesPerUl="-1"
    ChildUlCssClass="childmenu-wrap"
    ContainerCssClass="side-menu"
    ContainerElement=""
    DescriptionCssClass="side-menu-description"
    ExtraBottomMarkup=""
    ExtraTopMarkup=""
    IsMobileSkin="false"
    ItemDepthCssPrefix=""
    LiChildSelectedCssClass=""
    LiCssClass=""
    LiSelectedCssClass=""
    MaxDataRenderDepth="-1"
    ParentLiCssClass=""
    RenderCustomClassOnAnchor="false"
    RenderCustomClassOnLi="true"
    RenderDescription="true"
    RootLevelLiCssClass="sidemenu-root"
    RootUlCssClass=""
    StartingNodeOffset="-1"
    UlChildSelectedCssClass=""
    UlSelectedCssClass=""
/>

Then just adjust the settings above in your theme.skin to your liking. The configuration above will show all menu items on the site, not just those related to the current page, and will add an "active" class to the page currently viewed, so that you can hide the children of inactive pages if you want, and add your bold font to active one or it's children.

Hope this helps!

10/2/2017 6:15:58 AM
Gravatar
Total Posts 4

Re: Site child map / Extra navigation

Hi! 

 

This works perfect thanks you!

With active class I can now bold the selected menu item. Step 2 is almost also done: Hiding the not active ones.

At this moment i hide childmenu-wrap class with

.childmenu-wrap { Display: none; } in my css file. 

  • root
  • selected root
    • child to selected root should be visible
  • root
    • child to unselected root should not be visible

This is the issue right now. How do I make only the subtree of the selected active menu item visible?

10/3/2017 10:49:47 AM
Gravatar
Total Posts 181
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Site child map / Extra navigation

Hi Zeb,

The best way is to do this with CSS. With the Theme.skin content I sent you, and assuming you haven't changed the display settings that control the classes or the rendering order of the menu, the following CSS should do it:

.active + .childmenu-wrap,
.child-active + .childmenu-wrap {
	display: block;
}

Essentially this is just overriding the 'display: none;' you're already using, but only for the UL immediately after an active item or an item with an active child item. Let me know how this goes. Note that setting elements to 'display: block;' as an override like this can sometimes break them if they had different default behavior. You can try 'inherit' as a value if you don't know the default display mode and you're having issues.

10/5/2017 1:16:19 AM
Gravatar
Total Posts 4

Re: Site child map / Extra navigation

Hello again!

Thank you! That was the combination I was looking for, then I realised, I'm thinking completely awkward here. 

Now instead of making the root levels visible in the side menu (because why would you need that?) I took the: 

<portal:PageMenu id="PageMenu3" runat="server" SiteMapDataSource="level4datasource" UseTreeView="true" StartingNodeOffset="0" TreeViewShowExpandCollapse="true" MenuSkinID="PageMenu3" />
 

from the example in MojoCMS documentation on "Menu design". 

Why? Because this one has the collapse/expand function already done. 

 

This is starting to look really nice!