Your Customers are Mobile, you will be too …


In this tutorial we will show you how to create a simple accordion menu with submenu’s that expand out smoothly as someone mouses over the top of them. The simple animation we will be using is CSS3 with no javascript however it is supported by all the major browsers except for IE. With IE the menu will still work with all the same functionality it just won’t slide out smoothly. If someone mouses over a sub menu it will just appear, other browsers however it will look great.

This menu is pretty much the same as the Simple CSS accordion menu I did last week but has been tweaked up to include this animation. When Completed the menu will look like this: Continue reading

In 2 of my previous articles I covered how to create a vertical accordion menu using only CSS. In this tutorial I will be showing how to turn that around and create a horizontal accordion menu. So if you are not yet familiar with the basics of the accordion menu check out the HTML and CSS for the vertical accordion menu which we will be converting in this tutorial at the above two links.

Continue reading

This is the second part of my tutorial on how to create a slide out accordion menu. In this section we will be covering how to do the CSS to make the Accordion Menu work. If you are not aware of how to do the HTML side of the menu please check out the previous tutorial before continuing with this tutorial. This tutorial is mostly basic CCS2 but with a little bit of CSS3 thrown in to make the menu items slide out smoothly without the use of Javascript.

We will create a vertical Accordion Menu in this tutorial and in the next article we will show you how to convert it to a horizontal menu using the same HTML code we used in the last article. Continue reading

In this tutorial we will be covered how to create an accordion menu that once we mouse over an item in the menu it will expand smoothly to show the content inside of it. We will be doing this using CSS3 with no Javascript. I will be splitting this article up into 2 parts, the HTML and the CSS.

For a simpler version of the CSS Accordion Menu please visit here.

Continue reading

As requested here is a simple tutorial on how to create a vertical menu that slides out when moused over. Unlike the standard CSS vertical menu that pops out instantly or simply changes color instantly this menu will slide out smoothly using a few of the CSS3 standards.

Before beginning this tutorial it would be a good idea to familiarise yourself with the basics of CSS menu’s. I have a tutorial up on this already Basic CSS Hover menu. Make sure you still have the code from this as we will apply this slide out effect to the previous menu for practice.

Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: