Древовидное меню на Css

Alexandrm · 07.10.2007, 11:54

Можно ли на CSS создать древовидное меню такого типа?
....Ссылка1
+ Ссылка2
........+Вложение1
............... Подвложение1
............... Подвложение2
............... Подвложение3
........+Вложение2
........+Вложение3
....Ссылка3
....Ссылка4

deMone · 07.10.2007, 13:13

Можно.

kost · 07.10.2007, 13:39

http://www.destroydrop.com/javascripts/tree/

Alexandrm · 07.10.2007, 17:35

deMone, если можно поподробней о том как или где это можно почитать. По возможности без javascripts. А то я смог найти только выпадающие меню как делать на CSS

Alexandrm добавил [date]1191764225[/date]:
kost, Спасибо за ссылку но я пытаюсь обойтись без javascripts

deMone · 08.10.2007, 02:47

Так стоп, вам только на CSS?

Ну, в принципе, возможно, если использовать атрибут :hover, но IE его подставляет только для ссылок <a>, а для нас это неудобно.

kost · 08.10.2007, 12:51

А как вы нажатие на ссылку для раскрытия дерева будете отлавливать без JS?

deMone · 08.10.2007, 16:22

Можно только на наведение реагировать, конечно. Но это хуже.

Alexandrm · 08.10.2007, 18:25

Хорошо если делать его с JS. я нашел такой код
<style>
...
body {color: #940122; background: white;}
.close {cursor: hand; list-style-image: url(images/close.gif);}
.open {cursor: hand; list-style-image: url(images/open.gif);}
.col {position: relative; display: none;}
.exp {position: relative; display: block; list-style-image: url(images/mark.gif);}
...
</style>
<script language="JavaScript">
function showhideObj(obj,expand)
{
obj.className = obj.className == "col" ?
"exp": "col";
expand.className = expand.className == "close" ?
"open": "close";
}
</script>
<body>
<ul>[*]Home
<ul id="In1" class="col">[/list]
<li onclick="javascript:showhideObj(In2,Out2)"
class="close" id="Out2"><a>Archive </a>
<ul id="In2" class="col">[*]
Volume 22
[*]
Volume 21
[*]
Volume 20
[*]
Volume 19
[/list][*]Instructions of authors[*]Editorial board [*]Feedack

но у меня не получается сделать открывающееся меню в Volume. И чтобы оно не закрывалось при нажатии на любую ссылку.

deMone · 09.10.2007, 05:10

Думайте

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Меню	ddddd	HTML, CSS, JavaScript	19	02.11.2009 12:16
Меню на cms DLE, вид меню, папки (открыты, закрыты)	74ivan74	Кальянная	0	12.08.2009 20:03
Меню...	Shtrenyov	ASP, Perl, PHP и MySQL	2	26.10.2006 23:33
Древовидное меню	ivan341	ASP, Perl, PHP и MySQL	11	12.04.2006 19:11
Что не так с меню.....	ivan341	Зал дебютантов	7	09.12.2005 02:32

07.10.2007, 11:54	#1
Alexandrm	Можно ли на CSS создать древовидное меню такого типа? ....Ссылка1 + Ссылка2 ........+Вложение1 ............... Подвложение1 ............... Подвложение2 ............... Подвложение3 ........+Вложение2 ........+Вложение3 ....Ссылка3 ....Ссылка4

07.10.2007, 13:39	#3
kost	http://www.destroydrop.com/javascripts/tree/

07.10.2007, 17:35	#4
Alexandrm	deMone, если можно поподробней о том как или где это можно почитать. По возможности без javascripts. А то я смог найти только выпадающие меню как делать на CSS Alexandrm добавил [date]1191764225[/date]: kost, Спасибо за ссылку но я пытаюсь обойтись без javascripts

08.10.2007, 02:47	#5
deMone	Так стоп, вам только на CSS? Ну, в принципе, возможно, если использовать атрибут :hover, но IE его подставляет только для ссылок <a>, а для нас это неудобно.

08.10.2007, 12:51	#6
kost	А как вы нажатие на ссылку для раскрытия дерева будете отлавливать без JS?

08.10.2007, 16:22	#7
deMone	Можно только на наведение реагировать, конечно. Но это хуже.

08.10.2007, 18:25	#8
Alexandrm	Хорошо если делать его с JS. я нашел такой код <style> ... body {color: #940122; background: white;} .close {cursor: hand; list-style-image: url(images/close.gif);} .open {cursor: hand; list-style-image: url(images/open.gif);} .col {position: relative; display: none;} .exp {position: relative; display: block; list-style-image: url(images/mark.gif);} ... </style> <script language="JavaScript"> function showhideObj(obj,expand) { obj.className = obj.className == "col" ? "exp": "col"; expand.className = expand.className == "close" ? "open": "close"; } </script> <body> <ul>[]Home <ul id="In1" class="col">[/list] <li onclick="javascript:showhideObj(In2,Out2)" class="close" id="Out2"><a>Archive </a> <ul id="In2" class="col">[] Volume 22 [] Volume 21 [] Volume 20 [] Volume 19 [/list][]Instructions of authors[]Editorial board []Feedack но у меня не получается сделать открывающееся меню в Volume. И чтобы оно не закрывалось при нажатии на любую ссылку.

09.10.2007, 05:10	#9
deMone	Думайте