CSS Horizontal Menu (3)

Again this menu uses a background 1px image with a slight gradient for affect. Whats slightly different this time is I have an extra image the floats under each menu item depending on the page you are on. This is just a small triangular image. Both images are attached below the code.

In the body tag of each page you have to include which page you are on. For example, on the hompeage it would be body class="Home", on the contact page body class="contact" and so on..

CSS
#menubar {width:750px;margin: auto;background:url(../images/menu_shade.jpg) repeat-x left top;}
ul#menu { color:fff; font-size:14px;margin: auto; overflow:hidden; list-style:none; font-family:Helvetica, Arial, sans-serif;}
ul#menu li { float:left;margin:0 4px; height:29px; padding:6px 5px 5px 5px; }

ul#menu li a:link,
ul#menu li a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
ul#menu li a:hover,
ul#menu li a:focus { text-decoration:none; color:#363636;}

body.Home ul#menu li.Home,
body.About ul#menu li.About,
body.Qualifications ul#menu li.Qualifications,
body.Testimonials ul#menu li.Testimonials,
body.Contact ul#menu li.Contact { background:url(../images/nav_cur_bg_red.jpg) no-repeat center bottom; }

body.Home ul#menu li.Home a,
body.About ul#menu li.About a,
body.Qualifications ul#menu li.Qualifications a,
body.Testimonials ul#menu li.Testimonials a,
body.Contact ul#menu li.Contact a { color:#fff; }

HTML:
<div id="menubar">
<ul id="menu">
<li class="Home"><a href="index.html">Home</a></li>
<li class="About"><a href="about.html">About Us</a></li>
<li class="Qualifications"><a href="qualifications.html">Qualifications</a></li>
<li class="Testimonials"><a href="testimonials.html">Testimonials</a></li>
<li class="Contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>

CSS Horizontal Menu (2)

Using the same color scheme as CSS Horizontal Menu (1), I have decided to make a couple of changes. The first menu only had an under line as a mouse over action, this time we change the background of the menu.
Also, I have made this menu rounded and with a blue border, the last one had straight line borders.

Instead of a 1 px background 2 tone image as a background set to run across the width of the page, I have made the background, complete with border, 1 long image, and set this length to the width allocated for it in the page.

Other than that you'll see the code is quite similar to the previous menu.

Here is the css:
/* Menu */
#menu {height:31px;background:url(../images/background_menu.jpg) no-repeat;
width:760px;clear: both;}
#menu ul {list-style:none;}
#menu li {height:31px;display:block;float:left;
background:url(../images/submenu_divider.jpg) no-repeat right top;z-index:20;}
#menu li a {
font-family:Geneva, Arial, Helvetica, sans-serif;color:#266181;text-decoration:none;
font-size:12px;font-weight:bold;padding:8px 30px 6px 30px;display:block;}
#menu li a:hover {border-top:1px solid #6591ac;
background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;
padding:7px 30px 6px 30px;}

HTML:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services/Fees</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS Horizontal Menu (1)

Whoa, I've been busy lately so this is my first post in 2 months. I'll put up a couple of horizontal menus I used recently on a few different websites.

This menu is css driven - by a unordered list (as most menus will be on this blog). I use images for background sometimes, but making sure that adding a new menu item at a later date is adding 1 line to the list, instead of having to create on/off images.

There are two images used for
a) the shaded background
b) the item divider,

Here is the css, html and the images are included too.

/** Horizontal Menu **/
#menu {display:block;width:975px;margin:auto; }
#menu ul {list-style:none;background:url(../images/background_menu.jpg) repeat-x;
height:35px;margin:0;padding:0 0 0 10px;font-size:15px;}
#menu ul li {margin-top:2px;float:left;padding:3px 15px 0 15px;background:url(../images/menu_divider.jpg) no-repeat right top;}
#menu ul li a{text-decoration:none;color:#171a29;}
#menu ul li a:hover{text-decoration:underline;}

HTML:
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Events</a></li>
<li><a href="">Advertising</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Directions</a></li>
</ul>
</div>

Images

CSS Hidden Div (4)

This post is a slight variation, but more of a compliment to CSS Hidden Div (3). I use the exact same js and expand/collapse images, but its a little less css. I've also included it in the little portlet I created last month. Code for that is contained in the Portlets in CSS (1) post.

As you can see its simply a list of contacts collapsed by default and you can expand or collapse as many as you like at a given time. You can get the images in the above posting.

Here is the html
<div class="contacts">
<div class="contacticon">
<img src="images/icon_expand.gif" id="toggle_icon1" name="toggle_icon1" width="11" height="11" border="0" onclick="toggleDisplay('contact1','toggle_icon1');">
</div>
<div class="contactname">Conor Cassidy</div>
<div id="contact1" class="contactinfo">
Web Designer<br />
(555) 555-1234<br />
<a href="mailto:conorcass@hotmail.com">conorcass@hotmail.com</a>
</div>
<br clear="all"/>
<div class="contacticon">
<img src="images/icon_expand.gif" id="toggle_icon2" name="toggle_icon2" width="11" height="11" border="0" onclick="toggleDisplay('contact2','toggle_icon2');">
</div>
<div class="contactname">John Doe</div>
<div id="contact2" class="contactinfo">
-- content --
</div>
<br clear="all"/>
etc
</div>
Here is the css:
.contacts {color:#000000;font-family:arial;font-size:12px;}
.contacticon {float:left;background-color: #ffffff;}
.contactname {float:left;width:200px;background-color: #ffffff;line-height:24px;
margin-top:-2px;}
.contactinfo {background-color: #ffffff;padding-left:21px;display:none;}
Here is the js:
function toggleDisplay(a,b) {
if (document.getElementById(a).style.display=='none' || document.getElementById(a).style.display=='' ) {
document.getElementById(a).style.display='block';
document.getElementById(b).src='images/icon_collapse.gif';
} else {
document.getElementById(a).style.display='none';
document.getElementById(b).src='images/icon_expand.gif';
}
}

CSS Hidden Div (3)

Fig 1:

Fig 2:
Here is an example of collapsing and hiding a div that I like to use a lot. It uses a few gifs that are seen across many sites and applications, and its a great effect that suits a variety of needs, such as FAQ's or instructions.
Like the example CSS Hidden Div (2), we begin with a default displayed div, with a hidden div below that. However, to create the above effect, everything is contained in an outer div that, when collapsed(again default) has a white background (invisible), but when expanded, it creates a nice effect.
Fig 1 is the what the user sees when the page is loaded, while fig 2 is what is shown when you click the plus sign to expand.
Using a simple onclick javascript method, I just pass in the parameters to change the icon from + to -, and to show the 2 divs - 1 as a background, and 1 as the content to reveal. At the bottom of this post I include the 3 gifs I use as the expand/collapse triggers.

Here is the html:
<div id="bkgd1" class="faqs">
<div class="faqicon"><img src="images/icon_expand.gif" id="toggle_icon1" name="toggle_icon1" width="11" height="11" border="0" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
<div class="faqcontent">
<div class="faqquestion">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</div>
<!-- COLLAPSABLE AREA DEFINED HERE WITH DIV TAG -->
<div id="faq1" class="faqanswer"> --Latin Text--
<div class="faqbottom"><img src="images/icon_collapse2.gif" onclick="toggleDisplay('faq1','bkgd1','toggle_icon1');" /></div>
</div>
</div>
<br clear="all" />
</div>
Here is the css:
.faqs {padding:10px;background-color:#ffffff;margin-bottom:3px;}
.faqicon {float:left;padding:3px 10px 0 0;}
.faqcontent {float:left;width:750px;}
.faqquestion {font-size:14px;color:#395f97; font-weight:bold;}
.faqanswer {display:none;padding-top: 10px;}
.faqbottom {float:right;padding-top:10px;}
Here is the js:
function toggleDisplay(a,b,c) {
if (document.getElementById(a).style.display=='none' || document.getElementById(a).style.display=='' ) {
document.getElementById(a).style.display='block';
document.getElementById(b).style.backgroundColor='#f5f5f5';
document.getElementById(c).src='images/icon_collapse.gif';
} else {
document.getElementById(a).style.display='none';
document.getElementById(b).style.backgroundColor='#ffffff';
document.getElementById(c).src='images/icon_expand.gif';
}
}

CSS Tables (3)

While trying to avoid using tables for layout, I do admit to cheating the odd time to get the job done, (I used to do it a lot more). So after using tables for so long, when I actually need a table for data purposes, I had forgotten about captions, grouping rows and columns, and defining header classes, rows etc. Here is a neat example using all of these attributes. Needless to say I didn't spend too much time on making it really fancy, but the different colors illustrate the features

1) Caption - obvious
2) Defining the col groups
I originally defined 2 colgroups, 1 for teams and 1 for content. In any colgroup, you can single out individual 'col's, that overrides the settings for the overall group. This part is bolded in the html sample below.
3) I included the thead reference to give the header colums the same color as the teams colgroup. If that was not included, the red and green colors would extend to the top.
4) For the border, I used the rules attribute. I set it to just show the border between the colgroups, you can see how changing this attribute, using all its values can effect the look and feel in the post CSS Tables (2)

Here is the html (I removed the data for space):
<table class="league" cellspacing="0" rules="groups">
<caption align="top">Premier League Table</caption>
<colgroup class="teams"/>
<colgroup span="5" class="content">
<col span="4"/>
<col class="totals"/>
</colgroup>
<thead class="header">
<tr>
<td> </td>
<td>P</td>
<td>W</td>
<td>D</td>
<td>L</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
---content---
</tr>
</tbody>
</table>

Here is the css:
.league caption {font-weight:bold;padding-bottom:5px;}
.league td {padding:4px 10px;}
.teams {background-color:#b3bed0;}
.content {background-color:#84d5ac;}
.totals {background-color:#ba0401;}
.header {text-align:center;background-color:#b3bed0;}
tbody {text-align:center;}

CSS Tables (2)

Here are a few alternate versions of the table in the posting CSS Tables (3). Simply by changing the rules attribute you can change which borders are displayed.

For example, rules="rows":

rules="cols":

rules="all":

rules="none":