Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: 3х уровневое меню
 
 автор: aibolit   (06.10.2008 в 23:55)   письмо автору
 
 

люди добрые подскажите как добавить 3 уровень меню, чтобы разворачивался по клику смещаяя остальное меню в низ. и при развернутом пункте 3го уровня шажав другой пункт 3 го уровня первый открыйт пункт сворачивался.

код штмл

<body onload="clickMenu('menu')">
<ul id="menu">
    <li class="sub">меню1
        <ul>
            <li><a href="#">субменю1</a></li>
            <li><a href="#">субменю1</a></li>
            <li><a href="#">субменю1</a></li>
        </ul>
    </li>
    <li class="sub">меню 2
        <ul>
            <li><a href="#">субменю1</a></li>
            <li><a href="#">субменю1</a></li>
            <li><a href="#">субменю1</a></li>
            <li><a href="#">субменю1</a></li>
        </ul>
    </li>
</ul>
</body>


код css


#menu {list-style-type:none; padding:0; margin:0; width:625px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}

#menu li.sub {background:#d30;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:625px; text-decoration:none;  cursor:pointer; font-weight:bold; text-indent:5px;}


#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}

#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}

#menu li.click ul {display:block;}
#menu li.click ul li.hover ul,
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}

#menu li.click ul li.fly {background: #657;}
#menu li.click ul li.hover {background:#98a;}


код js


clickMenu = function(menu) {
    var getEls = document.getElementById(menu).getElementsByTagName("LI");
    var getAgn = getEls;

    for (var i=0; i<getEls.length; i++) {
            getEls[i].onclick=function() {
                for (var x=0; x<getAgn.length; x++) {
                getAgn[x].className=getAgn[x].className.replace("unclick", "");
                getAgn[x].className=getAgn[x].className.replace("click", "unclick");
                }
            if ((this.className.indexOf('unclick'))!=-1) {
                this.className=this.className.replace("unclick", "");;
                }
                else {
                this.className+=" click";
                }
            }
            getEls[i].onmouseover=function() {
                this.className+=" hover";
            }
            getEls[i].onmouseout=function() {
                this.className=this.className.replace("hover", "");
            }                               я
        }
    }

  Ответить  
 
 автор: aibolit   (09.10.2008 в 16:36)   письмо автору
 
   для: aibolit   (06.10.2008 в 23:55)
 

так никто и не поможет?

  Ответить  
 
 автор: PAT   (09.10.2008 в 16:58)   письмо автору
 
   для: aibolit   (09.10.2008 в 16:36)
 

Дык у вас такая фигня написана, что помочь затруднительно.

Всё, что у вас нарисовано в скриптах и стилях, можно с успехом свести к ДВУМ строчкам там
и там.
А у вас - целая простыня. С туевой хучей непоняток...

Вы хотите, чтобы вам ещё пол-простыни здесь нарисовали? :-)

  Ответить  
 
 автор: aibolit   (11.10.2008 в 19:56)   письмо автору
 
   для: PAT   (09.10.2008 в 16:58)
 

>Дык у вас такая фигня написана, что помочь затруднительно.
>
>Всё, что у вас нарисовано в скриптах и стилях, можно с успехом свести к ДВУМ строчкам там
>и там.
>А у вас - целая простыня. С туевой хучей непоняток...
>
>Вы хотите, чтобы вам ещё пол-простыни здесь нарисовали? :-)

так как это сделать 2мя строчками, я не гуру в програмировании, по этому и прошу помощи.

  Ответить  
 
 автор: PAT   (11.10.2008 в 21:35)   письмо автору
 
   для: aibolit   (11.10.2008 в 19:56)
 

Посмотрите, например, вот эту тему - там есть вполне приличное решение.

  Ответить  
 
 автор: aibolit   (16.10.2008 в 21:20)   письмо автору
 
   для: PAT   (11.10.2008 в 21:35)
 

спасибо. оч помогло,
а вот возник вопрос, как в этом коде развернуть меню по одному клику

<html><head> 
<script type="text/jscript"> 
function Show(id){ 
    if(window.document.getElementById('t'+id).style.display=='none'){ 
window.document.getElementById('t'+id).style.display='block'; 
    }else{ 
window.document.getElementById('t'+id).style.display='none'; 
    } 

</script> 
<style type="text/css"> 
.ko{ 
background-color:#FFFF00; 
border:1px solid; 

.po{ 
background-color:#FF0000; 
 display:none; 
 } 
</style> 
</head> <body> 
<table> 
  <tr> 
    <td class="ko" onclick="Show(1)">Краткое описание 1</td> 
  </tr> 
  <tr> 
    <td id=t1 class="po" >Полное описание 1</td>     
  </tr> 
..
..
..
</table> 
</body> </html>

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования