Разрабатываем нижнее меню на HTML5. Часть 2

Это вторая часть курса "Разрабатываем нижнее меню на HTML5". Таким образом, веб-мастер сможет создать связь с помощью перетаскивания, а затем просто нажать на кнопку "Предварительный просмотр" , чтобы увидеть результат (так же присутствует возможность экспорта результатов). Я разместил все ссылки меню в отдельный PHP файл. В вашем случае это могут быть базы данных, если это крупный проект. Итак, давайте начнем.

Сложность

footer меню

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

Шаг 1. HTML

В этой части мы не будем создавать статический HTML, я вставил содержимое нашего прежнего index.html в новый файл index.php.

Шаг 2. CSS

В дополнение к нашему файлу main.css, я добавил новый CSS файл (в нем находится стиль для страницы предварительного просмотра):

css/bmenu.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;
}

.columns {
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}
.column {
    border: 1px dotted #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 {
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 30px;
    margin-bottom: 5px;
    position: relative;
    text-align: center;
}

Шаг 3. JS

Пожалуйста, добавьте следующий код в файл main.js (вставляйте сразу после вызова - updateHandlerDrop):

var previewBtn = document.querySelectorAll('#preview');
addEvent(previewBtn, 'click', function (event) {
if (event.preventDefault) event.preventDefault(); var params = '';
var oColumns = document.querySelectorAll('div.column');
for (var i = 0; i < oColumns.length; i++) {
var iCol = i+1;
var sColElems = '';
for (var k = 0; k < oColumns[i].childNodes.length; k++) {
if (oColumns[i].childNodes[k].nodeType == document.ELEMENT_NODE && oColumns[i].childNodes[k].tagName == 'A') {
sColElems += oColumns[i].childNodes[k].id + '_';
}
}
params += iCol + '=' + sColElems + '&';
} var http = new XMLHttpRequest();
http.open('POST', 'preview.php', true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.setRequestHeader('Connection', 'close');
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
document.open();
document.write(http.responseText);
return;
}
}
http.send(params);
return false;
});

Это код кнопки "Просмотр". Он подготавливает все необходимые параметры для того, чтобы отправить новый файл preview.php. В основном, это своего рода риализация нашей активной ссылки в столбцах.

Шаг 4. PHP

Теперь, пришло время пересмотреть наш скрипт для сервера. Как я уже говорил раньше, я перенес все ссылки в отдельный файл PHP (links.php), вот он:

links.php

<?
$aLinks = array(
1 => array('Link 1', '#link1'),
2 => array('Link 2', '#link2'),
3 => array('Link 3', '#link3'),
4 => array('Link 4', '#link4'),
5 => array('Link 5', '#link5'),
6 => array('Link 6', '#link6'),
7 => array('Link 7', '#link7'),
8 => array('Link 8', '#link8'),
9 => array('Link 9', '#link9'),
10 => array('Link 10', '#link10'),
11 => array('Link 11', '#link11'),
12 => array('Link 12', '#link12')
);

Теперь необходимо сгенерировать код для нашей титульной страницы с использованием следующего массива:

index.php

<?php
require_once('links.php'); 
$sLinks = '';
foreach ($aLinks as $i => $aPair) {
list($sText, $sUrl) = $aPair;
$sLinks .= '<a id="'.$i.'" draggable="true">'.$sText.'</a>';
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Разрабатываем нижнее меню на HTML5. Часть 2 | Siteacademy</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Разрабатываем нижнее меню на HTML5. Часть 2)</h2>
<a href="http://siteacademy.ru/index.php/html/49-bottom-menu-builder-html5-part-2" class="stuts">Вернуться к статье на <span>Siteacademy</span></a>
</header> <div class="actions">
Actions:
<button id="preview">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">
<?= $sLinks ?>
</div>
<script src="/js/main.js"></script>
</body>
</html>

И наконец предварительный просмотр страницы:

preview.php

<?php
require_once('links.php'); 
$sColumns = '';
$iColCnt = count($_POST); $dWidth = round(100 / $iColCnt, 1); foreach ($_POST as $sCol => $sColEls) { $iColId = (int)$sCol; $sColumns .= '<div class="column" style="width:'.$dWidth.'%">'; $aEls = explode('_', $sColEls); // obtain elements in column
if (is_array($aEls) && count($aEls)) {
foreach ($aEls as $iPos => $sEl) { $iEl = (int)$sEl;
if ($iEl) {
list($sText, $sUrl) = $aLinks[$iEl];
$sColumns .= '<a href="'.$sUrl.'">'.$sText.'</a>';
}
}
}
$sColumns .= '</div>';
} //file_put_contents('cache/bottom_menu.html', $sColumns); ?> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Разрабатываем нижнее меню на HTML5. Часть 2 | Siteacademy</title>
<link href="/css/bmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header tabindex="0">
<h2>Разрабатываем нижнее меню на HTML5. Часть 2</h2>
<a href="http://siteacademy.ru/index.php/html/49-bottom-menu-builder-html5-part-2" class="stuts">Вернуться к статье на <span>Siteacademy</span></a>
</header> <div class="actions">Result bottom menu (preview)
<a href="/index.php" style="float:right">Start again</a>
</div>
<div class="columns">
<?= $sColumns ?>
</div>
</body>
</html>

Небольшой код в верхней части – создание нижнего меню (с колонками). Вы можете убрать комментарии file_put_contents для того, чтобы сгенерировать кэш-файл готового меню.

Перевод статьи Musical drop down menu

Тэги: PHPmenufooter

Вход

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