I think many of you have already noticed that the trend now includes more and more sticky design elements that remain visible as the user scrolls the page. In my opinion, this is very convenient, especially if it is site navigation. This is exactly the example we will do today. We will learn how to make an animated website header using JQuery and CSS3 with animation.

As usual, this turns out to be done in a minimum of lines of code and is very simple, and at the same time very effective. Well, now let's get started with the lesson.

But first I would like to say a huge thank you to http://www.webdesignerdepot.com and now let’s just get started.

Ι

HTML

The HTML code is very, very simple, we just need to set the tags for , and then write the site content between them:

Attached site header

Since this is the simplest example, here we just added text between the h1 tags, but you can also use images, or, for example, site navigation.

jQuery code

CSS is the most the best way implementing animations and transitions currently. So we will use a minimum of scripts, and only in order to define the triggering of the animation when scrolling the page.

When the page scroll position value is greater than 1, it means that the user has scrolled the page and you need to add a “sticky” class to the site header tag. This is how the site header is triggered and fixed.

And here is the code itself:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("sticky"); ) ));

It is important to note that use in in this example not a very good idea, because if the use of scripts is disabled in the browser, then the site header will simply be fixed and that’s it.

CSS

The CSS code will consist of 2 parts. The first code will be responsible for the standard site header, which is in the default position. The second code will be responsible for displaying the header when the user scrolls the page. Let's see what the default code looks like:

Header( position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans ", sans-serif; )

Now the most interesting point: When the user scrolls down the page, then the .sticky class will be applied, to which we can give the completely varied display that CSS is capable of. We will also set a fixed position so that our site header is always visible.

Using these CSS rules below, we want to reduce the area of ​​the header itself when scrolling, change the color and of course make the font smaller. Here is the code itself.

Often, seemingly simple layout tasks require a complex HTML markup structure and the use of CSS tricks. Centering elements or aligning content can be very tedious. One such task is aligning the elements at the top of the site so that the logo is on the left and the menu items are on the right. You can use float and position:absolute, and for vertical alignment you can add margin and padding to different elements. It seems to be nothing complicated. But if the site should be displayed correctly on mobile devices, many problems arise.

Below is a concise way to solve this problem.

The HTML markup is as simple as possible:

Super Bad

The height of the header is fixed, add text-align: justify, for child elements:

Header ( text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; )

Add display: inline-block for all elements nav so that you can arrange them one after another:

Header h1, header nav ( display: inline-block; )

To attribute text-align: justify worked the way we want, we need to use a little trick with pseudo-elements, which was found in the article Perfectly justified CSS grid technique using inline-block , by Jelmer de Maat:

Header::after ( content: ""; display: inline-block; width: 100%; )

The result was horizontal alignment, without using float And position:absolute. Now you need to align the elements vertically. Using vertical-align for elements nav there will be a dependence on the height of the parent block - the header. And this is not very correct. Examples of using vertical-align: top and vertical-align: middle on jsbin. Below is perhaps the most convenient way vertical alignment.

Let's use pseudo elements again. using an example from the article Centering in the Unknown, mentioned by Michał Czernow:

Header h1 ( height: 100%; ) header h1::before ( content: ""; display: inline-block; vertical-align: middle; height: 100%; )
The result is what you need:

There are two problems left to solve: correct display when there is a large amount of text in the header and adaptability. If the site title is too long, the layout will start to slide:

Using the pseudo-element trick on header:

CSS code

header ( text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; width: 100%; ) header > div, header nav, header div h1 ( display: inline-block; vertical-align: middle; ) header > div ( width: 50%; height: 100%; text-align: left; ) header > div: :before ( content: ""; display: inline-block; vertical-align: middle; height: 100%; )

Looks much better:

Now let's move on to adaptability. There are several ways to solve this problem; you can simply not set the height of the header, and all internal elements will be adaptive to the height. This will not require the second trick with pseudo-elements, live example on jsbin.

CSS code

header ( text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; width: 100%; ) header h1, header nav ( display: inline-block; vertical-align: middle; ) header h1 ( width: 50%; text-align: left; padding-top: 0.5em; ) header nav ( padding-top: 1em; )

If you need to set the height of the header, then you will have to use the second trick with pseudo-elements and add a media query for screens different sizes:

@media screen and (max-width: 820px)( header ( height: auto; ) header > div, header >

The result is adaptive and looks like this on mobile devices:

In the example, 820px is used for clarity; on a live site, the value should of course be different, in accordance with the requirements. For support Internet Explorer 8 it is necessary to use “:” instead of “::” for pseudo-elements.

Final CSS Code

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;) header ( text-align: justify ; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; display: inline-block; width: 100%; ) header > div, header > div::before, header nav, header > div h1 ( display: inline-block; vertical-align: middle; text-align: left; ) header > div ( height: 100%; ) header > div::before ( content : ""; height: 100%; ) header > div h1 ( font-size: 3em; font-style: italic; ) header nav a ( padding: 0 0.6em; white-space: nowrap; ) header nav a:last -child ( padding-right: 0; ) @media screen and (max-width: 720px)( header ( height: auto; ) header > div, header > div h1, header nav ( height: auto; width: auto; display : block; text-align: center; ) )

Result:

In the last article we did frame of our HTML template , which is ready for filling and registration. Today I'll tell you how to make a beautiful website header(top part) and a simple menu. Today we will also make some changes to the styles of other blocks.

So what do we have at this moment? Now we have these styles:

Html, body ( height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; ) #wrapper ( height :auto !important; height:100%; min-height:100%; ) #header ( height:100px; ) #container ( min-width:800px; ) #center ( margin:0px 200px 0px 200px; ) #left ( float:left; width:200px; ) #right ( float:right; width:200px; ) #footer ( height:100px; margin-top:-100px; ) .clear ( clear:both; ) #space ( height:100px ; )

And here is the code for the template itself:

First of all, let's make some changes to the style of the wrapper block:

#wrapper ( height:auto !important; height:100%; min-height:100%; width: 1024px; margin: 0 auto; text-align: left; )

I set a fixed width - the width of the block, 1024 pixels in size, aligned the block itself to the center, and the text in it to the left using text-align: left. We can align the block to the center using the margin style, setting the top and bottom margins to 0, and the width to auto. Unfortunately, this does not always work in Internet Explorer 6, so in the body I added text-align: center; and that's why I had to align the text in the wrapping block and footer to the left. I also specified margin:0 in the body, thereby setting the margins from the edges to 0 pixels. As a result, Body ended up with the following styles:

Html, body ( height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; margin: 0; text -align: center; )

I also made changes to the basement:

#footer ( width: 1024px; margin: 0 auto; text-align: left; height:100px; margin-top:-100px; background: #4a90d9; )

Everything here is similar to the wrapper block: set the width to 1024px, align the block in the center, and align the text to the left. I also added margin-top to the container: margin-top: 20px; and removed the minimum width, since we have a fixed enveloping width.

Well, we have prepared the template, it’s time to move on to the site header. The styles will be like this:

#header ( height:140px; background: #fff; padding-top: 40px; )

The block height is 140px, the background is white, and the margin from the top edge is 40 pixels. That's all the changes to the header styles.
What? This is all? And there's an entire article named after this?
Of course not. The site header will consist of other elements: a logo and a menu, which will be designed separately.

Let's register in HTML template code Inside the header block there is this line:
This is essentially a link to home page without text, but it is assigned the class class="logo". Now you need to style it in css styles.

Logo ( display:block; height: 104px; width: 390px; background: url("image/logo.png") no-repeat; )

I made the element block, gave it width and height, and also made a logo image as the background, which I put in the image directory. All template images will be located in this directory. The image size is 388*100 pixels, so why is the block size slightly different? I made the height 104 pixels so that there was a space from the logo image at the bottom between the future menu and the logo, and I took the width two pixels more just in case, since I encountered a couple of times that Mozilla incorrectly determined the size of the image and cropped it a little. That's it, we're done with the logo. Menu in

First, let's write out the technical specifications. We need to create a site header that will have a block of links, contain several graphic elements of a given topic and, accordingly, have a certain text part that will be used for a slogan or something else, I will also implement this creation in a rubber version so that the dimensions of this header changed along with the size of the browser window.

So, this is what we will get at the end of the lesson:

I chose the topic of fishing because it is very close to me and, accordingly, it’s nice to do something. Naturally, I prepared the graphics in advance in Photoshop, assembled and cut everything, how I did it, I won’t explain to you, since this is a separate topic, and in this lesson I will show you how it’s all implemented directly in the code, so let’s move closer to the point.

Here is a general picture of what this header looks like in html:

As you may have noticed, the code is quite short and at the same time very effective, I will analyze everything in order and comment on each step accordingly:

Document body tag, here we immediately reset to zero all possible margins from the edges of the browser window and inside the body tag itself, with the corresponding parameters margin:0px; padding: 0px; We need this so that there are no white spaces around the edges of the browser window, and in principle this is always used for any normal website layout.