Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- Font Awesome v4.3.0 -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- Toolbar.js v1.0.4 -->
    <link href="https://6666design.com/cdn/toolbar/1.0.4/jquery.toolbar.css" rel="stylesheet" />
    <script src="https://6666design.com/cdn/toolbar/1.0.4/jquery.toolbar.min.js"></script>
    <!-- 純排版用不影響功能 -->
    <style>
        body {
            margin: 100px;
        }
    </style>
</head>
<body>
    <!-- 按鈕 -->
    <div data-toolbar="content-option" class="btn-toolbar">
        <i class="fa fa-cog"></i>
    </div>
​
    <!-- 顯示列表 -->
    <div id="toolbar-options" class="hidden">
        <a href="#"><i class="fa fa-plane"></i></a>
        <a href="#"><i class="fa fa-car"></i></a>
        <a href="#"><i class="fa fa-bicycle"></i></a>
    </div>
    <script type="text/javascript">
        $( ".btn-toolbar" ).toolbar({
            content: "#toolbar-options", // 目標物件
            position: "top", // 工具列顯示位置
            style: "primary", // 工具列CSS風格
            animation: "standard", // 工具列過場動態效果
            event: "mouseover", // 工具列透過什麼方式顯現
            hideOnClick: false // 點選工具列以外的部分，將隱藏工具列
        });
    </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers