html5底部菜单_底部菜单构建器（HTML5）

html5底部菜单

Bottom Menu Builder (HTML5) Bottom navigation website menu. I am sure that you have seen it many times (at different websites). As usual, this is three-four columns menu with different links. Today I would like to show you a builder, which you can use to build that bottom menu. Main purpose of this builder – prepare static HTML code (as cache file) for embedding into bottom of your website. If you like that idea, you are welcome to play with it, and I will tell you about creation of nice user friendly menu builder. This tutorial is separated into 2 parts, today I will tell you about first side: user interface with drag and drop possibility.

底部菜单构建器(HTML5)底部导航网站菜单。 我相信您(在不同的网站上)已经看过很多次了。 与往常一样，这是具有不同链接的三四列菜单。 今天，我想向您展示一个构建器，您可以使用它来构建该底部菜单。 该构建器的主要目的–准备静态HTML代码(作为缓存文件)以嵌入到您的网站底部。 如果您喜欢这个想法，欢迎您尝试一下，我将告诉您有关创建友好的用户友好菜单构建器的信息。 本教程分为两部分，今天我将向您介绍第一方面：具有拖放功能的用户界面。

As the first, I would suggest you to download the source files and keep the demo opened in a tab for better understanding.

首先，我建议您下载源文件并在选项卡中保持演示处于打开状态，以便更好地理解。

现场演示

下载结果

So, lets start

所以，让我们开始吧

步骤1. HTML (Step 1. HTML)

index.html (index.html)

<div class="actions">
    Actions:
    <button id="preview" disabled>Preview</button>
    <button id="add_col">Add Column</button>
</div>
<div class="actions">Columns (with active elements)</div>
<div class="columns">
    <div class="column" id="drop_1" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
    <div class="column" id="drop_2" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
    <div class="column" id="drop_3" droppable="true"><img src="images/delete.png" onclick="removeColumn(this)" /></div>
</div>
<div style="clear:both"></div>
<div class="actions">All (inactive) elements. You can drag these elements into columns.</div>
<div class="inactive" droppable="true">
    <a id="1" draggable="true">Link 1</a>
    <a id="2" draggable="true">Link 2</a>
    <a id="3" draggable="true">Link 3</a>
    <a id="4" draggable="true">Link 4</a>
    <a id="5" draggable="true">Link 5</a>
    <a id="6" draggable="true">Link 6</a>
    <a id="7" draggable="true">Link 7</a>
    <a id="8" draggable="true">Link 8</a>
    <a id="9" draggable="true">Link 9</a>
    <a id="10" draggable="true">Link 10</a>
    <a id="11" draggable="true">Link 11</a>
    <a id="12" draggable="true">Link 12</a>
</div>
<script src="js/main.js"></script>

<div class="actions">
    Actions:
    <button id="preview" disabled>Preview</button>
    <button id="add_col">Add Column</button>
</div>
<div class="actions">Columns (with active ele