BySlideMenu

by ByScripts

HTML

<script src="http://www.byscripts.info/javascript/byslidemenu-2.1.3.js"></script>
<h1>Default options</h1>
<div id="byslidemenu">
    <img src="http://www.byscripts.info/image/byslidemenu/cat.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/dog.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/elephant.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/computer.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/electronics.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/engine.jpg" alt="" />
</div>

<h1>Using autoSlide</h1>
<div id="byslidemenu_autoslide">
    <img class="default" src="http://www.byscripts.info/image/byslidemenu/cat.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/dog.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/elephant.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/computer.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/electronics.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/engine.jpg" alt="" />
</div>

<h1>Using skip class</h1>
<div id="byslidemenu_skip">
    <img class="skip" src="http://www.byscripts.info/image/byslidemenu/animals.jpg" alt="" />
    <img class="default" src="http://www.byscripts.info/image/byslidemenu/cat.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/dog.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/elephant.jpg" alt="" />
    <img class="skip" src="http://www.byscripts.info/image/byslidemenu/technology.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/computer.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/electronics.jpg" alt="" />
    <img src="http://www.byscripts.info/image/byslidemenu/engine.jpg" alt="" />
</div>

<h1>Using triggers and selector</h1>
<ul...

CSS

/* BySlideMenu CSS rules */
div, ul {
    position: relative;
    overflow: hidden;
}
div img, li {
    position: absolute;
    width: 300px;
    height: 225px;
}

/* Rules below are optional, here for demos */
div, ul {
    margin-bottom: 20px;
}
.trigger{
    position: absolute;
    width: 50px;
    font-family: arial, sans-serif;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 8pt;
    font-weight: bold;
    padding: 6px 0px; 
}

JavaScript

/* Default options */
new BySlideMenu();

/* Using autoSlide */
new BySlideMenu({
    'container' : 'byslidemenu_autoslide',
    'autoSlide' : true,
    'autoSlideDelay' : 1000,
    'autoRestore' : false
});

/* Using skip class */
new BySlideMenu({
    'container' : 'byslidemenu_skip',
    'skipClass' : 'skip' // "skip" is the default value
});

/* Using triggers and selector */
new BySlideMenu({
    'container' : 'byslidemenu_trigger',
    'selector' : 'li',
    'triggerSelector' : '.trigger' // ".trigger" is the default value
});

/* Fx */
new BySlideMenu({
    'container' : 'byslidemenu_fx',
    'fxOptions' : { 'duration' : 350, 'transition' : 'bounce:out' }
});

/* Menu in vertical mode */
new BySlideMenu({
    'container' : 'byslidemenu_vertical',
    'vertical' : true
});


/*
To set options :

new BySlideMenu({key: value, key: value, ...})

Available options :

name            | type     | default          | description
================================================================================================
container       | string   | byslidemenu      | Container ID or element
------------------------------------------------------------------------------------------------
selector        | string   | li               | The CSS selector of the slides,
                |          |                  | inside the container
------------------------------------------------------------------------------------------------
compressSize    | integer  | 50               | Size (in pixels) of the closed elements
------------------------------------------------------------------------------------------------
vertical        | boolean  | false            | Is the menu vertical ?
------------------------------------------------------------------------------------------------
skipClass       | string   | skip             | Class name of the slides to skip
------------------------------------------------------------------------------------------------
defaultClass...