jquery.sticklr 侧边面板

GitHub 项目地址 演示地址

<link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/faisalman/sticklr-js@master/css/jquery-sticklr-1.4-light-color.css" />
<script src="https://cdn.jsdelivr.net/gh/faisalman/sticklr-js@master/js/jquery-sticklr-1.4.js"></script>

用法

<!-- include the required CSS -->
<link rel="stylesheet" type="text/css" href="jquery-sticklr-1.4-light-color.css" />

<!-- include any version of jQuery before including plugin -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<!-- include the plugin -->
<script type="text/javascript" src="jquery-sticklr-1.4.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#example').sticklr();
    });
</script>

<ul id="example" class="sticklr">
    <li>
        <a href="#" class="icon-something" title="This is a floated icon"></a>
        <ul>
            <li class="sticklr-title">
                <a href="#">This is a title</a>
            </li>
            <li>
                <a href="http://www.google.com" class="icon-google">This is a link</a>
            </li>
            <li>
                <a href="http://www.facebook.com" class="icon-facebook">Another link</a>
            </li>
        </ul>
    </li>
</ul>

选项

$('#example').sticklr({
    animate     : true,
    menuHeight  : 20,
    menuWidth   : 200,
    relativeTo  : 'top',
    relativeGap : 10,
    showOn      : 'hover',
    stickTo     : 'right',
    tabHeight   : 64,
    tabWidth    : 32
});

转载请注明出处：吖Go博客 » jQuery.Sticklr