20 Classic Sidebar Menu Layout Design with Examples

There is many sidebar menu layout designs there. but the more classic designs attract the clients and customers. The sidebar menu was most common back in the early days of web design, but these days we’re starting to see designers ditch the horizontal navigation bar in favour of the vertical list once again. The sidebar menu seems to be coming back into fashion once again after it was left behind for horizontal navigation bars.Today’s web design showcase features 20 sites that all feature modern examples of the classic sidebar menu layout.

Design Council
































Kick Point








Broken Twill
















Gareth Emery








Sculpt Communications








Georgina Bousia
















PUSH Collective








The Conference by Media Evolution 2014








Q Ideas
































Electrik Company
















Mammoth Media









Creating a Side Menu Floating Using  CSS only

For this tutorials, We are try to create a Left Side Menu Floating Using CSS only. It means we are going to fixed the side menu while scroll the page. For the long page with contains many paragraph, readers difficult to drag up and click the next articles . so wen need to scrool the side menu it is the easy way to client for select next articles. That why we are going to do this articles.

So here we go Creating a Side Menu Floating Using  CSS only
Demo       |

Step 1 – HTML

Step 2 – CSS

using the css “position fixed & top”, you can make scroll the left side menu.

This is simple code and enjoy it.

There is a lot of slider over-here. We can make slider using jquery, Css, JavaScript and also using WordPress plugin. If we create slider using jquery and JavaScript we have to include library functions and also script. It may casue our website slow the loading speed. So we can a make slider using css in easy way. Its is reduce website weight.

So here we are going to learn how to create basic slider using only css

Step 1 – HTML

Step 2 – CSS

This is code. have a fun

30 Page Preloading Image Style in Css

In every website we have seen an image preloader in their websites. There is a lot of images we can make as a page preloaded image. Here we are going to make 30 preloaded images using css. It’s very simple to make preloader in our website. We used jQuery for hiding the loading images in this website. You can hide loading image when click the website.

The animations are very easy to customize since they made out of just CSS, you will have to change jQuery code so that it fades out the loading screen once the content loads. I will explain to you how the first example works.

Demo       |

Step 1: HTML

This is the loading functionality

and you can add inner pages with your own content

Step 2: CSS
we have to create a fixed div element that can float above and center spot that always will remain centered.

You will notice that i used keyframe twice ‘@-webkit-keyframes’ and ‘@keyframes animate’ first is for webkit based browsers second one is for internet explorer.
Step 3: Jquery

This is just used for on-click to hide loading images

Simple Image Overlay Title Hover Effects in css3

In this tutorial, we are going to create a basic image overlay title hover effects with CSS3. When we will hover the image its need to transition and showing the content or title or icon of the image.

In old days, a small curse over trick make people to click the images and show the description and its tool lot of coding, But nowadays we can make people just hover the images and read the description easy way using css3 transition, we want smooth transition and make it attractive for users. its look more presence for your websites.

Next File Upload With Progress Bar

Step 1

Create a Html code


Step 2

Add css3 transition