-
Сразу скажу, что видел тему про выпадающее меню, не хочу ее засорять т.к. там идет обсуждение различных меню, к тому же мой вопрос, думаю, можно выделить отдельно [Only registered and activated users can see links. Click Here To Register...]
Собственно вопрос: как сделать выпадающее меню в несколько рядов, список второго уорвня может быть очень большой и не влезать на экран. Можно ли сделать, чтобы при достижении 10 элементов, появлялся второй вертикальный ряд?
вот само меню: [Only registered and activated users can see links. Click Here To Register...]
взял его из этой статьи: [Only registered and activated users can see links. Click Here To Register...]
вот код меню:
Код:
* * * *<style>
*****body {
****font: normal 9px verdana;
****}
ul {
****margin: 0;
****padding: 0;
****list-style: none;
****width: 179px; /* Width of Menu Items */
****border-bottom: 1px solid #ccc;
* * * * * * font-size : 12px;
****}
****
ul li {
****position: relative;
****}
****
li ul {
****position: absolute;
****left: 178 px; /* Set 1px less than menu width */
****top: 0;
****display: none;
****font-size : 12px;
****}
/* Styles for Menu Items */
ul li a {
****display: block;
****text-decoration: none;
****color: #777;
****background: #fff; /* IE6 Bug */
****padding: 5px;
****border: 1px solid #ccc; /* IE6 Bug */
****border-bottom: 0;
****font-size : 12px;
****}
****
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul { display: block; } /* The magic */
*****</style> * *
* * *
* * * * * * * * * * * *
* *****<ul id="nav">
*[*][Only registered and activated users can see links. Click Here To Register...]
*[*][Only registered and activated users can see links. Click Here To Register...]
* * * * * * * * * * * * * * *
*
*[*][Only registered and activated users can see links. Click Here To Register...]
* * * * * * * * * * * * * * *
*
*[*][Only registered and activated users can see links. Click Here To Register...]
* * * * * * * * * * * * * * *
* [/list]
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
*}
*node.onmouseout=function() {
*this.className=this.className.replace(" over", "");
* }
* }
*}
}
}
window.onload=startList;
С Уважением. :hi:
-
Я бы посоветовал Вам разбить Ваш список второго уровня на разделы и подразделы. На мой взгляд, списки огромной длины – это нарушение юзабилити...
-
Цитата:
Originally posted by Aykroyd@May 20 2007, 15:13
Я бы посоветовал Вам разбить Ваш список второго уровня на разделы и подразделы. На мой взгляд, списки огромной длины – это нарушение юзабилити...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
не более семи пунктов, не более семи...
-
Цитата:
Originally posted by Zigzag@May 22 2007, 00:16
не более семи пунктов, не более семи...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
О как! ) Ну, эт, видимо 508 statement, да WAI Priority... не меньше... ))
-
Вы хотите так
1 | 4
2 | 5
3 | 6
Очевидно можно сделать так (ul (width:100px; height: 90px;} li{float:left; width:50px; height:30px;)
1 | 2
3 | 4
5 | 6
Так, как хотите Вы, можно сделать:
1. поменяв элементы списка местами.
2. для первых трех добавить clear:left; для этого, само-собой, надо заранее знать сколько элементов помещается в одной колонке, что не всегда возможно. могу предложить такой финт ушами - формируйте часть CSS програмно [Only registered and activated users can see links. Click Here To Register...]
