Help with Horizontal Nav Accordian Use

Put your questions here on how to do things in ProtoShare.
Mark Larsen
Posts: 2
Joined: Tue Feb 22, 2011 1:57 pm

Help with Horizontal Nav Accordian Use

Postby Mark Larsen » Tue Feb 22, 2011 2:11 pm

I am trying to implement the accordian style horizontal nav. My primary and sub pages show just fine if i choose "fly out". If I choose the "accordian" list style my nav doesn't expand to show sub pages. I have searched the forum boards and tried different settings to no avail. Any help would be appreciated.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Help with Horizontal Nav Accordian Use

Postby Josh Kristof » Wed Feb 23, 2011 10:20 am

Mark,

The accordion style of the horizontal navigation component might not function the way that you expect. It doesn't automatically expand collapse on a single page. Instead, based on the page it's on and it's position in the site map it displays a static accordion.

The create a more dynamic accordion there are a couple of ways you could this. Use states to show different navigation components on mouse-over, but this would probably be time prohibitive depending on the complexity of your project, or create an accordion component using an Advanced HTML component. An example of this can be see here: http://www.dynamicdrive.com/dynamicinde ... bullet.htm

You can add the HTML to the component, upload the image and .js files to the Assets Library and adjust the links.
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

Mark Larsen
Posts: 2
Joined: Tue Feb 22, 2011 1:57 pm

Re: Help with Horizontal Nav Accordian Use

Postby Mark Larsen » Thu Feb 24, 2011 8:51 am

Thanks Josh. We'll give that a shot.

manimejia
Posts: 16
Joined: Fri May 07, 2010 6:24 am

Re: Help with Horizontal Nav Accordian Use

Postby manimejia » Mon May 23, 2011 11:51 am

I've had good luck with using the "Tree View" Rich UI component to represent accordion layouts. Inside this component you could manually insert links to pages or states, or almost any other HTML content you wish. This "Tree View" component handles the collapsing animations and the hide/show toggling of it's content. It behaves just like I want an accordion to behave, but it does not look like one. To make it look like an accordion element I add an "accordion" class to it, with the following CSS in the default stylesheet:

Code: Select all

/************************** Tree Accordion *******************/
.s9-tree-view.accordion .x-tree-node .x-tree-node{
padding-left:5%;
}
.s9-tree-view.accordion .x-tree-node .x-tree-node-indent,
.s9-tree-view.accordion .x-tree-node .x-tree-node-icon{
display:none !important;
}

.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el{
padding:5px 0;
background:#ccc;
}
.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el .x-tree-ec-icon{
width: 95%;
position: absolute;
}
.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el .x-tree-node-indent,
.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el .x-tree-node-icon,
.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el input{
display:none;
}
.s9-tree-view.accordion .x-tree-root-node>.x-tree-node>.x-tree-node-el .x-tree-node-anchor{
display:block;
padding-left: 15px;
}

This works on Protoshare 4 and 5, though sometimes they change their CSS class names without warning on minor updates.
M.M.

Josh Kristof
Posts: 525
Joined: Tue Mar 31, 2009 3:40 pm

Re: Help with Horizontal Nav Accordian Use

Postby Josh Kristof » Thu May 26, 2011 10:25 am

Thanks for the great example and feedback.

Do you have an example of a class name that was changed? The only time I am aware of this was the conversion between 3.9 and 5. When the classes were renamed, migration code moved all CSS in the stylesheet to use the new names.
Josh Kristof
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare


Return to “How Do I...”

Who is online

Users browsing this forum: No registered users and 1 guest

cron