Drop-down menu flyouts to right AND left? [Solved]

[tophers]

I designed and built this site with the best of intentions, but as always something had to creep in and pop my bubble. 

I'm using the CCMenu - horizontal for site navigation, and everything was fine until the client decided to shuffle the main navigation. Now I have a category at the far right of the page that has a drop-down with children, resulting in the flyouts extending past my optimum viewing width (especially on the client's monitor, which must be set to 1024 x 768).

So my question is this - how can I set the menu to flyout to the LEFT for this last menu, while leaving the rest flying out to the RIGHT? See the example below (About CTCC > Our Management > Board of Directors, for example).

http://www.blumonkee.com/clients/ctcc/cms/

[Dr.CSS]

Not unless you give the li about a class of about...

If you just change #primary-nav ul ul to have right:100% all them will come out on the left...

#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  right: 100%;
  top: 0px;
}

You can't get close to the other ul ul without using #primary-nav li.about, I think ...

And you have a reaping ID of subnav it should be a class, IDs are meant to be unique, no 2 the same, it throws an error...

Result: 0 errors / 17 warnings

line 16 column 1 - Warning: element not empty or not closed
line 469 column 1 - Warning: discarding unexpected
line 100 column 2 - Warning: anchor "subnav" already defined
line 121 column 2 - Warning: anchor "subnav" already defined
line 136 column 2 - Warning: anchor "subnav" already defined
line 145 column 2 - Warning: anchor "subnav" already defined
line 184 column 2 - Warning: anchor "subnav" already defined
line 189 column 2 - Warning: anchor "subnav" already defined
line 226 column 2 - Warning: anchor "subnav" already defined
line 247 column 2 - Warning: anchor "subnav" already defined
line 270 column 2 - Warning: anchor "subnav" already defined
line 275 column 2 - Warning: anchor "subnav" already defined
line 320 column 2 - Warning: anchor "subnav" already defined
line 347 column 2 - Warning: anchor "subnav" already defined
line 360 column 2 - Warning: anchor "subnav" already defined
line 371 column 2 - Warning: anchor "subnav" already defined
line 398 column 2 - Warning: anchor "subnav" already defined
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Transitional//EN"
Info: Document content looks like XHTML 1.0 Transitional

[tophers]

Thanks for the heads-up on the excess of 'subnav' ids - I went a bit overboard when I was modifying the .tpl to accommodate the graphics for the top level navigation. I pulled the extra code out and it fixed that problem.

As for assigning a specific class to the About , I'm not sure how to go about it. The Menu Manager assigns classes to menu items (which I'm sure you know  ), and using the specific ID I've set up doesn't seem to have any effect.

So i guess I'm looking for help. I've included the modified .tpl for the menu system I'm using (I had to assign unique IDs to each in order for the image swap to work on my particular design).

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string='<ul class="subnav">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li id="{$node->alias}" class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li id="{$node->alias}" class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li id="{$node->alias}" class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li id="{$node->alias}"><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
<div class="clearb"></div>
</div>
{/if}

[Dr.CSS]

I found a way...

Take the ID for each one to point them left then for 'about' point it right, of course you'll have to do something about the arrow, the same type of repetitious thing with the IDs with padding on the left for it...

#planners ul ul,#attendees ul ul ,#facility ul ul ,#services ul ul ,#destination ul ul  {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}
#about ul ul {
  margin-top: 1px;
  margin-left: -1px;
  right: 100%;
  top: 0px;
}

EDIT: ps. you seem to have an extra at the bottom, maybe no 'contentwrapper' any more?...

[tophers]

Thank you! That did the trick. I think I've been working on this project for too long, in too many small chunks. Makes it hard to remember where I am. Now I just have to tweak the arrows as you mentioned an I'll have this ready to show the client.

And there was an extra in there - I'd duplicated the end of the Content by mistake.

Thanks again for all your time on this - it's greatly appreciated!

[Dr.CSS]

Your welcome, don't forget to mark the original post [solved]...