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
<meta charset="utf-8" />
<title>Simple Collapsing Header using CSS</title>
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
height: 1500px; /* Demo purposes */
- 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
And Finally Don’t Forgot to Join Our Reader List.