Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 29.04.2015, 10:49   #1
Manonia
Пользователь
 
Регистрация: 13.01.2010
Сообщений: 77
По умолчанию Горизонтальное дерево css

Привет!

Подскажите пожалуйста, как сверстать след. дерево: каждый последующий узел должен раскрываться на одном уровне с родителем. У меня это получилось(используя абсолютное позиционирование). Но теперь если, например, раскрыть первый узел Level1, то второй
узел Level 2 не смещается автоматически вниз и если открыть его, то происходить наложение узлов. Как сделать, чтобы Level2 при открытии Level1 автоматически смещался на нужное расстояние?

Код HTML:
<html>
<head>
    <script src="jquery.js"></script>
    <script type="text/JavaScript">
    $(document).ready(function() 
	{
		$("li").click(function(e) {
		    e.stopPropagation();
			$(this).children('ul').toggle();
	   });
   });
</script>
	


<style>
    .csstree > ul
    {
	   width: 200px;
    }
	   
    .csstree ul
    {
          cursor: pointer;
	    color: blue;
	    list-style: none;
	    width: 110px;
	    position: relative;
	    z-index: 597;
    }
	 
    .csstree  ul ul
    {
	   position: absolute; 
	   top: 1px; 
	   left: 99%; 
	   width: 100%; 
	   padding: 0px;
	   z-index: 598;
     }
	   
     .csstree  ul li
     {
          position: relative
      }
	   
    .csstree  ul ul ul
    {
         width: 200px;
         position: absolute; 
	 top: 1px; 
	 left: 99%; 
	 width: 100%; 
         padding: 0px;
         z-index: 598;
    }


</style>
<head>
<body>
<div class="csstree">
	<ul class="tree">
		<li>
			Level1
			<ul style="display: none; ">
				<li>
					 <input type="checkbox" /> level1.2
				</li>
				<li>
					<input type="checkbox" /> level1.3
					<ul style="display: none">
						<li class="current"> <input type="checkbox" /> level1.3.1</li>
						<li><input type="checkbox" /> level1.3.1</li>
						<li><input type="checkbox" /> level1.3.1</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			Level2
			<ul style="display: none">
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
				<li><input type="checkbox" /> level2.1</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>
Manonia вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее горизонтальное меню только на CSS RelaX Inc. HTML и CSS 26 10.07.2012 12:44
Выпадающее горизонтальное меню на css st_sasha HTML и CSS 1 20.10.2011 16:26
горизонтальное меню s.talke.r Паскаль, Turbo Pascal, PascalABC.NET 1 18.12.2010 17:12
Горизонтальное меню на CSS. yermolenko HTML и CSS 2 27.05.2010 10:47