I’m having trouble setting up a modified vertical navigation. I was led to an accordionNav plugin, http://jsfiddle.net/CheapSk8/rTe4V/, by Nathaniel. I made some changes, and mistakes, and need to start from scratch. It’s not working properly this time.
I’m hoping to get instructions for a proper setup. I figure others might be interested too.
Hey Lloyd,
Here are some high-level steps you can follow that should get you moving in the right direction:
Through the Content tab, edit the template’s Meta-data and add the JavaScipt code into the “Additional head content” insertion point, being sure to wrap the code in script tags like so:
<script type="text/javascript">Copied code goes here</script>
For better performance, once you’ve got everything working, you will want to relocate this code into an accordionNav.js file, upload it into your site’s theme directory in the Design library, and then link your template to it using this type of pathing:
<script type="text/javascript" src="/web_resources/%7Bmy_theme%7D/%7Bjs_folder%7D/accordionNav.js"></script>
Once that’s setup, you’ll want to add the below CSS to your main style sheet. I’ve made a few tweaks to the original CSS, including making sure that the anchor tag selector is only tied to anchor tags within the Navigation widget (in the example code it styles anchor tags globally), removing the bullets from the unordered list, removing references to external background images and replacing them with very ugly – but easier to reference and modify – background colors, and generally streamlining the layout:
width: 175px;
color: #000000;
}
.accordionNav ul {
list-style-type: none;
background-color: red;
margin: 0;
padding: 0;
}
.accordionNav a {
width: auto;
line-height: 1.4em;
color: #000000;
display: block;
font: 14px Tahoma,"Lucida Grande","Trebuchet MS",Helvetica,sans-serif;
padding: 5px 2px 5px 8px;
text-decoration: none;
}
.topNav.open \> a {
background-color: blue;
}
.subNav a, .subNav.open a
{
font-family: Helvetica,Arial,Sans-Serif;
font-size: 12px;
font-weight: normal;
display: block;
padding: 5px 0 5px 8px;
position: relative;
text-decoration: none;
width: auto;
}
.subNav .active {
background-color: orange;
}
ul.subNav {
margin: 0;
padding: 0;
width: auto !important;
}
ul.subNav li:first-child {
padding-left: 10px;
}
ul.subNav li:first-child a {
font-weight: bold;
}
ul.subNav li {
background-color: green;
padding-left: 30px;
}
ul.subNav li:hover {
background-color: yellow;
} ```
Obviously this will still require heavy customization, but it should be a cleaner start.
Next, add your Navigation widget to your template, and configure it to use the **Vertical** layout (and not the Vertical Rollover, as this will activate the built in Superfish scripts and cause scripting conflicts). Next, in the Style tab, give the Navigation widget the root class of **accordionNav**. This is a big one, as neither the JavaScript nor your CSS will target this nav widget without it.
At this point you should have an ugly but functional accordion nav. Let me know if you have any trouble with this.Hey Nathaniel,
Ugly:yes. Functional: somewhat.
When I click on an item in the menu, it expands and minimizes, fast and twice.
What have I done? What’s next?
Your move,
Lloyd.
Lloyd,
Do you have any other JavaScript running on your page? If so, try disabling it to see if this behavior is being triggered by a scripting conflict. Also, what browser are you using?
Morning Nathaniel,
I removed all other JavaScript, page and assets, and the behavior is the same for Chrome, Firefox, IE and Safari.
Hey Lloyd,
I’ve reconfigured this a couple different ways and have been unable to reproduce the behavior you are encountering. You might try creating a new blank Percussion template and then follow the above steps to implement the accordianNav in something of a control environment, to ensure that there’s no chance that anything on your template could be causing this behavior. Also, if there’s any way you could make your CM1 published site accessible to us, I would be curious to see if I can spot any JavaScript errors that might be leading to this problem.
Nathaniel,
I have found out that the template I created just for testing this, which was copied from another one, is the ONLY ONE in my site that has this issue. I removed all widgets, regions, assets and JavaScript except navigation and it still happens.
So, the result is the template is being put down and I will see if anything else strange pops up in the future.
I may have other questions after the powers that be have their say.
Thank you again for your continued and excellent support.
Lloyd.
Lloyd,
Very strange, but also very good news that you’ve gotten unstuck. If you hadn’t already noticed, I updated the CSS code above on Tuesday to clean things up and make it all (hopefully) a little easier to customize, in case you were still working off of the CSS I had given you on Monday.
Hi Nathaniel,
After a brief heart attack and quite a few deep breaths, I’m back.
[top box = region w/breadcrumb widget and an html widget w/Google Search form]
All of a sudden most of my templates had everything after the top box [all regions, widgets and content] disappear. After calming down, I remembered that I had reinserted the JavaScript for the search box form [after removing for testing a couple of days ago]. Without, it’s working. I’ll get back to that problem another day.
I hadn’t seen that the CSS was changed, but I’ll start with that next.
Thanks for listening and bearing with me.
Lloyd.
Yikes! Your server admins back up your systems (especially your database) regularly, don’t they? I find that the peace of mind this brings always lessens the severity of those types of brief heart attacks.
Just to finish off, systems and db are being backed up. Phewww! Updated CSS is in play.
Thanks again,
Lloyd.