Меню — раскрывающийся список

Не являюсь большим поклонником JavaScript, тем не менее, продолжим.

Часто встречаются меню — раскрывающийся список, уместна аналогия с select, но с более широкими возможностями в смысле оформления, с открыванием/закрыванием по клику, одно из таких меню и предлагается вашему вниманию.

Не буду объяснять, как работает JavaScript, нам надо, чтобы работало в Chrome, FF, OPERA, IE и минимум настроек.

 

Настройки заключаются в установке всего двух значений в строке: <li onclick="tree('a', 4)">

  • a — продолжаем алфавит в зависимости от того, сколько ссылок будет в основном меню
  • 4 — цифра указывает, количество ссылок в выпадающем списке

И, <li id="a1">SubMenu 1.1</li>

далее всё будет по аналогии буква и цифра.

 

JavaScript:

<script type="text/javascript">
var tmpid,am,let,count;
  function tree(letter, amount)
   {
    count=1;
    am=amount;
    let=letter;
    show2();
   }
  function show2()
   {
    if(count>am)
     {
      tmpid = '' + let + count;
      setTimeout('show(tmpid, 1)', 100);
      count++;
     }
      else if(count==am)
       {
        tmpid = '' + let + count;
        setTimeout('show(tmpid, 0)', 100);
       }
   }
  function show(id, flag)
   {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'block')?'none':'block';
    if(flag!=0) show2();
   }
</script>

Стили для данного примера, как вы понимаете, практически отсутствуют.

<style type="text/css">
    ul {cursor:pointer;list-style-type:none;margin:0;}
    ul ul li {display:none;margin:0;}
    li {float:left;width:80px;text-align:center;}
</style>

Останавливаться на них нет никакого смысла, все делаем сами с учетом ваших же предпочтений.

Меню двигает все находящееся под ним вниз, связка: position:relative; -> position:absolute; поможет исправить ситуацию.

Вертикальное меню, строится по образцу и подобию горизонтального.