[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Меню в адаптивной вёрстке
RootPM
Имеется меню (горизонтальное и выпадающее вертикальное), в котором заранее неизвестно количество элементов меню, ширина каждого элемента меню также неизвестна.

Задача, если в горизонтальное меню не помещаются элементы, переместить их в вертикальное меню. Если изменяется ширина блочного элемента в большую сторону - переместить элементы в горизонтальное меню, сколько будет возможно.

На habrahabr нашёл такой вариант:
<html>
<head>
<meta
charset="UTF-8">
</head>
<body
onload="javascript:res(0,0,0,0)">

<script
type="text/javascript">
function
res(width, height, timeout, validation) {
var item = document.getElementById('test_two');

if((width == item.offsetWidth) && (height == item.offsetHeight)) {

if(validation) {
// Сработает при изменении размеров блочного элементов, для тестирования можно раскомментировать нижнюю строку.
// document.getElementById('test').innerHTML = Date();

} else {
timeout = 500;
}
window.setTimeout(res, timeout, width, height, timeout, 0);

} else {
width = item.offsetWidth;
height = item.offsetHeight;
timeout = 200;
window.setTimeout(res, timeout, width, height, timeout, 1);
}

}

</script>

<div
id="test"></div>
<div
id="test_two"><p>Test JavaScript.</p></div>

</body>
</html>


Но в комментариях пишут что при каждом - offsetHeight, будет происходить - reflow.

_____________
Все будет офигенно. Кому-то сразу, кому-то постепенно.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.