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.

The Aperture | The Shutter |  The ISO (soon)

This guide is directed towards people who know very little about cameras. Maybe you own a small point and shoot but do not know what all the manual settings mean. Or you want to know what the numbers are that flash up right before you take a photograph. This is for you. I plan to talk a little about the aperture in this guide and will talk about the shutter speed and sensitivity in future guides. Expect this is be very basic and nothing ground breaking. I will try and keep everything in plain English and include a lot of pictures.

Camera Modes

There are three basic parts that are set or measured when you take a picture.

• The aperture or F-Stop
• The Shutter Speed
• The Sensitivity or ISO

Some or all of these settings can be determined for you. It all depends on which mode your camera is set in.

Full auto mode will help you pick out the best settings depending on the amount of light that is available. Aperture mode (depicted with an “A” or “Av”) lets you set the aperture size and then picks the best shutter speed. Shutter mode (depicted with an “S” or “Tv”) lets you set the shutter speed and then picks the best aperture. Your camera may also have a Priority Mode (depicted with a “P”). In this mode the camera will pick a combination of shutter speed and aperture size for you, however you are able to select other equal combinations depending on if you need more of one value.

The Aperture or F-Stop

Let’s break the different parts down by starting with the one that confuses the most people, the aperture. In a camera lens the aperture is the device that closes in order to block (or stop) the light from getting into the camera. The aperture does not block all of the light and in some cases does not block much light at all. Consider this when you are outside on a sunny day and there is a lot of light around. It may be too much light. Just like the pupils in your eyes get smaller when you are outside the aperture of the camera gets smaller to manage the amount of light. The aperture is the device or object inside the camera lens. The size of the hole left when the aperture is closed is called the F-Stop. F-Stops are funny things and just like with wire gauges the smaller the number, the larger the hole that is left when the aperture is closed (the more light that is let through) and vise-versa.

F-Stops can be expressed in several different ways: f/8, f-8, or 1:8. Also each step on the scale is equal to double or half the amount of light. Example, the opening of F/8 will let in double the amount of light than F/11 and F/4 will let in half the amount of light than F/2.8 (remembering that the smaller number means larger hole and more light). With this in mind you might hear someone saying that a specific camera is quicker or that a lens is quicker. What this normally means is that it has a lower minimum F-Stop value. Not all cameras can obtain every F-Stop value. Quicker just means that you can use a low F-Stop value and thus a higher Shutter Speed. (I will talk about this in the next guide)

You can imagine that if you are shooting photos in a setting with a small amount of light (indoors) you will require a smaller F-Stop number. When out side or while using a flash you will require a larger F-Stop number. The F-Stop can also have an effect on how much a camera or lens costs. It costs more to manufacture a lens that is efficient enough to carry the light clearly to the camera when the aperture is barely closed. This is especially true for zoom or telephoto lenses.

I want to talk quickly about lenses and how they relate to the F-Stop. Not all lenses in point and shoot cameras are equal even though they all fit into very small spaces. Most point and shoot cameras or cheaper removable lenses will have a variable F-Stop. This means that as you zoom the lens in and out the minimum F-Stop will change. As you zoom out the minimum F-stop will increase and as you zoom in the minimum F-Stop will decrease. You should be aware of this when in a setting that requires a low F-Stop number. Sometimes taking a few steps toward you subject can eliminate the need to zoom and giving you a lower F-Stop. Also when you are going to buy and camera you should take a look at the F-Stop. Typically getting a lens with a number around 2 or 2.8 is the best. This will allow you to take “faster” photographs in low light situations.

Please leave your questions or comments. There will be other guides to follow this one about the Shutter Speed and the Sensitivity.

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.

I was unable to get a Palm Pre on launch day for reasons that are out of my control. Apparently Sprint as a very strict upgrade policy with new phones of this caliber. Even a long time subscriber like myself was unable to sway them into upgrading me early. Needless to say I still got my hands on a Palm Pre today and took some photos of the unboxing. Please check out the gallery after the break .

12►