Side Menu – Documentation

Info

Overview

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

HTML

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>
		</a>
	</li>
	<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>
		</a>
	</li>
	<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>
		</a>
	</li>
	<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>
		</a>
	</li>
	<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>
		</a>
	</li>
</ul>
</div>

CSS

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">

Options

Position

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">

Size

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">

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">

Colors

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">

Space

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

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

Shadow

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

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

Actions

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">

Sources and Credits

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

• Font Awesome by Fonticons, Inc

Tricks and tips

Debug

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