Some of you have already seen this design floating around, since I already got some major help on the columnar layout, but it is a work in progress, and I am also building up my tool set per say.
I have a column on the left side of the page that will house navigation that will allow full visibility of the sites hierarchical structure, pretty much a fancy Site Map. Its design is to work as a expandable-collapsible structure, much like you see in a Browser Sidebar, or if you use Vista, the folder navigation on the left side of the screen.
When someone clicks on a Parent its children will appear or disappear underneath it, depending on the current state the Parent was in, and if the children have children of their own, the same happens.
Right now the navigation is in just a CSS menu state. You hover over a Parent and the Children pop out to the side. But I think to implement the click and stay open structure (Rollouts - the term used in 3DS Max), I am going to need a bit of JS.
Right now though I want to tackle something else, which is just to get the Children to appear, but not to the side, instead right underneath their respective Parent while bumping down the rest of the menu.
I remember making it do it before just using CSS. It was actually an undesired effect of the CSS menu, but it worked for IE because of IE’s Z-index glitch and side pop outs that kept conflicting with the main content. However, I can’t seem to find that happy mistake anymore. Now the Children just float on top, covering the rest of the menu and not bumping it down.
There are many problems that I foresee in creating this structure and function, so I am going to take it in steps. This first one is just getting the Children to appear and effecting the menu as such.
The way I see myself tackling this is:
[LIST]
[]Getting the Children to appear and bump the rest of the menu down when the Parent is hovered over
[]Enabling the click and stay states: If Parent is closed on click, expand Children. Else if Parent is Expanded on click, collapse Children.
[]Setting up the highlight system telling user what page they are on.
[]Setting up the highlight system for opened and closed state: Children that are being visited while Parent is closed highlights the Parent, once Parent is reopened, highlight jumps back to Child.
[*]Finally maintaining the entire state of the menu while users navigate through pages. The highlighting will change respectively, but the Expanded and Collapsed states of the menu will remain as the user had them.
[/LIST]
Here is all the resources and code that you can sift through. I’m going to concentrate on the CSS for now.
The Site I am Working On:
http://www.wku.edu/~markanthony.echipare/5.0/Index/_index.php
Menu Layout:
<div id="left_side">
<ul>
<li id="SM_Parent">
<a href="#">
Home
</a>
<ul>
<li id="SM_Child">
<a href="#">
Welcome
</a>
</li>
<li id="SM_Child">
<a href="#">
WHY Recycle?
</a>
</li>
<li id="SM_Child">
<a href="#">
Recycle It
</a>
</li>
</ul>
</li>
<li id="SM_Parent">
<a href="#">
Do's and Don'ts
</a>
<ul>
<li id="SM_Child">
<a href="#">
Intro
</a>
</li>
<li id="SM_Child">
<a href="#">
Recycling Policies
</a>
</li>
<li id="SM_Child">
<a href="#">
Recycling Centers
</a>
</li>
<li id="SM_Child">
<a href="#">
Paper
</a>
</li>
<li id="SM_Child">
<a href="#">
Cardboard
</a>
</li>
<li id="SM_Child">
<a href="#">
Books & Magazines
</a>
</li>
<li id="SM_Child">
<a href="#">
Plastics
</a>
</li>
<li id="SM_Child">
<a href="#">
Aluminum
</a>
</li>
<li id="SM_Child">
<a href="#">
Glass
</a>
</li>
<li id="SM_Child">
<a href="#">
Batteries
</a>
</li>
<li id="SM_Child">
<a href="#">
Ink Cartridges
</a>
</li>
<li id="SM_Child">
<a href="#">
Electronics
</a>
</li>
</ul>
</li>
<li id="SM_Parent">
<a href="#">
News
</a>
</li>
<li id="SM_Parent">
<a href="#">
FAQ
</a>
</li>
<li id="SM_Parent">
<a href="#">
About US
</a>
</li>
<li id="SM_Parent">
<a href="#">
Email Us
</a>
</li>
</ul>
Stiff Left Side Area: <br>Expandable and collaspable site map navigation. Shows parent pages and their children. Highlights exactly where you are in the map, and if you are in a child page, the parent page is expanded unless you collapse the parent and hide the child listings, then which the parent is just highlighted until expanded again. Expansion of other parents is also allowed. Throughout navigation of site, Site Map will maintain opened and closed states until user exits site, but as they navigate the highlighted area will change.
</div>
Menu CSS:
#left_side
{
float: left;
width: 148px;
margin-left: -164px;
padding: 0 0 0 1px;
text-align: left;
border: 0px dashed #FFAA00;
}
#left_side
{
float: left;
width: 148px;
margin-left: -164px;
padding: 0 0 0 2px;
text-align: left;
border: 0px dashed #FFAA00;
}
#left_side ul
{
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#left_side a, #left_side h2
{
margin: 0;
padding: 0px 5px;
border: solid 0px;
border-color: #CFC #8B8 #585 #BEB;
display: block;
}
#left_side h2
{
background: #000;
color: #FFF;
text-transform: uppercase;
}
#SM_Parent a:hover
{
color: #55FF55;
}
#SM_Child a:hover
{
color: #CC0102;
}
#left_side li
{width: 142px;
display: block;}
#left_side ul ul
{
position: relative;
top: -100%;
left: 100%;
width: 100%;
height: 100%;
z-index: 1;
display: block;
}
div#left_side ul ul, div#left_side ul li:hover ul ul
{display: none;}
div#left_side ul li:hover ul, div#left_side ul ul li:hover ul
{display: inline-block;}
#SM_Parent
{
width: 142px;
height: 18px;
margin: 0;
padding: 0;
color: #FFFFFF;
background-image:url(Site_Map_Parent_BG.png);
border: 1px solid #000000;
display: block;
}
#SM_Parent a
{
color: #FFFFFF;
}
#SM_Child
{
width: 142px;
height: 18px;
margin: 0;
padding: 0;
color: #666666;
background-image:url(Site_Map_Child_BG.png);
border: solid #000000;
border-width: 0 1px 1px 1px;
display: block;
}
#SM_Child a
{
color: #666666;
}
