Forums

jellybellyjim

Hi,

i'm pretty new to css and website building in general, been going over a week and got this far www.doltonanddex.co.uk which I am really happy with and I have the three state menu thing going (only on about for active, havnt got round to the others yet)
but...(get to the point).... I want a sidebar on the left of the big white box with sub catagorys that link to other pages within the main nav sections, eg in the our work tab at the top I want when its the active page for the sub pages to be displayed on the right each with their own rollover states etc. Not sure how to structure the site and the css?? do I make a seperate HTML page for each sub catagory and then put in a seperate UL for that page each time with its own id and then reference all of those lists in the one style sheet? It just seems like I will end up with loads of css?

sorry if this doesnt make any sense

Dexy

Robskiwarrior

what I would do is use the UL list idea and instead of creating the "drop down" full CSS menu effect, I would use a little jQuery to position the sub categories on the left instead of anywhere near your top menu.

For your HTML you would still go:


  		<ul id=\"nav\"> 
				<li><a class=\"about\" href=\"about.html\">about us</a></li> 
				<li><a class=\"services\" href=\"services.html\">sevices</a></li> 
				<li><a class=\"our_work\" href=\"our_work.html\">our work</a></li> 
				<li><a class=\"contact\" href=\"contact.html\">contact</a></li> 
                </ul>

But say for your about page...

<ul id=\"nav\"> 
	<li><a class=\"about\" href=\"about.html\">about us</a></li> 
        <li><ul>
              <li>Sub item</li>
              <li>Sub item</li>
              <li>Sub item</li>
        </ul></li>
        <li><a class=\"services\" href=\"services.html\">sevices</a></li> 
	<li><a class=\"our_work\" href=\"our_work.html\">our work</a></li> 
	<li><a class=\"contact\" href=\"contact.html\">contact</a></li> 
</ul>

Then you could position absolutely the ul#nav li ul to where ever you want... just make sure you have your #nav dosn't have "overflow:hidden;"

Then use the jQuery to control the switch state, and maybe add a sexy bit of animation :D

just one way of doing it of course...

treehouse : what would you like to learn today?

Forums

help with sidebar navigation (basics)