Side Menu Pure CSS

Side Menu – Documentation

Explore the Side Menu Documentation to seamlessly integrate it into your website.



Side Menu is meant to be easily implemented into almost any website or CMS system with some basic knowledge of HTML, JS, CSS and/or server-side scripting.

It is a framework for easy installation, customization, and development. It is not a CMS plugin, module or widget hence it needs to be installed manually. Side Menu does not contain premade designs, it is a layout/framework for your custom notification design/s for static websites or dynamic (CMS).

Package contents

  1. Quick start - includes a single demo for a quick start
  2. Demo layouts - include basic demo layouts for reference
  3. Documentation
  4. Source
  5. changelog.txt

The structure

Side Menu is made from the html elements which define the layout, CSS for basic layout design and JS for actions


The main HTML structure of the menu consists of list items and switchers. Each item contains a link, icon, and optional tooltip. Here is the structure with 5 items.

<div class="side-menu -medium -left --center -space -shadow">
<ul class="sm-list">
	<li class="sm-item">
		<a href="#" class="white black">
			<span class="sm-icon fas fa-home"></span>
			<span class="sm-label">Home</span>
	<li class="sm-item">
		<a href="#" class="black orange">
			<span class="sm-icon"><img src="img/dayes.png"></span>
			<span class="sm-label">Custom Image</span>
	<li class="sm-item">
		<a href="#" class="pink white" data-type="email">
			<span class="sm-icon fas fa-envelope"></span>
			<span class="sm-label">Share via Email</span>
	<li class="sm-item">
		<a href="#" class="white blue" data-type="facebook">
			<span class="sm-icon fab fa-facebook"></span>
			<span class="sm-label">Share on Facebook</span>
	<li class="sm-item">
		<a href="#" class="yellow green" data-type="print">
			<span class="sm-icon fas fa-print"></span>
			<span class="sm-label">Print</span>


This menu contains two CSS files:

  • main.css - demo page styles
  • sticky-buttons.css - required menu styles

The file "sticky-buttons.css" contains all of the specific styling. The file is separated into sections:

  • Reset
  • Main Style
  • Size
  • Position
  • Colors

If you would like to edit a specific section, simply find the appropriate label in the CSS file.

Quick install

  1. Include necessary CSS
  2. Copy HTML code of the menu from one of demo files.
  3. Replace demo menu elements with yours.
<link rel="stylesheet" href="css/side-menu.css">



There are 6 defined menu positions. To use one of them you need to add appropriate class to menu container. For example, if you want the "Left center" position, class name should be: "-left --center". You can find all available positions and classes in table below.

<div class="side-menu -left --center">
Position Class name
Left Center -left --center
Left Top -left --top
Left Bottom -left --bottom
Right Center -right --center
Right Top -right --top
Right Bottom -right --bottom


There are 3 possible size of the buttons. To use one of them you need to add appropriate class to menu container. For example, if you want the "small" size, class name should be: "-small". You can find all available sizes and classes in table below.

<div class="side-menu -large">
Size Class name
Size -small
Medium -medium
Large -large

Hold Open

You can hold open the label. For this option, you must add the class -visible to tag <li>

Connect all menu items

You can connect all menu items for show and hide. Add class -list-show to tag div for control all menu items

<div class="side-menu -list-show">

Also, you can hold open all menu items. Add class -visible to tag ul.

<div class="side-menu -medium -left --center -space -shadow -list-show ">
    <ul class="sm-list -visible">


There are 12 defined color combinations. To use one of them you need to add color classes to <a> tag. For example, if you want the orange background color and black color for the icon, the classes should be: "black orange". When you hover on the icon the background change on black color and icon color change on orange. You can find all the available colors and attribute value in the table below.

<a href="#" class="black orange">
Color classes Color


For add space between elements, use class -space for tag div

<div class="side-menu -space">


For add shadow for menu, use class -shadow for tag div

<div class="side-menu -shadow">


For add a specific action to the item, you must include the script actions.js on the page before tag /body

<script src="js/actions.js"></script>

Add the attribute data-type to tag. Example for share page in Facebook:

<a href="#" data-type="facebook">
Action Attribute data-type
Print page print
Go to the back back
Go to the forward forward
Share on Facebook facebook
Share on Twitter twitter
Share on Linkedin linkedin
Share on Pinterest pinterest
Share on Xing xing
Share on Myspace myspace
Share on Weibo weibo
Share on Buffer buffer
Share on Stumbleupon stumbleupon
Share on Reddit reddit
Share on Tumblr tumblr
Share on Blogger blogger
Share on Livejournal livejournal
Share on Pocket pocket
Share on Telegram telegram
Share on Skype skype
Share on Email email

Sources and Credits

I've used the following images, icons or other files as listed.

Tricks and tips


If you're stuck with your layout and have issues you can't fix immediately, I recommend you first try to debug the site with firebug or native browser element inspector (eg. right click --> Inspect element).

This will also help you build your custom layout faster and understand the scheme of how things work in Side Menu.

Use minified version

From the performance point it is good practice to use minified css and js version of the Sticky buttons CSS.

Release Notes

= 1.0 =

  • Initail Release