Two-column layout (fixed sidebar and fluid content). Fixed top menu and floating sidebar in WordPress Left sidebar fixed

The simplest example of a fixed floating sidebar in HTML + CSS + JS.

What is its peculiarity - when scrolling, the sidebar sticks to the top of the window, but at the same time, when the sidebar is scrolled to the footer, then it peels off from the top of the screen and sticks with its lower part to the footer, thereby not overlapping the footer (the footer must be high ). If you know what I mean.

The example is taken from some site and it is very primitive (and outdated morally), suitable only for this layout. You can see more universal code in this article and write your own code for your project yourself.

HTML markup for a simple page

CSS styles for content blocks

.header (width: 100%; background: purple; height: 80px;) .content (width: 80%; background: blue; height: 800px; float: left;) .sidebar (width: 20%; background: green; height: 100px; float: right;) .sidebar.fixed (position: fixed; right: 50%; margin-right: -50%;) .footer (width: 100%; background: gray; height: 500px; clear: both;)

JS script for fixed sidebar on page scrolling

Don't forget to include jQuery

$ (function () (var $ window \u003d $ (window); var $ sidebar \u003d $ (". sidebar"); var $ sidebarTop \u003d $ sidebar.position (). top; var $ sidebarHeight \u003d $ sidebar.height () ; var $ footer \u003d $ (". footer"); var $ footerTop \u003d $ footer.position (). top; $ window.scroll (function (event) ($ sidebar.addClass ("fixed"); var $ scrollTop \u003d $ window.scrollTop (); var $ topPosition \u003d Math.max (0, $ sidebarTop - $ scrollTop); if ($ scrollTop + $ sidebarHeight\u003e $ footerTop) (var $ topPosition \u003d Math.min ($ topPosition, $ footerTop - $ scrollTop - $ sidebarHeight);) $ sidebar.css ("top", $ topPosition);));));

What are the requirements for the layout:

• Rubber two-column layout
• sidebar fixed width 300px
• content stretches to fit the rest of the width.
• footer pressed to the bottom (I won't show you how to do this in this tutorial).

What Css problems arise when coding such a layout:

1 way.

If you float blocks, you must give them a fixed width (You cannot set 1 sidebar to 300px and the content to be 100%.) In this case, either the content slides down or a horizontal scroll 300px to the left appears. Well, the main thing is to understand that this method does not suit us.

Method 2.

Many layout designers offer this method, what are they thinking about ?! The essence of the method is that you can set the sidebar to float with a width of 300, but not float the content and set it to margin-left: 300px. Good way and everything seems to work out so well. to be honest, I thought this was the best way, but this method has its pitfalls. The reasons for abandoning this method are that if suddenly in the content we typeset, for example, a menu with floated li or any other float blocks and then we want to clear them using clear: both, then the lower border of this block slides down to the level of the lower border of the sidebar (What and it's not strange since the foat is cleared, you can avoid this if set the floated block to a fixed heightbut it's not at all the case to set a fixed height).

Method 3.

Can be used for sidebar position absolute, but only if you we are sure that the content will be higher in height than the sidebar otherwise, the entire content of the sidebar will crawl onto footer (after all, absolute positioning pulls out of the general stream).

but as for me this is also not a very good way!

Method 4.

"A great way, if there are any drawbacks in it, please comment. But I think this is the best way."

• Pros of this method: firstly, the content in DOMe will go before the sidebara, which is good for search engines.
• nothing will fit on the footer
• any blocks can be cleared and nothing will slide to the lower border (this is how we overcame the problems of the second method).

In general, how it works: look at the code first comes content, followed by sidebar. set float to these two blocks (naturally the sidebar slides down). after that we set the sidebar property margin-left: -100%. fine, it's back in place, and padding the content margin-lerft: 300px.

html

css

.sidebar (
width: 300px;
display: block;
float: left;
margin: 0 0 0 -100%;
}
.content (
min-width: 723px;
display: block;
float: left;
margin: 0 0 0 220px;
}

Hello, today we are going to talk to you about how to create your own navigation bar for your website. It is used on almost every Internet resource, so every developer should be able to create this element.

Explanations for the article:

1. "Sidebar" - site navigation bar.
2. "Position" is a CSS property.
3. "Top", "left", "right", "bottom" - CSS move properties.
4. WordPress is a content management system / CMS for a website.
5. Webix is \u200b\u200ba UI library. Allows you to create tabular items.
6. View is a JavaScript function.

This article will show different ways creating navigation bars, both manually and using special website builders. Our example uses WordPress.

How to create a sidebar manually? CSS & HTML

Now we will show the traditional way of development, namely writing code in text editor... To do this, you need to open HTML and CSS documents in the code editor.

Create a sidebar on the right side. HTML & CSS

Most often, the navigation bar is located either in the header of the site, or on its right side. In the second case, a 2-column layout is usually used.

It's good if you have a ready-made layout in advance, since you know the width of the navigation block. If there is no layout, then this will not interfere with development.

Attention! When creating sidebars and other elements of the site, prepare a ready-made layout in advance. By focusing on it, you will simplify the development process.

The navigation bar can be created using lists and regular blocks. If using lists, turn off the "text-decoration" property for them.

Our example uses a div block construction.

First, create a generic div that will contain the columns. Let's create a class for it, in our example we use the layout class, but this does not particularly affect the development process.

The main block will be used to create positioning as well as sizing.

First, let's define the positioning. For the general container, set the relative positioning - property (position: relative). For columns, set the (position: absolute) property.

Using this type will make it easier for you to position the columns within the block. For this we will use the move properties: , , and .

In our example, the code looks like this:

Html

Copy

CSS

Layout (

position: relative;

background: rgba (119, 115, 115, 0.58);

}

Sidebar, .content (position: absolute;)

Sidebar (

background: # C6DD7D;

Content (

background: # F4ECCE;

Copy

Attention! Be sure to include the width for each individual navigation item. The fact is that they have absolute positioning, which means that their width will be equal to the width of the internal content.

We also want to note that in, first the second column is placed, and then the first. Using this method it doesn't matter as the speakers can be swapped with ease.

You can also use float property, for. This method is much easier, as it is based on flowing around elements. Thanks to him, our sidebat will be located on the right side.

Creates a navigation bar on the right side. HTML & CSS

To create such a panel, you can use the same markup as in the first example. You also don't need to make any special changes to the CSS code.

You need to make some minor adjustments to your CSS. This is necessary so that the menu is located on the right side. Do not change the width and positioning properties!

How to create a sidebar in WordPress?

Now let's look at a method that is very different from the previous one. The difference is that you can create better navigation with virtually no CSS or HTML code.

You will not need to write all the code by hand, all the work will take place in the constructor itself.

When using WordPress, you will need to register the navbar and add some widgets to it.

In order to register a sidebar in WordPress, you will need to write several functions in PHP files... Basically you will need arrays of data that will reference the widgets and their div tags.

In our example, we consider the right sidebar as well as the footer sidebar.

A few words about webix

There is another special framework that will allow you to create this sidebar. Its main advantage is that it allows you to make a good panel with just a few lines of code.

First, you need to download this framework. After that, provide links to its styles and scripts in your HTML document.

After that you can start creating the sidebar. To place it in the framework, there is special function - view. Which will post for the placement of elements.

The downside of this framework is its limitations. When using it, you will not be able to create a truly unique creation, since the panel is not limited by your imagination, but only a couple of functions.

Conclusion

In this article, we've covered a few basic ways to create a navigation bar, but there are many more. You can even come up with your own method based on our experience.

In these examples, the simplest navigation bar was shown. If you work a little with source codethen you can get a real masterpiece.

Tags:

Hello dear readers of the blog site. This is rather a note for myself, so as not to forget what exactly I did when I want to return everything back. It all started when one of the readers suggested writing about a WordPress plugin called Q2W3 Fixed Widget (Sticky Widget) which can make any widget in the sidebar float or in other words, fixed.

Those. scrolling the page you will see that the main part of the sidebar will go up, but the widget that will be located at the very bottom will remain in the viewport no matter how far you move down the text. I'll make a reservation right away that place contextual advertising in this way it is forbidden and can be punished for it (as it turned out in the comments - YAN allows this, and Adsense forbids doing this).

The plugin is wonderful, but the widgets are disabled in my theme, so I solved this problem with a few lines of jav script code that I found on the Internet.

As a result, mine top menu is fixed at the very top of the viewport (in fact, only CSS code was enough for this, but we are not looking for easy ways), and the bottom of the sidebar is fixed at the top right of the screen when you reach it when scrolling down the page. I don’t know if this will make sense, but the solution is really simple.

Why fix the menu and make a floating sidebar

Why fix the top menu, you ask? Well, in general, this is a small experiment on the topic of improvement. Purely hypothetically, we can assume that this can cause an increase in the number of viewed pages and the time spent by the user on the site.

On the other hand, the excessive intrusiveness of such a fixed panel can cause negative reactions from readers, so the question of the usefulness of this action remains open. It will be necessary to look at the result after a week of use - if the menu ceases to be fixed (nailed to the top edge of the viewing area), then the experiment has failed. Just in case, I'll take a screenshot of how it all happened.

The floating sidebar in WordPress is made for a slightly different reason - to draw more attention to something. Basically, here you can insert both a list of categories and a list of popular or recent posts, which again will try to serve the task of improving behavior. But more often than not, advertisements are placed in such a floating block (contextual advertising is impossible, as I already mentioned), which, purely hypothetically, should increase the webmaster's income. Let's see the result in a week.

How to fix the top menu in WordPress

I found a solution for myself on the net. To use this method, the jQuery library must be included. How to do this, I described in detail in the article about for loading content.

If you remember, then in the article about optimizing page loading speed, you should try to combine all CSS and JS into one common one (in the sense of two - one for styles and the other for scripts). Here, in fact, in such a file I added the lines of code given just below. Although you can add them directly to Html codeby surrounding with script tags. For example, this can be done in the header.php template inside the head tags.

You can also implement fixing the top menu using pure CSS - to help us. Actually, positioning using this CSS property is also used here, but it also becomes possible to start displaying the fixed menu not immediately, but some time after the start of scrolling (at a certain distance from the top).

In my case top menu commit code looks like this:

$ (function () ($ (window) .scroll (function () (var top \u003d $ (document) .scrollTop (); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Let me remind you that you can insert this piece of code into:

1. A file with the .js extension that lives in the folder with the theme you are using (/ wp-content / themes / theme). It will suit you only if the line for loading it along with your website's web pages is written for it in the header.php file, which may look like this:
2. You can use the header.php file itself by wrapping this code between the opening and closing head tags and wrapping it in script tags, for example, like this:
3. You can also write this code in script tags anywhere else. The main thing is that it is loaded on desired pages blog. For example, you can in footer.php before the closing body tag.

Now let's turn to this code directly. It turns out that after 10 pixels from the top, the relative positioning is replaced by a fixed one (see the article at the link just above). If necessary, in the line with else, you can select non-zero as the value for top, and then the fixed at the top of the menu will indent from the top edge of the viewport by this pixel value (in my opinion, this is superfluous).

Unlike original code I also had to add width: "100%", because otherwise the size of the menu in width was reduced, which spoiled the whole picture.

See, for clarity, I will give the Html code with which the top menu is formed in my template. WordPress blog (he lives in my header.php file from):

Most likely, in your template, the display of menu items will be set using, for example, such a construction (function), but this is not the point.

The wp_list_pages function, of course, is good (it allows you to customize sorting, set exceptions, etc.), but it is better to do everything manually through regular Html, as shown above. IMHO.

It is important to grasp here that the whole thing is concluded into div containers, and the topmost one has an id \u003d "navi" attribute. Here we will cling to it. You see in the above JS code there are two times #navi? You will need to put down your ID instead of #navi there (or the class, which, as you remember, is written not through a hash, but through a period, for example, like this: .menu).

After that, your menu should be fixed in the top position when scrolling the page by a certain number of pixels. I, however, had a problem with the fact that this very menu did not always appear on top of the page elements over which it floated.

This, you see, is not good. So I had to dig a bit into the CSS code and add the #navi selector with a value of 1000 for the id:

#navi (background: # 03658e url (https: //site/wp-content/themes/Organic/images/spriteme2.png) repeat-x; background-position: 0px -10px; height: 31px; z-index: 1000 )

The fact is that when you use Position to set one of the three types of positioning, this element stops interacting with ordinary elements of the Html code. But with others of the same positioned, he will compete for the position "above or below." z-index: 1000 allows our menu to be placed above all other blocks. Read the details in the article just above.

How to make a floating sidebar in WordPress without plugins

Using the method described below, you can make the entire sidebar float (or in other words, fix in a certain place in the viewport), as well as part of it. If this area you have is very small and fits on one screen (even a portable device), then you can make it all float.

But more often than not, this will not be the case, and the lower part can be made to float. If the sidebar, as in my case, is an inseparable monolith, then you can create a floating block yourself, using the principles laid down in the theme you are using and place it below the main one.

I did all this quickly and not really bothering myself with delights and the search for an optimal solution, because from my rich experience of experiments I made a pattern that the more you pin your hopes on some idea, the less likely it will "shoot". And vice versa. In general, there was no point in bothering so far, because the likelihood that all this will take root is not so great.

So I just took to create the bottom block the upper part of my main sidebar (in the sidebar.php template), then I moved it from the upper to the lower block "I use to make money", and at the end I stuck what was the end in the main block. It turned out something like this:

Well, now I have the block "I use to make money" moved from the upper block of the sidebar to the lower one. It turned out not a fountain, but it will do for a "temporary house". It remains only to arrange all this in the JS file with the code and the lower block will start to float. The JS code looks like this:

$ (document) .ready (function () (var br \u003d $ .browser; $ (window) .scroll (function () (var top \u003d $ (document) .scrollTop (); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version > 7))) ($ (". Sidebar123"). Css ((top: "52px", position: "fixed", marginLeft: "760px"));) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Note that instead of .sidebar123, you need to substitute your class or the ID of the outer container that your bottom sidebar box lives in.

I don't understand this code very much (I don't know JS), but everything works. In any case, partially. When you specify fixed positioning, the report goes from the top left point. Therefore, using the left margin marginLeft: "760px", I place this block exactly on the sidebar level (the figure was obtained through "trial and error").

The top value: "52px" sets the padding of the already floating sidebar block from the top border. Top value However, I have there was a problem if the total height of the main sidebar was less than the height of the content area. Such a thing got out, for example, when viewing the archive of headings:

From a CSS point of view, I understand why this is happening, but I was too lazy to think about fixing it. I just had to refuse to show this floating sidebar block on such pages (it is not needed there).