I want to show how a vertical sliding menu can take on some of the features WordPress has implemented but also keep it simple to explain. I did not want to use any images to style the menu and keep everything as clean as possible. What I ended up with was 50% css, 25% jquery and 25% html. I used a few advanced CSS selectors and attributes (like border radius) to refine the effect.

Take a look at the final product here and read on for the explanation. Like always I have put the CSS and jquery in the same file to make it easy for you to inspect and download.

Lets start out with the base HTML. We start with a simple list

<div id="menu">
 <ul class="navmenu">
   <li><div class="menutop"><a href="#">Posts</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Tags</a></li>
     </ul>
   </li>
   <li><div class="menutop"><a href="#">Pages</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Add New</a></li>
       <li><a href="#">Edit</a></li>
     </ul>
   </li>
   <li><div class="menutop menusingle"><a href="#">Comments</a></div></li>
   <li><div class="menutop"><a href="#">Users</a><div class="toggle">+</div></div>
     <ul class="submenu">
       <li><a href="#">Manage</a></li>
       <li><a href="#">Add New</a></li>
       <li><a href="#">Profile</a></li>
     </ul>
   </li>
 </ul>
 </div>

I start by wrapping the whole thing in a div with a class of ‘menu’. Then everything else is nested unordered lists. Let me go over the rest of the class names.

navmenu

This is the class for the top most unordered list.

menutop

This is given a div within the line items that will be displayed as visual headers for each section. Wrapping your links inside of a div is only necessary for the heading line items.

menusingle

This is a special class applied to the heading line items that will not have a nested list.

toggle

This class is applied to a div tag which is inside the menutop div. This allows you to link the header title to a page while the toggle div is clicked to expand the list.

submenu

This is applied to the ‘ul’ tag of the nested lists.

What really makes the list look nice is the CSS.

 /*Toggle Area*/
 #menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
 #menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}

 /*Menu Setup*/
 #menu ul{padding:0; margin:0; width:150px;}
 #menu ul ul{border:1px solid #CCC;}
 #menu ul.navmenu li {margin:0; list-style:none;}
 /*Links*/
 #menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
 #menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
 /*Heading Outer div*/
 #menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
 /*Header Links*/
 #menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
 /*Header Link Hover*/
 #menu ul.navmenu .menutop a:hover{color:#333;}
 /*Removes white border for the first header*/
 #menu ul.navmenu li:first-child .menutop a {border-width:0px;}

 /*Single Menu Width Fix*/
 #menu ul.navmenu .menusingle a{width:140px;}

 /*Border Radius and Special Border Width*/
 #menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
 #menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}

Lets break it down. There is a lot here so I am only going to hit on each area.

Toggle Area

This sets up the styling for the area with the “+” and “-”. Because this is floated to the right of the heading div it needs a width and it will be used as a click-able area so I added the pointer when you roll over it. The line that uses li:first-child only selects the first line item within the ul.navmneu selection. That this way I can remove the white top border for the very first header

Menu Setup

This is the basic stuff to reset the margin, padding and to set the list style to none. I also add a border around the nested lists so that they create some separation when opened.

Links

Nothing to special here. I make sure to apply all the padding that I want for each line to the link tag. That way when I apply a hover style I can change the background color and the whole line will change.

Heading Outer Div

In order to get the appropriate border around the menu I decided to let each heading area have a border and then the nested list get their own border. This area not only applies the border to just the sides of the heading div but also sets it’s width and overflow. The overflow is important because the items within the div will be floated so the height will not be calculated correctly without the overflow setting.

Heading Links

This area sets up the links within the heading section. The width is set because the item is floated. Remember to add in your padding and border widths when figuring your widths.

Single Menu

I wanted to show the flexibility of coding for different situations. I made sure to take into account if a menu heading will not have any sub links. This sets the width correctly thinking that the toggle area will be removed.

Border Widths and Radius

This area has a lot of extra code for the rounded borders that look nice in Firefox and Webkit. However it also creates the top and bottom border that completes the border around the whole menu. I am using :first-child and :last-child to select the top and bottom header items. As a special note none of the border radius styles will work in IE, which is no big deal. However the :last-child also is not followed by IE but I have a fix for that in the java code.

I tried to create something that was usable out of the box but still very simple. If you are having trouble understanding the CSS I recommend getting Firebug for Firefox and using that to see what CSS is effecting what area.

For the javascript I am using the Jquery library and it looks like this.

if ($.browser.msie){
   $('#menu ul.navmenu li:last-child .menutop').css('border-width','0 1px 1px;')
 }

 $('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();    

 $('.toggle') .click(function(){
   if ($(this) .hasClass('toggle-open')) {
     $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
     $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
   }else{
     $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
     $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
 }
 })

This all within the normal doc.ready function that starts up the Jquery code. I first start out with a simple fix for IE not following the :last-child selector. I thought if IE does not support it I bet Jquery still does and this works. I check to see if the browser is IE and then apply the style as an inline element.

Before proceeding I need to explain a little about how the menu is going to work. Basically the java code will check for any toggle divs with the class of “toggle-open” and then close all the menus where the open class is not found. This is also how the java code will know if a menu is open or closed and how you can style items depending on if they are open or not.

$('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();

This line looks for all the items with the class “toggle” and then looks to see if that item has “toggle-open” if not it finds the previous line item and then the next ul tag and hides it. We could have just hand coded in to hide all the sub menus before hand however this will allow those people without java enable to still view the contents of the menu. Also this allows you to specify if a menu is going to be open or not before the java gets to it.

The next java line is a click function that makes the sub menus slide open and closed. It starts with an if statement that looks to see if the toggle element has the class “toggle-open”, if not then it knows the menu is closed.

$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);

The next line is used if the “toggle-open” class if found and the menu should be closed. “This” refers to the clicked item. So it removes the open class and adds the “toggle-closed” class. It then empties the text held within the toggle div and adds a plus sign. Then the parent line item is found and the next ul tag after that. Finally it slides up the sub menu.

The next line that adds the open or closed class to the menutop div is just for styling and I do not use it here. This would allow you to style the whole heading area for each section depending of if they are open or closed.

After the else statement the code is just the opposite. The only special thing is instead of adding a plus sign I add an “ndash”. This looks better than the minus sign but you can change this to add whatever you want or not add anything if you are using background images.

That is it. It seems like a lot of code for something so small but having a menu that is easy to use and easy on the eyes can go a long way. Please leave any questions or comments down below and thanks for reading.

Check out the final product in the demo.

In the next installment I will talk about how to set cookies in order to remember what menus are open between page views and also and easy way to create active styling for the current page.

I recently was doing some upgrades on a site that was built by a previous company. The site in question was not built with standards in mind and displays in quirks mode. The site looks fine in most browsers and although not the best idea, I have been making updates to work in quirks mode. As you might have guessed I wanted to incorporate the Jquery library, Thickbox for image viewing. The only problem is that when you view an image while scrolled down on a page the Thickbox image shows at the top of the page. You have to scroll up in order to see the image. This only happens in IE and only when viewing a page in quirks mode.

I took a little time to figure out what exactly the problem was. It turns out that if you specify a top margin while in IE and quirks mode the browser interprets that margin from the top of the page and not the top of the display window. So if you specify a top margin of 100px the window will be placed 100px from the literal top of the page and not the top of where you have scrolled to. To fix this we just add a few lines into the Thickbox code to check for IE and quirks mode. They are as follows.

if (jQuery.browser.msie && document.compatMode=="BackCompat"){ }
 else{
 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
 }

I added this in the function tb_position() around line 282. You should see the $(‘#TB_window’) line. This is what adds the top margin to the box. I have added a simple if statement that checks to see if the browser is Microsoft IE and if the document is in BackCompat (Quirks) mode. If these are true then I just have a blank statement but you could add something if you need. The else statement just has the line which is already in the Thickbox code. That is all you need to do. Compress your code if you wish, I used javascriptcompressor.com.

This is my whole tb_position function.

function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
 if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
 if (jQuery.browser.msie && document.compatMode=="BackCompat"){ }
 else{
 $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
 }
 }
}

After taking a look at the Thickbox web page I noticed that it is not being maintained and I am sorry to hear that. So add these few lines of code if you already implement it and need quirks mode compatibility.

When I first started to design this site I did not pay much attention to standards or validation. I fired up my php / html editor and Firefox then got to work. When I got the basic template squared away I decided to check out what Internet Explorer 8 had done to my design. I was naive to think that Microsoft had retooled IE8 into a smart self helping browser. All of my floats were the wrong width, the text was much larger basically the whole layout was broken. I noticed that IE was rendering in the dreaded quirks mode. This started several rounds of Googling to find out if I was using the right DocType or maybe I was missing a tag or it could be any number of other items IE thought I needed.

Turns out that with IE8 came a brand new compatibility tag that would force the browser to use a specified rendering mode.

<meta content="IE=8(Insert browser mode here)" http-equiv="X-UA-Compatible"/>

This will force IE8 to specifically use the friendly and more standards compliant IE8 rendering mode. The fix works but this only targets IE8, all the people still using IE7 (upgrade please) will get the broken quirks mode. You may ask you self “Change the above code to IE=7 and all is good”. This will force IE8 to use the rendering engine of IE7 however IE7 will still do its own thing.

This is where the “House” epiphany moment happened. I found a web site that mentioned something about having a commented line above the DocType would make Internet Explorer do weird things. I took a look at my code and I had a commented line

<!-- Insert Header File -->
<?php get_header(); ?>

above my php line of code that inserted the header. I removed the commented line and all is well.

<?php get_header(); ?>

I do not even need the special IE8 rendering mode meta tag anymore. I could not believe that something so ridiculous would keep IE from rendering things in a standards mode.

A trend that has becoming more popular is having a floating feedback button on your home page so you can take advantage of your visitors opinion. The button can link to a form where the user can express their thoughts about the site or a page that allows them to vote on what features they would like to see on the site. You can mimic the feedback button for your own site with a some basic html and css.

Sneak a peek at the final product. (I hope you like the red, white and blue.)

After completing the example page I was surprise how easy this is to do. I will start out with a simple page that has a container which is centered on the page. Inside that I have a header, navigation area, content area and a footer.

<div id="container">
 <div id="header"><h2>Header Here</h2></div>
 <div id="nav">Simple Nav</div>
 <div id="content">
    <h3>Content</h3>
    <p>Words and paragraphs go here</p>
 </div>
 <div id="footer"><h4>Footer</h4></div>
</div>

Nothing crazy here just some simple divs and the following CSS. I have added some lorem ispum to the content area in my example. I do not show it in the code to save space.

 body{font:.8em/1.6 Arial, Helvetica, sans-serif ; background:#CCC;}
 img{border:none;}
 #container{width:800px; margin:0 auto; border:1px solid #666666;}
 #header,#content,#footer{margin:0; padding:20px;}
 #header{background:red;}
 #nav{background:#333333; color:white; padding:10px;}
 #content{background:white;}
 #footer{background:blue;}

Again some simple background colors so we can tell where each section is being displayed. The above makes something that looks like this.

The feedback button has text that runs vertically and I thought it would be easy to do with CSS or Javascript. However after some looking around I found a few complicated Javascript solutions that only work with specific fonts and a CSS solution that only works in IE. For ease of implementation  I find that you get a much better result if you create an image file for the text. I choose to create a simple PNG file with white letters and a slight drop shadow.

Here I show the feedback letters on different backgrounds for illustration purposes. I will use a png file where the background is transparent. This will allow for the maximum flexability. Now with the image made we can create the html and CSS needed. First lets create a div for the feedback image to be displayed in.

<div id="feedback"><a href"#"><img src="images/feedback.png" /></a></div>

I have made a div with an id of “feedback” and inside of that a hyperlink anchor tag and finally inside of that the feedback text image. This div can be placed any where on your page however I suggest that it goes toward the bottom. This will allow the more important things on your page to load first. Now for the CSS that will position this div in the correct spot.

#feedback a{ display:block; position:fixed; top:200px; right:-1px; background:green; padding:7px 5px;
 border:1px solid #030;
 border-left-color:#060;
 border-top-color:#090;
 }
 #feedback a:hover{background:#030;border:1px solid #030;}

I started off with selecting the hyperlink anchor tag with in the div “feedback”.

display:block

Because the anchor tag is not a block level item we need to tell it to display as one. This will allow the positioning to work.

position:fixed

A fixed position will plant the feedback button in one location relative to the browser window.

top:200px; right:-1px;

Top places the feedback button exactly 200 pixels from the top of the window and right places button one pixel to the right off the window. This is done so that when a one pixel border is applied it doesn’t show on the right side.

background:green;

This creates a green background for the feedback button. You can choose any color you like.

padding:7px 5px;

This creates a little padding around the image. This may or may not be necessary depending on your image.

border:1px solid #030;

Finally I created a dark green border around the feedback image. I have added other border colors to create a more three dimensional look.

The next selector uses the CSS pseudo hover class to create a rollover effect. The class changes the background to a darker green and applies the same color for the border.

I want to add that I probably didn’t need to have hyperlink anchor tag inside of a div tag. I could have selected the anchor by placing a class on it. I feel like the code is easier to read and skim when you have divs that outline what is going on. It is a matter of personal choice. It will work either way with a little CSS tweaking.

That is all there is to it. Let me know if you have any other web elements you would like to see explained or if you have any questions.

Feedback button example

This idea of collapsing tables came to me while trying to retrofit a Lotus Domino web application with better usability. The main principal is to use Jquery to hide part of the table when a specific cell or row is clicked.

Peek at the final product.

There are several really great Jquery html integration tutorials on the web. In fact this is a really great one. The previously linked page details how to setup Jquery to easily create zebra rows, row hover effect and row filtering. I will be showing you something a little different but equally easy to setup.

I will be setting up a table so that when you click on the head row the body will collapse or hide. This sounds pretty easy if you have a little Jquery knowledge but I am going to show you a few things that make the effect easy to reproduce when you do not know how many tables you will end up with. The main problem that I was having with the Lotus web application was that the tables was being created dynamically. Some times there might be 3 tables and sometimes there might be 10. Also I had nested tables which complicates things a little. I will explain more as we get into it. So lets start.

First we are going to need a table. I am going to assume you know how to create a table in html. There are a few important parts. The table needs a head section and a body section.

<table class="StateTable" rules="all" cellpadding="0" cellspacing="0">
   <thead>     <!--You need to have a table head section-->
      <tr class="statetablerow">
         <th>Missouri</th>     <!--Use "th" tags for your table heading cells-->
         <th>Type</th>
         <th>Users</th>
      </tr>
   </thead>     <!--Close the table head section-->
   <tbody>     <!--Open the table body section-->
      <tr>
         <td></td>     <!--Use normal "td" tags for the body cells-->
         <td>Admin</td>
         <td>User Name #1</td>
      </tr>
      <tr>
         <td></td>
         <td>Reader</td>
         <td>User Name #2</td>
      </tr>
      <tr>
         <td></td>
         <td>Reader</td>
         <td>User Name #3</td>
      </tr>
   </tbody>
</table>

We are going to nest a new table inside the last row of the first table. We need to create a new row and a single cell that spans all the columns of the table. With a nested table the code should look like this.

<table class="StateTable" rules="all" cellpadding="0" cellspacing="0">
   <thead>
      <tr class="statetablerow">
         <th>Missouri</th>
         <th>Type</th>
         <th>Users</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td>Admin</td>
         <td>User Name #1</td>
      </tr>
      <tr>
         <td></td>
         <td>Reader</td>
         <td>User Name #2</td>
      </tr>
      <tr>
         <td></td>
         <td>Reader</td>
         <td>User Name #3</td>
      </tr>
      <tr colspan="3">     <!--Added row for the nested table-->
         <td>
            <table class="CityTable" rules="all" cellpadding="0" cellspacing="0">     <!--Start of the nested table-->
               <thead>
                  <tr>
                     <th>St. Louis</th>
                     <th>Type</th>
                     <th>Users</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td></td>
                     <td>Admin</td>
                     <td>User Name #1</td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>Reader</td>
                     <td>User Name #2</td>
                  </tr>
                  <tr>
                     <td></td>
                     <td>Reader</td>
                     <td>User Name #3</td>
                 </tr>
              </tbody>
           </table>
        </td>
     </tr>
   </tbody>
</table>

Ok now for the fun stuff. With the correct ground work setup we can now implement our Jquery JavaScript code. The first thing to do is link the Jquery library. You can do this by linking directly from Googles code server, from Jquery or download and host your own copy. I chose to link from Google. This code goes in the head section of your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

You may have noticed that both of my tables have classes applied to them. This is so we can determine if the user clicked on the outer or inner table. If you have multiple inner tables they would have the same class. We now have to create the javascript that Jquery will use. I will start with the inner city table.

$('table.CityTable th') .click(
	function() {
		$(this) .parents('table.CityTable') .children('tbody') .toggle();
	}
)

That is it, not much to it. This needs to go into a Document.ready function so it will be loaded when the page is finished loaded. See Jquery documentation if you do not know what I am talking about. To help you understand I will go over this line by line.

$(‘table.CityTable th’) .click(

This line starts the Jquery function. It tells Jquery to find the css element “table.CityTable th” or a header cell inside a table that has the class of CityTable. Then because elements in one line are executed right after each other the “.click” tells Jquery to add a click event to the previous css element.

function() {

This line opens the function that will happen when the click event is triggered.

$(this) .parents(‘table.CityTable’) .children(‘tbody’) .toggle();

This is where the magic happens. It is a long one so I will try and explain each part. When the click event goes off it will trigger this line. Start with a Jquery function as before but instead of putting the css element we want to use we put the text “this“. “This” refers to the element being used in the triggering function, which is “table.CityTable th“.

Then we apply the selector “.parents()” which tells Jquery to look for the previous element that is “table.CityTable“. Effectively we are now selecting the css element “table.CityTable” where the click happened. So if you have more than one table with this element you will only select the table were the user clicked. However our main objective is to had the body of the table when the user clicks on the header.

With the table now selected we need to continue and select just the body. This happens with the “.children()” selector. It tells Jquery to look for the next “tbody” tag within the previous element. Now we have effectively selected the css element “table.CityTable tbody” within the table where the click happened.

Finally with the right element selected we can hide it. Jquery has a simple function for this called “.toggle()“. If no properties are passed to this function it just hides the selected element by applying a style of display:none.

} )

This is what’s left. It closes the inner function and the click event.

Now the outer table has very similar code however because you select elements via CSS it can be tricky to pick the correct selector. If you use “table.StateTable th” you end up selecting not only the row you intended but also the other “th” cells in the nested table. That is because the before mentioned selector picks any and all “th” tags within the “StateTable” class. We can get around this by adding a class to the header row of the outer tables header row. This will keep our selector with the row that has the “.statetablerow” class.

$('table.StateTable tr.statetablerow th') .click(
	function() {
		$(this) .parents('table.StateTable') .children('tbody') .toggle();
	}
)

This is extremely similar to the inner table code. The best part is because we used the parents and children selectors we avoid having to create code for each table we want to have the effect. Also it allows you to use the same code over multiple pages or for any number of tables on the same page. Add some css to make things look a little nicer and you are all set.

Here is an example of the effect. I have listed the css and javascript in the document. Use firebug or your favorite code inspector.

Accordion Table Example

After doing some redesigning on this site I noticed that my NextGen gallery effects (ie. thickbox, lightbox) stopped working. When you clicked on an image it would link you directly to the jpeg image. I was getting very frustrated but after some research it turns out I was missing a very important line of code in my footer. I needed to add the php line “wp_footer();” to my footer file.

From WordPress Theme Development Page:

Goes in the “footer” of a theme; footer.php template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.

Usage: <?php do_action('wp_footer'); ?>

-or- <?php wp_footer(); ?>

This creates a space for wordpress to add code into your footer. NextGen gallery adds the thickbox javascript links in the footer so they are called at the end of a page load. If you are having the same problem try added the footer code to your theme.