Styling Custom Navs

[mechaflash]

Creating a custom navigation panel inside my site that's separate from the main navigation... its more of an internal navigation to connect to lower-tier sub-pages.

What I would like to do is be able to use this one sidebar, and have links as so of parent pages:
Healthcare
Retail Services
Financial Services
Other Business Services

I want the module to include their sub-pages as well... but i want to make it so that their sub-pages are hidden unless its parent page is active.

For example:
Parent Page = Healthcare sub-pages=Medical Services, Hospitals, Emergency Services, Doctor's Offices
If 'Healthcare' is the active link, then i want the nav to look like:
Healthcare
Medical Services
Hospitals
Emergency Services
Doctors Offices
Retail Services
Financial Services
Other Business Services

But if it not active, I want it to just look like:
Healthcare
Retail Services
Financial Services
Other Business Services

Is there a way to accomplish this easily without having to make multiple instances of the custom navigation? Like hide the child pages unless parent is active?

~Mecha

[Medianomaly]

You can do this pretty easily with CSS. Your "active" top-level nav item will have a class of either "active" or "trail", so you can set up your selector to hide children of it, i.e.

/* By Default hide all children nav items of a parent */
#myMainNav li ul
{
display: none;
}

/* But for the active item, show them */
#myMainNav li.active ul,
#myMainNav li.trail ul
{
display: block;
}

If you want to physically remove them from the HTML, one thing you can do is customize the nav_default.tpl template. You could wrap the line that says "<?php echo $item['subitems']; ?>" in a PHP IF statement -- maybe check if $item['class'] contains 'active' or 'trail'.

[mechaflash]

You can do this pretty easily with CSS. Your "active" top-level nav item will have a class of either "active" or "trail", so you can set up your selector to hide children of it, i.e.

/* By Default hide all children nav items of a parent */
#myMainNav li ul
{
display: none;
}

/* But for the active item, show them */
#myMainNav li.active ul,
#myMainNav li.trail ul
{
display: block;
}

If you want to physically remove them from the HTML, one thing you can do is customize the nav_default.tpl template. You could wrap the line that says "<?php echo $item['subitems']; ?>" in a PHP IF statement -- maybe check if $item['class'] contains 'active' or 'trail'.

Thanks for responding.

I tried doing what you said, and changing the CSS to hide the children links in the nav and show the active and trailing, but it seems as .active and .trail isn't the correct target for these. This is the custom nav's template coding:

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

I'm not sure what I'm looking for in PHP and how it works so I'm a lil lost from here.

[Medianomaly]

Rather than the PHP code, can you post the rendered HTML output instead? In other words copy and paste the snippet of code for your Navigation from your browser's source code output. Then I can get you closer to what you need.

[mechaflash]

ugh its okay. I went ahead and just built a nav from scratch. But for the sake of wanting to know, i'll post it here in a sec... need to reload it.

[mechaflash]

<div class="mod_customnav nav_sidebar block" id="nav_industrysolutions">

Skip navigation

<ul class="level_1">
<li class="active first"><span class="active first">Healthcare |</span>[*]Medical Services[*]Hospitals[*]Emergency Services[*]Doctor's Offices[*]Retail Services |[*]Financial Services |
<li class="last">Other Business Services |
[/list]
 
<a name="skipNavigation33" id="skipNavigation33" class="invisible"></a>

</div>

[mechaflash]

ALSO - Each parent link has anywhere between 3-5 links per... so all of the other ones are going to have children links as well.

[Medianomaly]

Well, if that's how the output looks, the below SHOULD work (unless its being overridden by another style somewhere else...)

/* By Default hide all children nav items of a parent */
#nav_industrysolutions li ul
{
display: none;
}

/* But for the active item, show them */
#nav_industrysolutions li.active ul,
#nav_industrysolutions li.trail ul
{
display: block;
}

Just to clarify -- the children items ARE in showing in your code (you've just removed them from what you pasted in)?

[mechaflash]

Nope the child links are in the code... the nav doesn't separate them from the parent pages though and that's the problem I'm having cause the way the custom nav spits out the code, it doesn't distinguish between the two. The child links in the code are

[*]Medical Services[*]Hospitals[*]Emergency Services[*]Doctor's Offices

[Medianomaly]

Oh -- you are using a custom navigation module. I didn't catch that.

Yeah, the only way to get my solution to work would be to use a regular navigation module and hide the pages you don't want to display from the navigation.

In your custom navigation items template, try wrapping the output (inside the foreach loop) with this:

<?php if( $GLOBALS['objPage']->id == $item['pid'] ): ?>
// Show the items
<?php endif; ?>

This says if the ID of the page you are currently on is the same as the parent ID of the individual nav item, show it. Not sure if it'll work but worth a shot.

[mechaflash]

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if( $GLOBALS['objPage']->id == $item['pid'] ): ?>
// Show the items
<?php endif; ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

When I put the code like this with your input, it still shows all the links. Did I place it in the wrong spot? I'm clueless to php, just starting to learn Javascript and going into PHP next but yeah =/

[Medianomaly]

Like this...

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if( $GLOBALS['objPage']->id == $item['pid'] ): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

[thyon]

This is easy to solve. Just set a stop limit of 1 in your module. When you click on a parent, only then, will the module render the submenus. This will also highlight the parent section like a breadcrumb. This makes things much easier for you.

[mechaflash]

okay i used the code you gave me, and now it makes the parent links disappear and only leaves the child links visible when you click on one of the parent links. I want the parent links to stay visible at all times, but only have the child links disappear if its parent link is not active.

[mechaflash]

This is easy to solve. Just set a stop limit of 1 in your module. When you click on a parent, only then, will the module render the submenus. This will also highlight the parent section like a breadcrumb. This makes things much easier for you.

so just use the regular navigation module (not the custom navigation module) and hide the links i dont want... then set stop limit 1? I should've just linked this earlier so everyone can see what I'm trying to manipulate.:
http://cbs-checkmate.com/content/section/7/2/
Towards the middle left of the page you'll see a 2nd navigation menu. Click on a link and it opens up the child links below the parent and so on. None of these links are in the main navigation that's located at the top left of the page.

[thyon]

You'll need two nav modules. 1 for the MAIN NAV menu in the header, that one you must FORCE a [x] hard limit at 1.

Then setup a second navigation that starts at level 1 and finishes at level 2, but don't force a hard limit. This way the 2nd level nave (this is the one that's further down) will always have a sub-nav of the parent (and NOT include the parent), and auto-expand as needed with the sub items. Leo's nav module is rather brilliant.

[mechaflash]

Came back to this thread after a while. Used thyon's suggestion on a regular navigation module and works out perfectly. The 'Stop Level: 1' allows active link submenus to be visible while all other submenus on the same navigation level to stay invisible. Went with a single navigation menu in the left column with multiple levels. No CSS styling needed, just the standard navigation module and stop level set to 1.