Aug252006
CSS: Building Navigations From Unordered Lists
Goog Feed, CSS, Design
Comments (8)
So, you have an unordered list that you want to look pretty, huh? Well, I ran into this problem here at work a little while back, and it was requested I share the solution with all.
Problem:
We were (and still are) building a web app, where the navigation would be dynamic based on the user and their permissions, and each nav item could have children under it, sub-items. So we needed to come up with a CSS solution to the problem with a tad bit of JavaScript to make IE happy.
Now, we used a recursive function to query the database for all of the nav items for a user with their children, and possibly their children's children and so on, and when we looped through this result set with ColdFusion, here was a look alike of the nav html that was generated.
<ul id="nav2">
<li><a href="#">Home</a></li>
<li class="sectionparent"><a href="#" class="sectionparent">About</a>
<ul>
<li><a href="#">History</a></li>
<li class="sectionparent"><a href="#" class="sectionparent">Team</a>
<ul>
<li><a href="#">First Team</a></li>
<li class="sectionparent"><a href="#" class="sectionparent">Second Team</a>
<ul>
<li><a href="#">Joe</a></li>
<li><a href="#">Doug</a></li>
<li><a href="#">Bill</a></li>
</ul>
</li>
<li><a href="#">Third Team</a></li>
</ul>
</li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li class="sectionparent"><a href="#" class="sectionparent">Services</a>
<ul>
<li><a href="#">First Service</a></li>
<li><a href="#">Second Service</a></li>
<li><a href="#">Third Service</a></li>
<li><a href="#">Fourth Service</a></li>
</ul>
</li>
<li class="sectionparent"><a href="#" class="sectionparent">Contact Us</a>
<ul>
<li><a href="#">First Location</a></li>
<li><a href="#">Second Location</a></li>
<li><a href="#">Third Location</a></li>
<li><a href="#">Fourth Location</a></li>
</ul>
</li>
</ul>
</div>
Which looks like this displayed:
Solution:
So what I did was go out on the net and try to find something to fix this problem, and found this solution.
First of all, you will notice that the unordered list has an ID as well as the list item and anchor tag having a class where there are children. With that accomplished, now we just need two more things. Number one some CSS to make it look pretty and secondly a behavior file for IE.
CSS:
behavior: url(csshover.htc); /* For IE */
}
#nav ul, #nav ul ul {
margin: 0px;
padding: 0px;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #FD5095;
background: #FC1571;
font-size: 12px;
}
#nav ul li {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
position: relative;
list-style: none;
padding: 0px;
}
#nav ul li a {
display: block;
text-indent: 5px;
text-decoration: none;
color:#ffffff;
padding: 5px 0px 5px 0px;
border: 0px;
border-top: 1px solid #FD5095;
zborder-left: 18px solid #FD5095;
width: 150px;
}
#nav ul li a:hover {
zborder-left: 18px solid #FD5095;
background-color: #FD73AA;
}
#nav ul ul {
position: absolute;
display: none;
left: 150px;
top: 0px;
background:#FC1571;
}
#nav ul li ul li a {
padding: 5px 0px 5px 0px;
}
/* Sub Menu Styles */
#nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li li li:hover ul {
display: none; /* Hide sub-menus initially */
}
#nav ul li:hover ul, #nav ul li li:hover ul, #nav ul li li li:hover ul {
display: block;
}
#nav ul li a.sectionparent{
background: transparent url(navArrow.gif) right center no-repeat;
}
#nav ul li a.sectionparent:hover{
background: #FD73AA url(navArrow.gif) right center no-repeat;
}
#nav ul li a:hover{
color: #ffffff;
}
/* Fix IE. Hide from IE Mac */
* html #nav ul li {
float: left;
height: 1%;
}
* html #nav ul li a {
height: 1%;
}
/* End Fix */
Behavior File:
Click here to download the htc behavior file.
Final Result:
Click Here To See A Live Demo!
This has been very useful for me, I hope it helps you as well!
