After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality.  Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.

step one

Create a PSD of the menu as details in the PSDTUTS article linked above.

step two

Cut out the images required for the menu design and save them to an images folder at the root of your site.  The required images are as follows:

• A one pixel wide image of the background of the menu. (nav-bg.gif)
• A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
• An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)

step three

Build the HTML structure:

As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".

HTML wise that is it really.  Just drop this in to the body of the site.

step four

Now we need to style the menu using the images we previously cut out as detailed below:

The code above sets the default font and font size for the body of the document.  You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.

The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.

Next we need to remove the default padding/margin and bullets applied to unordered lists.

Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side.  Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).

Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other.  In this example the width is fixed to 80px but this is very much up to you and your design.   A line-height si also set to equal the applied height forcing the text to vertically align to the middle.

Now we need to style the "a" tag itself.  Again it has been given the same width and height as the li tag and floated left.  This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6.  Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.

Finally we need to add the link styling and active/hover states.  The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.

Now all you need to do is check it out in your browser.  Enjoy..

demo

Check out the CSS Vista Menu Demo for yourself.

download

Download the CSS Vista Menu.

Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.

Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…

code

HTML

The HTML as seen below is pretty simplistic.  Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.

CSS

The CSS details simple styling for the engine.  Points to note are as follows:

• sceneContainer has a fixed width/height and an overflow of hidden.  This allows us to mask the images as they move back and forth in perspective.
• Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer).  This allows for easy resizing and positioning of the container within the sceneContainer.
• Finally we have styles for each individual image within the containers.  This allows us to position all the images within the scene3d container.

JavaScript

Lastly we have the JavaScript.  This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie.  To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.

Have a play about with the variables to get to grips with how they control the effect and more over, have fun!

demo

Have a look at the Simple 3D JavaScript Engine Demo.

download

Feel free to download the Simple 3D JavaScript Engine Code.

After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“

Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.

So here we go…

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside.  That is all that is required at this stage from an html perspective.  Obviously the number of images and the images themselves can be changed here.

css

The CSS is also very  simple setting the style attributes for the main container as well as the images width and height within each of their containing divs.  One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

JavaScript Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 3D Carousel.

notes

This is a very basic demo and as such should not be treated as a finished product.  I’m using this article as more of a tutorial to create clear stages between the version above and a far more advanced version that I will release in the not to distant future.

I’m still looking to further improve the smoothness of the carousel and new features such as automatic image reflection and arrows to manually rotate the carousel will be added in future versions.

mootools modules

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event

Window

• Window.DomReady

Now as I am working on a template builder myself I thought a good place to start would be by reviewing the YAML builder and to decipher the positives and negatives of the application. So here we go:

aesthetics

It has to be said the builder is very aesthetically pleasing with a simple yet satisfying design and very powerful interactive features allowing drag and drop components to help build the template as required.

level of detail

The level of detail at which you can manipulate your desired template is relatively high, however, if your looking to create a very complex template this builder is not for you. Allowing only 0, 2 or 3 column layouts can be quite restrictive although it does allow you to add “column sets” to each column to produce a more precise layout, however, this is not always practical.

The ability to add padded content boxes, content elements (such as h1, h2, p, line, ul) and column sets really enhances the template builders appeal and definitely offers novice template builders a firm foundation from which they can build.

The level at which column and site widths can be edited also works very nicely. The ability to set max and min widths, re-order columns and change the individual column widths add for a satisfying effect.

conclusion

It has to be said the YAML builder is well worth a look to see if it meets your needs. More complex layouts may be a bridge too far for this builder, but I believe with a little extra development this app could be formidable. It does have a very strong foundation, but I would like to see it support more columns and the integration of rows as well. Then there is always the prospect of equal height columns to take it in to the exceptional bracket.

A lot to think about when considering my own template builder, but I can definitely use this as a firm benchmark from which I can weigh my own efforts against.

update

I have just received an email from Dirk Jesse (YAML Builder Developer) and he added the following to my review with regards to the level of complexity:

"Check out the Subtemplates in the "Add Elements" section. These offer much higher flexibility (eg. columns and rows) and can be combined with the exisiting columns. You can also remove all columns and creatve your layout only with the subtemplates. They even can be nested. So, rather complex layouts are possible too."

Well I think that just about caps it off.  What an awesome app.  If anyone uses it let me know how you get on.

Anyway the code itself aims to fire a function when there has been no mouse movement for a predefined length of time and reset the count every time the mouse is moved.

code

The code is very simple, therefore, only the JavaScript is worth talking about for this example, so that is going to be the focus of this article.  Have a look for yourself below.

Right then here we go:

JavaScript

At the top of the code there is a variable called "idleTime", this variable sets the idle state time (in milliseconds) that the browser mouse be idble for, before firing the function.  Change this as you wish.

Next we have the "init" function which is called on page load by an event listener at the bottom of the sample code.  This itself sets a mouse move event listener (which resets the idle state when fired) on the document body and also calls the idle state function.

We then have an "onIdleFunction" which is where you put the code you wish to be fired when the page is idle.  In this example we’re just alerting out that the page has been idle.

Finally we have two functions, resetIdle and setIdle, which really do exactly what it says on the tin.  The first resets the idle state (on mouse movement) and the second sets the idle state.

Well that’s about it so have a look for yourself at the demo and code below.

demo

Feel free to view the Simple JavaScript Idle State using Prototype Demo.

download

Also please have a look at the Simple JavaScript Idle State using Prototype Code.

note

The Idle State at present only uses mouse movement for detect inactivity.  This will be problematic when considering devices that do not have mice (as it will not work), however, the code can be easily adapted to check for other forms of activity.

It is also worth while mentioning that the mouse move event is applied to the document body and therefore you must make sure that the height and width of the body and html are set to 100% for this to work, otherwise the event listener will not work.

Have a look for yourself at HTML/CSS Liquid Layout Templates and let me know what you think.

Due to the nature of embedded flash it does not seem possible to “mask” it using an overflow hidden on a containing DIV. This however is not the case.

By simply adding the following parameters a flash movie can be masked:

The wmode parameters bring the flash movie back into the flow of the document and therefore allow it to be treated as if it were for example an image.

The complete code I have used in the example is as follows:

code

css

The CSS as shown above is very simple and sets a width on a containing DIV to 30% of the page width as well as having an overflow set to hidden. This will simply demonstrate the effect clearly.

html

As can be seen above there isnothing special here. Simply a containing DIV with a flash movie embeded and of course the parameters set.

example

Please have a look at the Masking a Flash Movie in HTML using a DIV example.

download

Feel free to try it out yourself with the Masking a Flash Movie in HTML using a DIV download.

Now for this solution I decided to use mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.

code

The code is very simple and is as follows:

CSS

HTML

As shown the code is not overly complex. The HTML comprises a containing DIV (with an ID of sideBar), then within this we have a linked tab image (with an ID of sideBarTab) followed by the contents of the side bar contained in a DIV (with an ID of sideBarContents) and sub contained within another DIV (with an ID of sideBarContentsInner).

The sideBarContents DIV has an inline style applied setting the width to zero. This is to allow the JavaScript to resize the region using mootools (Some browsers are a bit buggy when trying to change styles that are set in an external stylesheet). This DIV is also set to have an overflow hidden producing the effect that the content is sliding in.

Points to note within the CSS include the width set on the sideBarContentsInner DIV. This width should be adjusted as required to meet your deign requirements (It is set to 200px for the purpose of the demonstration).

Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).

Finally you will need to include mootools.js and side-bar.js to the head of the document in the order shown for this to work. Have a play with the demo below and download the code.

demo

The sliding JavaScript side bar menu demo.

pitfalls

Currently with this version I believe there may be some CSS issues in Safari but as yet I haven’t had the time to fully test and fix potential bugs.

The next pitfall to note is the lack of degradability with JavaScript turned off, however, this will be fixed as stated below.

future

I am planning to develop a new version of the side bar that will degrade gracefully back into the structure of the site when JavaScript is turned off. This will provide a more accessible version.

Further improvements include adding a key press event to the tab allowing users without a mouse to produce the same effect (again important for accessibility).

Other considered enhancements include the introduction of multiple tabs. This would allow for greater “storage space”, whilst also providing flexibility and scalability.

download

Download the sliding JavaScript side bar menu.

The initial focus was on how to structure the form. Did I use DIVs or unordered lists or possibly definition lists? Well after much deliberating I came to the conclusion that definition lists were the way to go. They fit the bill and due their structure can be simply implemented to good effect.

Once that decision was made it was time to get stuck in.

code

The basic code structure is nice and simple.  Below you can see the definition list (dl) containing a term (dt) and a description (dd).  With in the term we store (on the most part - will explain later) the label for the form element with a relevant name.  Within the description we addd the form input.

The structure created by this approach is very clean and almost table esc.

The above code shows the bare bones, however, as the code below shows we can make things slightly more complex.

Multiple textboxes

Textboxes can be added over multiple lines, or if required on the same line as shown below.

Radio Button Lists

Radio buttons can be applied over multiple lines or across the same line as shown below.

Checkboxes

Checkboxes can also be added over multiple lines or on the same line as shown below.

CSS

The CSS is very simple and simply lays out the form but does not apply any sexy formating - I’m a developer not a designer

Firstly we have the basic form element styles:

These styles provide very basic formating for form elements and can be changed as required.

Next we have the list styles.  These are used to provide the form with its structure and positioning.

Finally we have some generic styles to apply width formating to form elements.

These classes areapplied to individual form elements to give consistent widths and structure cross browser.  Again these can be changed as required to meet the individual needs.

Thats about it.  Check out the demo below and download the files to include the code in your site.  The code does validate to XHTML 1.0 transitional, however, I have included a couple of workarounds (*cough* hacks) to the css to keep consistancy across browser. 

The code also meets the WAI priority two checkpoint and only fails on priority three as there is no placeholder text within the form elements themselves.

demo

Accessible HTML Forms using Definition Lists demo.

download

Accessible HTML Forms using Definition Lists download.

the code

The CSS for this is fairlty simple and is as follows:

As can be seen in the CSS above I am simply styling ordered list items and the a tags within in side them as I see fit.  The effect this generates can be seen below.

The HTML is as follows:

Again the HTML as shown above is very simple and simply structures nested ordered lists as required for the table of contents.

demo

This is the CSS Table of Contents using Ordered Lists demo.

extending the demo

I then thought of extending this slightly with the following demo to produce an actual document.  Notice in print preview mode each page is defined when an hr tag finishes using the page-break-after: always; CSS attribute.

Here it is the CSS Table of Contents within a document demo.

P.S. This is valid XHTML