How to Make CSS slider menu.

css slider menu

Creating  a CSS Slider Menu

Hi all, We have come here this time to teach you “ CSS slider menu”. We don’t need any jquery or any javascript for this menu, we will be using plain html5 and css3 for this. If you don’t have knowledge of html5 and css3, you can learn easily from our HTML5 tutorial. Knowledge of basic HTML and CSS is enough for this tutorial.
Css Slider menu is one of the most important and most serached content in web UI elements. We can use css slider in left slider menu or can also use in any part, for showing multiple products on a page, and in a smooth way. CSS slider menu tutorial explained in this tutorial is only a small example of this vast world of CSS. We can do a lot more by using css and its properties.
CSS slider teaches you about using

  • CSS animation
  • CSS hover effects
  • CSS pseudo elements

So here is a small example of CSS Slider menu.

Demo free CSS slider Menu.

css slider

css3 menu

What you need for css slider menu

:

  • Text editor such as notepad++, sublime text, Dreamweaver etc.
  • Basic knowledge of HTML5 and CSS (CSS3)
  • For adding a smooth effect, we should have basic knowledge of css3 animation.

So lets start. For a CSS slider menu, lets begin with the basic html.

This a basic page structure for any web page.

<!doctype html>

<Html>

<Head>

</head>

<Body>

</body>

</Html>

Now lets start making a basic menu for this “CSS3 Slider menu tutorial”. Just add this inside the body tag.

<UL><Li><a href=””>Home</a>

</Li>

<Li>

<a href=””>CSS slider tutorial</a>

</Li>

<Li>

<a href=””>HTML5 Tutorial</a>

</Li>

<Li>

<a href=””>Jquery Tutorial</a>

</Li>

<Li>

<a href=””>Contact Us</a>

</Li>

</UL>

 

So now css slider will give a basic look in this way

css-slider-menu-without-style

css3-menu-without-style

 

 

Let’s apply some basic style, for that we will add a stylesheet page .

Below is the stylesheet code to be added to stylesheet page.

* {margin: 0px;padding: 0px;

}

 

.menu-container {

width: 700px;

margin: 0 auto;

}

 

ul.menu {

width: 100%;

}

 

ul.menu li {

list-style: none;

float: left;

margin: 5px 10px;

border-right: 1px solid #757575;

padding-right: 10px;

}

 

ul.menu li:last-child {

border-right: none;

}

 

ul.menu li a {

text-decoration: none;

color: #333;

}

 

Now, after applying this code we will get this view for css slider menu.

css-menu-after-style

css-slider-menu-after-style

 

Now we will add a submenu under any of the Top Level menus than will apply the same effect to make it slide in our slider menu.

Here is the code.

<ul><li><a href=””>Home</a>

</li>

<li>

<a href=””>CSS Slider</a>

<ul>

<li>

<a href=”#”> CSS slider animation</a>

</li>

<li>

<a href=”#”> CSS slider hover </a>

</li>

<li>

<a href=”#”> CSS slider beginners</a>

</li>

<li>

<a href=”#”> HTML5 beginners</a>

</li>

</ul>

</li>

<li>

<a href=””>HTML5 Tutorial</a>

</li>

<li>

<a href=””>Jquery Tutorial</a>

</li>

<li>

<a href=””>Contact Us</a>

</li>

</ul>

 

Now again we will style our css slider menu for giving it a cool look.

Note: We will keep up position as absolute so that it displays when we hover on any menu.

HTML5 Beginners

HTML5 Beginners

 

Now our style sheet is following code for the CSS slider menu:

* {margin: 0px;padding: 0px;

}

 

.menu-container {

width: 710px;

margin: 0 auto;

}

 

ul.menu {

width: 100%;

margin: 10px;

border: 2px solid #118DA5;

float: left;

}

 

ul.menu li {

list-style: none;

float: left;

padding: 5px 10px;

border-right: 1px solid #757575;

height: 20px;

width: 100px;

text-align: center;

}

 

ul.menu li:last-child {

border-right: none;

}

 

ul.menu li a {

text-decoration: none;

color: #A81BA8;

font-size: 14px;

font-family: arial;

}

Add for second level menu

ul.menu li ul {

border: 2px solid #118DA5;

margin-top: 5px;

border-top: none;

width: 135px;

margin-left: -11px;

position: absolute;

display: none;

}

 

ul.menu li ul li {

display: block;

float: none;

border-right: none;

border-bottom: 1px solid #ccc;

padding: 5px 5px;

width: 112px;

text-align: left;

}

 

ul.menu li ul li:last-child {

border-bottom: none;

}

Hover effects on sub-menu

ul.menu li:hover ul {

display: block;

}

By applying this, We will get this view for css slider menu as in this image. We can also see that above has a hover effect while we hover on the menu.

css-slider-submenu-with-style

css3-submenu-with-style

 

Now for giving some cool effect, we will apply Transition effect on the css slider menu. So as we have to apply transition effect on the <li></li> .

Note: For applying the transition effect in CSS slider menu, we have given some tricks. We will apply

  • Opacity of submenu <ul></ul> and <li><li> reduced to 0. After hover opacity changes to 1
  • Height of li under the submenu will be reduced to 0. After hover changes to 25px;
  • Font size for <a></a> increases from 0px to 12px.

So here is the final style after applying transition to the li under menu.

* {margin: 0px;padding: 0px;

}

 

.menu-container {

width: 710px;

margin: 0 auto;

}

 

ul.menu {

width: 100%;

margin: 10px;

border: 2px solid #118DA5;

float: left;

}

 

ul.menu li {

list-style: none;

float: left;

padding: 5px 10px;

border-right: 1px solid #757575;

height: 20px;

width: 100px;

text-align: center;

-webkit-transition: all .15s ease-in;

transition: all .15s linear;

}

 

ul.menu li:last-child {

border-right: none;

}

 

ul.menu li a {

text-decoration: none;

color: #A81BA8;

font-size: 14px;

font-family: arial;

}

Add for second level menu

ul.menu li > ul {margin-top: 5px;border-top: none;

width: 135px;

margin-left: -11px;

position: absolute;

opacity: 0;

height: 0px;

}

 

ul.menu li > ul li {

border-left: 2px solid #118DA5;

border-right: 2px solid #118DA5;

float: none;

border-bottom: 1px solid #ccc;

padding: 0px;

width: 112px;

text-align: left;

height: 0px;

opacity: 0;

}

 

ul.menu li ul li a {

font-size: 0px;

}

 

ul.menu li > ul li:last-child {

border-bottom: 2px solid #118DA5;

border-right: 2px solid #118DA5;

}

 

 Hover effects on sub-menu

ul.menu li:hover > ul {opacity: 1;}

 

ul.menu li:hover > ul li {

height: 25px;

opacity: 1;

padding: 5px 5px;

}

 

ul.menu li:hover > ul li a {

font-size: 12px;

}

 

And the HTML as followed:

<!doctype html><html><head>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>

<body>

<div class=”menu-container”>

<ul class=”menu”>

<li>

<a href=”#”>Home</a>

</li>

<li>

<a href=”#”>CSS Slider</a>

<ul>

<li>

<a href=”#”> CSS slider animation</a>

</li>

<li>

<a href=”#”> CSS slider hover </a>

</li>

<li>

<a href=”#”> CSS slider beginners</a>

</li>

<li>

<a href=”#”> HTML5 beginners</a>

</li>

</ul>

</li>

<li>

<a href=”#”>HTML5 Tutorial</a>

</li>

<li>

<a href=”#”>Jquery Tutorial</a>

</li>

<li>

<a href=”#”>Contact</a>

</li>

</ul>

</div>

</body>

</html>

We can also apply multiple sub-menu under different menus.

you can check the live demo:  Demo free CSS slider Menu.

You can use our css slider menu by simplay copying the source, for your convenience we have described each step briefly.


we have tried to provide you free tutorial on CSS slider menu. Download free CSS slider menu from our site and use it. just give a back link to our site.

 

CSS Slider Tutorial Source: www.google.com , www.w3.org , www.anilkumarsahu.comJquery slider

CSS slider menu is an intresting Topic, please write to us if you face any difficulty in this CSS slider tutorial.

You Might Also Like

5 Comments

  1. 3

Comments are closed.