Разрабатываем нижнее меню на HTML5

Поговорим про нижнюю навигацию. Я уверен, что вы видели её много раз (на различных сайтах). Как правило, это три-четыре колонны меню с различными ссылками. Сегодня я хотел бы показать вам, разработку, которую можно использовать для создания, нижнего меню. Главная цель этой статьи – приготовить статический код HTML (как кэш-файл) для встраивания в нижнюю часть сайта. Если вы заинтересованы в такой теме, то я расскажу вам о создании хорошего, удобного меню. Это руководство разделено на 2 части, сегодня я расскажу вам о первой части: пользовательский интерфейс с возможностью перетаскивания блоков.

Сложность

css меню

Для начала, советую вам загрузить исходные файлы и запустить демо в новой вкладке для лучшего понимания.

Шаг 1. HTML

intex.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>

Имеются три основные части: блок с действиями, блок с активными колонками и блок с неактивными элементами. Все элементы можно перетаскивать между колонками. Также мы можем добавлять и удалять наши колонны.

Шаг 2. CSS

Теперь пришло время добавить стиль к нашему меню

.actions {
    border: 1px solid #CCCCCC;
    font-size: 24px;
    margin: 20px auto 5px;
    overflow: hidden;
    padding: 10px;
    width: 900px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.actions button {
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
}
.actions #add_col {
    float: right;
}
.inactive {
    border: 1px dashed #ccc;
    margin: 0 auto;
    width: 900px;
}
.inactive a {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 8px 8px 20px;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    height: 20px;
    margin: 10px;
    opacity: 1;
    position: relative;
    text-align: center;
    width: 180px;

    -khtml-user-drag: element;

    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 Box Shadow */
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
.inactive a.hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 0;
}
.columns {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
.column {
    border: 2px dashed #ccc;
    float: left;
    min-height: 100px;
    padding: 10px;
    position: relative;
    width: 33.3%;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.column a {
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 4px 4px 10px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 30px;
    margin-bottom: 15px;
    opacity: 1;
    position: relative;
    text-align: center;

    -khtml-user-drag: element;
    -webkit-user-drag: element;

    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.column img {
    cursor: pointer;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 5;
}

Шаг 3. JS

js/main.js

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})(); function updateHandlerDrag() {
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
// dragstart event handler
addEvent(dragItems[i], 'dragstart', function (event) {
event.dataTransfer.setData('obj_id', this.id);
return false;
});
}
} function updateHandlerDrop() {
var dropAreas = document.querySelectorAll('[droppable=true]');
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault(); this.style.borderColor = "#000";
return false;
}); addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault(); this.style.borderColor = "#ccc";
return false;
}); addEvent(dropAreas, 'dragenter', function (event) {
if (event.preventDefault) event.preventDefault();
return false;
}); addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault(); var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj); var linkText = oldObj.innerHTML;
oldObj.className += 'hidden'; oldObj.parentNode.removeChild(oldObj); this.innerHTML += '<a id="'+iObj+'" draggable="true">'+linkText+'</a>'; updateHandlerDrag(); this.style.borderColor = "#ccc";
return false;
});
} var addColBtn = document.querySelectorAll('#add_col');
addEvent(addColBtn, 'click', function (event) {
if (event.preventDefault) event.preventDefault(); var oCols = document.querySelector('div.columns');
var iChilds = oCols.childElementCount + 1;
var dWidth = 100 / iChilds; oCols.innerHTML += '<div class="column" id="drop_'+(iChilds+1)+'" droppable="true"><img src="/images/delete.png" onclick="removeColumn(this)" /></div>'; for (var i = 0; i < iChilds; i++) {
oCols.children[i].style.width = dWidth + '%';
} updateHandlerDrop(); return false;
}); function removeColumn(obj) {
var oParent = obj.parentNode; var oInactive = document.querySelector('div.inactive');
for (var i = 0; i < oParent.childNodes.length; i++) {
if (oParent.childNodes[i].nodeType == document.ELEMENT_NODE && oParent.childNodes[i].tagName == 'A') {
oInactive.innerHTML += '<a id="'+oParent.childNodes[i].id+'" draggable="true">'+oParent.childNodes[i].innerHTML+'</a>';
}
} oParent.parentElement.removeChild(oParent); var oCols = document.querySelector('div.columns');
var iChilds = oCols.childElementCount;
var dWidth = 100 / iChilds; for (var i = 0; i < iChilds; i++) {
oCols.children[i].id = 'drop_' + (i + 1);
oCols.children[i].style.width = dWidth + '%';
} updateHandlerDrop();
updateHandlerDrag();
} updateHandlerDrag();
updateHandlerDrop();

Здесь мы использовали много обработчиков событий. В начале, скрипта обновляем различные обработчики для всех перетаскивании и dropable объектов. При перемещении между блоками (с нижней области), мы должны воссоздать объекты в верхней области и обновить обработчики событий. В случае, когда нам нужно удалить колонку, мы должны передвинуть объект назад в нижнюю неактивную область, в которой содержится список всех возможных элементов.

Заключение

Вот и все, сегодня мы реализовали первую половину нашей постройки меню с функциями перетаскивания. Надеюсь, что наше руководство помогло вам. Не стесняйтесь поделиться своими знаниями с друзьями. Удачи!

Перевод статьи Bottom Menu Builder (HTML5)

Тэги: menufooter

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.