Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Navcontainer working with Javascript?

Newbie
  
Join Date: Aug 2007
Posts: 12
#1: Aug 4 '07
I am working on a site that uses CSS navcontainer, but the client would like it so that when you hover over a main section the sub sections highlight for that relevant menu option. I am pretty sure this isn't possible with CSS so I am thinking maybe JScript could be the answer.

HTML

CSS

I also have the issue that in IE the sub menu option when seleced uses the top level highlight image, in all other browsers it works!

CSS Issue

Much appreciated ANY help anyone can give me.

pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#2: Aug 4 '07

re: Navcontainer working with Javascript?

Heya, tricky76.

If the sub sections are children of the main section in your menu, you can use this selector:
Expand|Select|Wrap|Line Numbers
  1. .navSection:hover .subSection
  2. {
  3.     background-color: #ffff00;
  4. }
  5.  
Newbie
  
Join Date: Aug 2007
Posts: 12
#3: Aug 5 '07

re: Navcontainer working with Javascript?

That kind of makes sense but I'm not too clear on how that would apply to my present code.

here is the HTML

[HTML] <!-- NAV -->
<div id="navcontainer">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">What's new</a></li>

<li><a href="#">About us</a></li>
<li><a href="SubMain_who.html" target="_top">Who we work with</a></li>
<div id="navcontainersub">
<a href="#">Schools</a>
<a href="localauthorities.html" target="_top">Local Authorities</a>
<a href="#">Charities</a>
</div>
<li><a href="SubMain_services.html" target="_top">Our services</a></li>
<div id="navcontainersub">
<l2><a href="#">Well-Being</a></l2>
<l2><a href="#">EAP</a></l2>
<l2><a href="#">Headspace</a></l2>
<l2><a href="#">Training &amp; development</a></l2>
</div>
<li><a href="#">Contact us</a></li>
</ul>
</div>

<!-- END OF NAV -->[/HTML]

And the CSS

Expand|Select|Wrap|Line Numbers
  1. /* Start of Main Navigation */
  2.  
  3. #navcontainer {
  4.     float: left;
  5.     padding-top: 0px;
  6.     padding-bottom: 5em;
  7.     width: 173px;
  8.     text-align:left;
  9.     }
  10.  
  11. #navcontainer ul {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     font: 12px Trebuchet MS, verdana, arial, sans serif;
  16.     letter-spacing: -0.2px;
  17.     text-indent: 24px;
  18.     height: 21px;
  19.     width:171px;
  20.     list-style:none;
  21.     }
  22.  
  23. #navcontainer a {
  24.     background: url(../images/nav_back.gif);
  25.     display: block;
  26.     width: 171px;
  27.     padding-top: 6px;
  28.     height: 20px;
  29.     }
  30.  
  31. #navcontainer a:link, #navcontainer a:visited {
  32.         color:#000000;
  33.         text-decoration: none;
  34.         }
  35.  
  36. #navcontainer a:hover {
  37.     background: url(../images/nav_back_man.gif);
  38.     color:#FFFFFF;
  39.     text-decoration: none;
  40.     padding-top: 6px;
  41.     height: 20px;
  42.     }    
  43.  
  44. #navcontainer:hover, .navcontainersub {
  45.     background: url(../images/nav_sub_hover.gif);
  46.     }
  47.  
  48. #navcontainer li a#current {
  49.     background: url(../images/nav_back_man.gif);
  50.     color:#FFFFFF;
  51.     text-indent: 24px;
  52.     text-decoration: none;
  53.     padding-top: 6px;
  54.     height: 20px;
  55.     border: 0px;
  56.     }
  57.  
  58. /*------ Sub Nav ------*/
  59.  
  60. #navcontainersub {
  61.     background: url(../images/nav_sub_hover.gif);
  62.     color:#666666;
  63.     font: 11px Trebuchet MS,verdana, arial, sans serif;
  64.     text-indent: 30px;
  65.     text-decoration: none;
  66.     }
  67.  
  68. #navcontainersub a {
  69.     background: url(../images/nav_back_plain.gif);
  70.     display: block;
  71.     letter-spacing: -0.3px;
  72.     width: 171px;
  73.     padding-top: 5px;
  74.     height: 18px;
  75.     }
  76.  
  77. #navcontainersub a:link, #navcontainersub a:visited {
  78.     background: url(../images/nav_sub_hoverw.gif);
  79.     color:#666666;
  80.     text-decoration: none;
  81.     }
  82.  
  83. #navcontainersub a:hover {
  84.     background: url(../images/nav_sub_hover.gif);
  85.     color:#666666;
  86.     text-decoration: none;
  87.     padding-top: 5px;
  88.     height: 18px;
  89.     }
  90.  
  91. #navcontainersub l2  {
  92.     background: url(../images/nav_sub_hover.gif);
  93.     color:#666666;
  94.     font: 11px Trebuchet MS,verdana, arial, sans serif;
  95.     text-indent: 30px;
  96.     }
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#4: Aug 5 '07

re: Navcontainer working with Javascript?

Heya, Tricky.

First off, there are a couple of things you'll want to fix in your code:
Expand|Select|Wrap|Line Numbers
  1. <!-- NAV -->
  2. <div id="navcontainer">
  3.     <ul>
  4.     <li><a href="#">Home page</a></li>
  5.     <li><a href="#">What's new</a></li>
  6.  
  7.     <li><a href="#">About us</a></li>
  8. <li><a href="SubMain_who.html" target="_top">Who we work with</a></li>
  9. <div class="navcontainersub">
  10.         <a href="#">Schools</a>
  11. <a href="localauthorities.html" target="_top">Local Authorities</a>
  12. <a href="#">Charities</a>
  13. </div>
  14.     <li><a href="SubMain_services.html" target="_top">Our services</a></li>
  15. <div class="navcontainersub">
  16.         <l2><a href="#">Well-Being</a></l2>
  17. <l2><a href="#">EAP</a></l2>
  18. <l2><a href="#">Headspace</a></l2>
  19. <l2><a href="#">Training &amp;amp; development</a></l2>
  20. </div>
  21.     <li><a href="#">Contact us</a></li>
  22. </ul>
  23. </div>
  24.  
  25. <!-- END OF NAV -->
  26.  
Instead of '&', use '&amp;', and instead of using 'id="..."', use 'class="..."' when there is more than element with it. IDs are supposed to be unique.

Ok, so using the code above, looks like you'll want to do something like this:
Expand|Select|Wrap|Line Numbers
  1. #navcontainer .navcontainersub:hover a
  2. {
  3.     background-color: #ff00ff;
  4. }
  5.  
The idea is to color the background of anchors that are children of the element whose class is 'navcontainersub' that the mouse is currently hovering over.
Newbie
  
Join Date: Aug 2007
Posts: 12
#5: Aug 5 '07

re: Navcontainer working with Javascript?

I can't thank you enough. This worked like a treat and improved my understanding to improve the navigation and clean my code even more.

:D
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#6: Aug 5 '07

re: Navcontainer working with Javascript?

Heya, Tricky.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)
Newbie
  
Join Date: Aug 2007
Posts: 12
#7: Aug 6 '07

re: Navcontainer working with Javascript?

Hi,

thanks and guess what I already have a new problem... Its not working correctly in IE6 for some reason? I've posted in the correct area this time though...

Navcontainer issue in IE6
Reply

« previous question | next question »

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,533 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved