We’ve been able to give each menu item under the main page a background using this:
.perc-navbar-vertical ul li
But now we’d like to give the top link a background (in this case, Godbold School of Business)
In the HTML code, this li is classed as such:
current nav-level-6 nav-entry-1 list-position-1
But we’re not able to style it. We’ve tried a multitude of ways, and it’s not picking it up:
.perc-navbar-vertical current nav-level-6 nav-entry-1 list-position-1
.perc-navbar-vertical current nav-level-6 nav-entry-1 list-position-1 ul li
.perc-navbar-vertical .current nav-level-6 nav-entry-1 list-position-1
.perc-navbar-vertical .current nav-level-6 nav-entry-1 list-position-1 ul li
.current nav-level-6 nav-entry-1 list-position-1
.current nav-level-6 nav-entry-1 list-position-1 ul li
How would we call the top list element in our style?
Actually looking at the markup, it appears that the class .perc-navbar-vertical is applied to the ul itself, so you may want to try this instead:
ul.perc-navbar-vertical li:first-child a{}
Looking over Jon’s code in his second example, can you verify that you also defined the list item as the first child (li:first-child)? This is an important change he made from his first example. If the CSS is applying correctly, the background should only affect your top link as it is the first of six list items. Additionally, if you’re looking to apply a background to the whole list item and not just the link text, you can remove the “a” from the end of his example.
Once you verify your code, let me know if it’s still not honing in on that top link correctly and we can troubleshoot this further.
Jon’s first code will affect all links because the anchor tag in each one is the first-child of each LI. The second piece he gave in the comment will target only the anchor tag in the first LI. Are you trying to style only the first menu item or are you trying to style the active one you are viewing a page under?
If the first:.perc-navbar-vertical li:first-child { background-color: #00ff00; } will give the first list item a green background.
If the second: Whenever you are within a section of your site, that section, on the navigation, has a class called “current” on it. To target this menu item use:
.perc-navbar-vertical li.current { background-color: #00ff00; } to give a green background to the current item.
I can’t see the markup you have or the way the page currently looks, but those are some starting points. Every time you are in a section, that section on the nav has a “current” class. They have numbered entries on them as well to target.
Whenever you want to target the classes, remember to put the “.” in front of the CSS selector. If you are targeting something with an ID on it, like a named region, remember to use the “#” in front of the selector.
Using CSS3, you can also alternate the items or select a specific item in the list using the following examples (try these out because they are fun ):
.perc-navbar-vertical li:nth-child(3) { background-color: #00ff00; } - 3rd item will be green.
.perc-navbar-vertical li:nth-child(even) { background-color: #00ff00; } - every other item will be green.
This will work fine when we want to manually control what shows on the navigation. But we would also like to utilize the navigation widget across our site to dynamically show page hierarchy based upon the location of the current page.
Accordion, by default, uses pairs of HTML to work: the h3 tag identifies the header of clickable sections, and an immediate div hides subsequent content that appears when the header is clicked.
I’m wondering how we can accomplish this with the navigation widget without the ability to adjust the generated list HTML (I’m assuming we can’t edit this HTML output in any way–am I wrong in that assumption?). We’ve changed the default h3 as a header to li. But that will also make child pages headers when we only want the second level of parents to become as such.
I feel as if we’re missing something simple or taking an unnecessarily harder route. Is dynamic navigation always this tricky?
The structure of that is based on the Nav Widget, which is a general UL > LI based nav menu. The script has several options that can be configured, which are commented in the fiddle pane. The coloring and styling is just an example there to show flexibility and it can be changed however you like. The very bottom of the script window shows some of the parameters being applied to show how the plugin works with the navigation to create what you see.
It’s not an official plug-in, but it was designed to be as flexible as possible so it would work with the nav widget. I have also placed a download of it with the JS and CSS files in a zip on our server if you want to test it and play around.
Here is a simple accordion effect we’ve worked into jsfiddle working with a similar list structure as the navigation widget: http://jsfiddle.net/mattrenfer/VQnyb/2/
One problem we’re having with implementing this in Percussion is that the links of the sidenav are actually taking us to the next page instead of expanding the menu (seen here: http://webwork.gardner-webb.edu:9992/…).
Any reason why this would be happening in Percussion and not in jsfiddle?
Also: Is there a way to perhaps toggle certain levels to be either expandable or links? We want our sidenav’s 2nd level to expand when there are 3rd level children present; if there are no children, then we’d like for it to take you to that 2nd level page instead.
The link took me to the linked page in jsFiddle as well and it should everywhere because the link is an active anchor. You are binding a click event to the anchor which will execute first, but then the browser will continue the normal course of action with an active anchor link that was clicked. To avoid this, the end of your function must return false. If you return false at the end of the click, it will cancel any other calls that come after, preventing the browser from linking the anchor.
Additional, you can download the plug-in I posted in my link above to accomplish this task and more if you wanted a little extra functionality beyond the simple expand and collapse. It not only creates the accordion effects for you, but also supports auto-expanding the menu to the active section your page is within. It has several configurable parameters that help control that are commented.
Thanks for your reply. I’ve tried to go with the plugin you posted earlier, but have had some hiccups.
How much of that plugin needs to be customized? As is, it doesn’t quite fit the HTML generated by the navigation widget. The JavaScript also creates classes that don’t appear when I plug it into Percussion (topNav & subNav).
I’ve made a JSFiddle changing the root class to perc-navbar-vertical, and it seems to work fine here: http://jsfiddle.net/rTe4V/35/
When we plug this into Percussion, the created styles topNav and subNav don’t show, and the child links are not hidden: http://webwork.gardner-webb.edu:9992/…
There isn’t much needed for the plug-in to work. As it is, the markup it is designed to work with is what is produced by the Navigation widget. Just make sure you set the Display Format of the Navigation widget, on the Layout tab, to Vertical - no rollover. At the bottom of the fiddle you will notice a start-up script that “initializes” the navigation:
$('.accordionNav').accordionNav({
autoClose: true, // this forces opened sections to close when a new one is clicked
autoExpand: true, // this makes it open up to the current section you are browsing
homeLinkTxt: ' Overview', // this is if you want a "Home" or landing page still linked
speed: 400, // this is the animation speed
makeHomeLink: true // makes a link to the landing page as first item in subnav
});
}); ```
I have updated it with comments to explain what each option in the sample does. On the second line you will notice the '.accordionNav' selector used. In my sample I use this class as my "root class" for the widget output. You can change that to whatever you set the root class on your Navigation widget to be. If you want to use the script as is from the fiddle, just go to your Style tab in CM1 and set the "Root Class" on the Navigation widget to be 'accordionNav' as shown in that code block. You can change the root class to whatever you want and just update that bit of script accordingly.
In addition, the options shown allow you to control how it behaves when rendered. With the Nav widget, as you identified, each top nav link is an actual link to the section landing page. As experienced in your demo, you cannot maintain this link when working with an accordion navigation. To combat this, the "makeHomeLink" and "homeLinkTxt" options exist. Setting "makeHomeLink" to true will create a landing page link as the first menu item in the subnav so you can still navigate to the landing page. The "homeLinkTxt" option allows you to specify your own appended text to the landing page title in the link. If you want to disable the landing page entirely, set "makeHomeLink" to false.
There are various options also commented in the script you can play with and tweak to your liking to get the desired effect. Additional classes are added to levels along the way to allow you to target open navs, the current tree, and the active one. A tool like firebug will help you see how things change as it builds.
We appreciate your help, as we’ve been able to get the accordion functionality working. Now it’s a matter of styling elements of the navigation.
On that note, we have two inquiries regarding customization of the navigation widget itself.
Can we order the links showing on the navigation? We’d love for the current page to be at the very top (highlighted with our graphical red background). As it is, we noticed there is a set order to them (either alphabetically or created date).
How can we disable links parallel to the current page’s level from showing? For example: If there are 3 sections on the same level, and the user is currently on 1 of those section’s page, how can we disable the other two from displaying? We’d like the navigation to show a single section’s contents and lower–not necessarily display what other, unrelated sections there are, even if they do fall on the same level (I hope that makes sense).
I’ve thought of hiding those links by selecting their specific perc-nav position and using CSS to display:none. But if that position changes depending on the number of a section’s links, will that still work, or will the predetermined display:none; of a position turn off unintended links?
Thanks so far for all your support with this. It has been something of a beast for us.
You can order the navigation links and it’s actually quite easy. From the Navigation editor in CM1, you only need to click and drag the navigation links around. If you notice while dragging it around, there are green highlights where you can drop the items. You can drag them around in the same level to reorder them, and you can drag them between levels to promote items up or drop them into sub levels.
If you are looking to just have all sub section links display under a heading that is the parent section link, you will need to be creative with the use of the breadcrumb and navigation widgets. Using the breadcrumb widget, you can style so that the current section is listed above the navigation. Then, you can set the navigation widget to display starting at a specified level, listing one level lower so you can see sub items.
I can see about posting a sample for you on this to show how we have done this for a couple other implementations. It’s nice because utilizing the Breadcrumb and Navigation widgets means it’s still automated for you.
It seems the second answer would solve the first issue of link order as well, since that would place the current page at the top, although I’m not sure how we’d remove the current page from the navigation widget below as to avoid repetition.
Also: How can we limit the breadcrumb widget to show only the current page link? I’ve placed one and checked only that option, but a whole trail of links follow.
There’s no built-in option to limit the Breadcrumb widget to just show the current page. The checkbox to show your current page or not is meant in addition to the usual breadcrumb string of links. For just a single link as you’re describing, creating a managed link through a Rich Text widget would usually be your best bet.
The setup Daved describes in his second option above involves creative CSS styling. The sample he is seeing about posting would show you what goes into a configuration like that.
):