Hobo Cookbook

View Source

Question: Question Navigation Tabs in side-menu

Asks Bean
Hello there. I learned the hard way that it's easier to do things right than twice. So here goes: I'm looking for a way to avoid navigating to new pages and thus confusing the user. I'd like to go from the login page to a "Workspace" with a side-menu and a main-content section. By side-menu, I really mean tabs that have forms and lists on them for interacting with the backend models. Right now, I've got way-too-much content in the side menu to make for good design. What I really want is to hide and show the forms under a tab menu. That way, the user can easily see where the features live, but aren't overwhelmed with too much at once. If a user selects an item on the list, I want the content page to appear in the main section of the workspace. Right now, selecting an item off the lists navigates to a whole new page.

I've looked at Paoldona's rails-widgets plugin and it seems to provide this kind of functionality. At the same time, I would be adding complexity to my app [additional CSS to style, for example]. There must be a good way to nest <navigation> and <page> tags in the side menu. Also, there must be a DRYML way to redirect to the content <section> [or div, or partial, or whatever's best]. It seems like I need to redefine the <cards> in application.DRYML and point the list-item links to the main-section rather their own pages. I'm not exactly sure how to do that either. Any help would be GREATLY appreciated.

Finally, I want to thank you guys for providing a first-rate application builder. If you choose to take the red pill and embrace the vision, you get so much for free. It's shocking how productive and powerful this tool can be [even in Noobie hands].

Regards,
Paul

Discussion

  • In answer to Navigation Tabs in side-menu
    kevinpfromnm Says:
    Sounds like you want navigation as a collapsible tree. If so, the jquery stuff might be a good fit.

    If that's too much, you can do it but you'll need to do a little bit of javascript to get it. Navigation tag just provides a <ul> list with some class additions. You'll want to build something like this in the end

    <ul class="navigation-bar">
    <li class="navigation-type"><a href="#" onClick="add javascript here to add current class to this and clear current from others">navigation type 1</a>
    <ul class="navigation-items">
    <li>...
    </ul>
    </li>
    <li class="navigation-type"><a as above a tag>nav type 2</a>
    <ul class="navigation-items">
    ...

    Then you style navigation-items to display: none and current to display: auto. But you need to make sure current is more specific than the default.

    Other than this, you can make a dropdown menu type by using :hover pseudo attribute instead of javascript toggle. That way you'd need more css to make it usable. There's plenty of examples of this type of menu system out there though.