Mar 012014
A Simple Drop Down Menu

Now a days I have been experimenting with CSS3 features, with some advanced CSS3 selectors we can easily Create a Drop Down Menu with pure CSS without using any fancy background images and JavaScript.

In this tutorial I will explain step by step procedure to create a simple drop down menu  with pure CSS.

Here is the Simple Drop Down Demo.

A Simple Drop Down Menu

A Simple Drop Down Menu

HTML Drop Down Menu Structure:

First we will create HTML structure


The HTML structure as follows

 I created two sub Menus for Articles and Archives, these sub menus can be shown once the parent menu liks is activated by HOVER.

And under Articles>Web Design I have sub-sub-menu (HTML and CSS) this links are shown horizontally from the first drop down as shown in Drop Down Menu.

CSS Code For Drop Down Menu:

Now we will write the CSS for the HTML code.


First we will hide the first set of sub links Articles>Web Design,Fun,Freebies and Archives>January,February using “display:none”  attribute. and to make them appear we have to change the “display”  attribute to “block” on HOVER of LI.

The child selector  > make sure only the child UL of LI are visible rather than all other UL elements or other sub menus.

Here is the Demo

Drop Down Menu Elements

Drop Down Menu Elements

And in next step few lines of CSS code to make it look like Menu


First we will remove bullets for list elements by adding “list-style:none” to “nav ul” element. And “position:relative”  attribute will allows us to position sub menu elements according to the Main Menu. “display:inline-table” attribute allows us to display main navigation elements to display as an inline-table.

I have added padding to anchor elements to separate links and I removed decoration (underline for anchor elements) with  “text-decoration:none” attribute.

To make it look like Menu side by side I added “float:left” attribute to LI elements.(Main Navigation Bar)

For Drop Down elements I added “float:none” attribute to “nav ul ul li” and also “position:relative”.

Here is the Demo.

Drop Down Menu Sample

Drop Down Menu Sample

Now it has a look of Drop Down Menu But as you move from one link to other links the elements are dancing from right to left and also secondary sub menu elements are directly appearing below the LI elements. To fix this we will add few lines of CSS code


For first  sub-menu elements I have added “position:absolute” and “top:100%”. So the drop down elements will appear directly below to the relative parent LI.

And For Secondary sub-sub-menu  I have added “position:absolute” attribute and “left:100%”. So the drop down elements will appear exactly right side of the relative parent LI element.

Here is the Demo.

Drop Down Menu Sample

Drop Down Menu Sample

The logic part is completed now we will apply some styles and colors to Make it stylish Drop Down Menu as shown in the first Demo.

I have used few CSS3 features like gradient etc. The code is simple and easy to understand, added color to main navigation menu and then on HOVER changed the colors. Here is the code.


I tested it in almost all modern web browsers working fine.If you face any issues let me know.

Here is the Final Demo

Demo For Drop Down Menu

I hope you enjoyed this article If so share with your friends and also subscribe to my blog and connect me at social networks.

Oct 062013
CSS Animation

CSS3 is great way to Create Animations, we can replace flash Animations,Animated images and JavaScript with CSS3 Animation properties.

In this CSS3 Animation Tutorial I will explain how to create Walking Man Animation Effect Using CSS3 alone as shown below.

CSS3 Animation

CSS3 Animation Tutorial


At the end of this post you will understand following CSS3 Animation Properties.

  • CSS3 KeyFrame Animation :        property which allows us to create animations.
  • CSS3 Transform :                              property which allows us to rotate,scale,skew,move elements.
  • CSS3 Transform Origin :                property which sets the origin of transformations

First we will create static man here is the sample HTML code


We divided man into two parts

  • Man Body which contains Head , chest and Hands.
  • Man Legs

Now we will apply CSS


The CSS code is straight forward except transform property(For Middle Part)

  • Skew property turns element at an given angle,depending upon parameters X or Y axis


In our example I used skewY which turns element vertically(Y-axis) -30 deg.

  • And scale property increased or decreases the element size, depending on the parameters given for the width (X-axis) and the height (Y-axis)

The above code creates sample body parts as shown below

CSS3 Animation

CSS3 Animation Tutorial


Now we have to align all this body parts to create man

Apply the following CSS Code.


This will create the static Man as shown below.

CSS Animation

CSS3 Animation Tutorial

Now we apply CSS3 KeyFrame rule  property to move this man.

What is CSS3 KeyFrame rule?

This property allows us to Create Animations Using CSS3. Keyframe property supports all major browsers (IE 10+) and for safari chrome we have to prefix corresponding browser engine

To create Animations follow below two steps

  • First Define CSS styles inside the @keyframetag
  • Now apply the rule to the element using animation property.

Observe the below sample CSS3 KeyFrame Animation Example which changes the div color to red to yellow for every 5 sec


We defined a @keyframe with name “myfirst”  We are changing from red to yellow.And applying the animation property on div with duration. You must specify the duration otherwise animation wont effect because default value is ‘0’

We can use keywords like “from” and “to” for changing styles or we can specify change in percent 0% means “first”  and 100% means “to”

0% is the beginning of the animation and 100% is when the animation is complete. Visit W3schools for more details.

Now come to our CSS3 Animation Demo

I divided animations into two parts

  • Moving hands and Legs
  • Moving Entire Body

For Moving Hands Apply the Following CSS


Right hand and left leg should sink with each other so applied same CSS3 Animation Effect for both elements and vice versa.

For moving hands I am using CSS3 transform rotate property from 30 degrees to -30 degree.

And I applied CSS3 transform-origin property as 0%(x-axis) 0%(Y-axis) which specify that with respect to element starting position we should apply the transformation.

i.e., we should rotate leg or hand at angle of 30 deg with respect element starting position.(Remove this property in demo example and check the animation you will understand in a better way).

And infinite means continuously we should apply the animation.

Here is the CSS3 Animation.

Animation Using CSS3

Animation Using CSS3

Only Legs and Hands are moving rite. Now we should move entire body for that purpose I applied following animation to manBody


The Logic straight forward simply we should apply the margin-left style  30px to 600px for every 9 sec.

Here is the Final Demo for Walking Man Effect Using CSS3 Animation.

NOTE: The above CSS is for Chrome and Safari which uses Webkit engine For Opera and IE10 No need to add any prefix and For mozilla add Moz prefix.

The Demo works fine with Chrome Safari Mozilla IE10 I have not tested with Opera I hope it will work.

Also Read: Google Hangout Effects using HTML5 Canvas

I hope you’ve enjoyed this CSS3 Animation Tutorial and that it gives you more ideas on CSS3 Animation effects.If so share this post with your friends and also join our mailing list I will be sharing my learnings and experiments with HTML5 and CSS3

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List. Read Popular tutorial on HTML5

Sep 242013

Today I will explain How to create a Simple Collapsing  Header Using CSS with an Example.

Here is the demo  Collapsing Header CSS

Now a days most of the webpages are contains Header and  Banner.

So First We will divide page into three parts like Header,Banner and Content.

Here is the sample HTML




You might be thinking what is this header tag, The header tag is new in HTML5. It supports almost all browsers. Here is the quick round of introduction to header Tag.

  • The <header> tag represents a header for a document or section
  • The <header> element should be used as a container for introductory content or set of navigational links.
  • You can have multiple <header> elements in one document.

The following CSS code will apply to Header Element


Height I given as 100px and positions as fixed to prevent the scrolling.The important thing here is Z-Index of header it should have higher index

  • Height I given as 100px
  • Positions as fixed to prevent the scrolling.
  • The important thing here is Z-Index of header should have higher index.this will ensure the rest of the page that does flows underneath  the header. So I gave some maximum value as 10.

And Next thing is Banner

  • This needs scrolling effect.
  • As I given header height as 100px. It should be fixed relative to header height so I given position as fixed and top 100px.
  • This will ensure banner content to sit directly underneath the header.

And Finally Content

  • We given header as 100px and Banner as 300px so relatively content should start from 400 px from top
  • So I gave position as relative and top as 400px.

Here is the Finale Demo Simple Collapsing Header using CSS

I prefer you to read this awesome book on CSS  CSS3: The Missing Manual

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me.

And Finally Don’t Forgot to Join Our Reader List.


Sep 202012
Today I will explain how to create a slide panel jquery effect with an example. Jquery provides various sliding methods such as
  • slideDown()
  • slideUp()
  • slideToggle()

I used slideToggle method to create  jquery slide panel effect.

slideToggle Method:

First we will understand what is this slideToggle Method.

  • As per the name of this method it changes between the slideDown and slideUp methods
  • If the element have been slideDown it changes it will Slide them Up and vice versa.

See the  slideToggle example


I created one div with id ‘slide panel jquery‘.
You can add your own content in this slide panel jquery div.

And for sliding button I created one paragraph with class ‘jquery slide‘.

And I added some CSS stuff as shown below.


And finally to create slide panel jquery simply add below jquery code


The syntax of slideToggle is


It will take two parameters Speed and Callback both are optional

  • Speed parameter can be: “slow”, “fast”, milliseconds.
  • Callback parameter is a function that will execute after the sliding completes.

I hope you understand the slide panel jquery example  tutorial

Here is the  Jquery Slide Panel Demo .

If You have any doubts feel free to contact me.

Thanks for Reading my Post. Please Take a look around My blog,Keep up to date with my Posts..

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook to get in touch me

Optimization WordPress Plugins & Solutions by W3 EDGE