[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Выпадающее меню на CSS
ak167
Всем привет!
Раньше делал выпадающее меню на CSS на 3 уровня вложенности. Делал так:


<ul>
<li>
Level 1</li>
<li>
Level 1
<ul>
<li>
Level 2</li>
<li>
Level 2
<ul>
<li>
Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>




Затем в файле CSS задавал отступ всем пунктам меню. Чем выше уровень, тем дальше отступ.

Но сейчас пишу движок, в котором пользователь может сам создавать пункты меню и вкладывать одно в другое неограниченное количество раз. Как быть? Не задавать же вручную в CSS отступы для сразу 100 уровней вложенности. Может есть какой-то выход?
sergeiss
Покажи CSS, который используешь для известного уровня вложенности. Если честно, то не вижу проблем. Если задаешь отступ не абсолютный, а относительно "своего" уровня, то они все выстроятся так, как надо.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
walerus
Да вариантов масса скорее всего, все зависит от твоего желания... Например, можно "сворачивать" предыдущие вкладки, что бы не получилась "лестница за экран" из 100 ступенек, можно с JQ поэксперементировать и т.д. на вкус и цвет как говорится...
ak167
Цитата (sergeiss @ 23.03.2017 - 17:18)
Покажи CSS, который используешь для известного уровня вложенности. Если честно, то не вижу проблем. Если задаешь отступ не абсолютный, а относительно "своего" уровня, то они все выстроятся так, как надо.

sergeiss, а как это относительно своего уровня, как так сделать?
/* меню */
#menu {
width: 924px;
padding: 20px 20px;
margin: 0 auto;
text-align: center;
background: #1e1e1e;
border-radius: 20px;
font-weight: 900;
}
#menu li {
list-style: none;
display: inline-block;
position: relative;
border-right: 2px solid #f3eddf;
}
#menu li:last-child {
border: none;
}
#menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px 20px;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 300px;
padding: 10px;
background: #000;
border-radius: 10px;
}
#menu li ul li {
display: block;
text-align: left;
border: none;
}
#menu li ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 7px;
}
#menu li:hover, #menu li a:hover, #menu li ul li a:hover {
color: #e2376f;
background: #fdd43c;
}
#menu img {
width: 100%;
}
Быстрый ответ:

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