Подменю с изменением ширины
У меня есть выпадающее меню с большим количеством подуровней. Я сделал простой пример из 4 уровней. Поскольку меню находится на боковой панели и должно быть удобным для небольших мобильных устройств, я бы хотел ограничить общую ширину.
Есть ли возможность автоматически уменьшать ширину неактивных уровней, чтобы общая ширина всего меню не превышала 220 пикселей? Поэтому, когда я подхожу с помощью мыши к уровню 3, ширина уровней 1 и 2 автоматически сужается.
Мой код (с JQuery-ссылки в разделе заголовка):
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );
</script>
<style>
.ui-menu { width: 100px; font-size:12px; }
</style>
</head>
<body>
<ul id="menu">
<li><div>no 1</div>
<ul>
<li><div>no 2</div>
<ul>
<li><div>no 3</div>
<ul>
<li><div>no 4</div></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>1 ответ
Решение
Ты можешь использовать media query, Что-то вроде:
@media screen and (max-width:220px) {
.ui-menu {
width:50px;
}
.ui-menu .ui-menu .ui-menu {
width:100px;
}
}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );
</script>
<style>
.ui-menu { width: 100px; font-size:12px; }
</style>
</head>
<body>
<ul id="menu">
<li><div>no 1</div>
<ul>
<li><div>no 2</div>
<ul>
<li><div>no 3</div>
<ul>
<li><div>no 4</div></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>