VPF::Иерархическое меню - Форум программистов

Areostar

Дата 3.8.2011, 15:48 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

хочу сделить иерархическое меню на основе маркерованного списка. при нажатии на пункт(если есть подпункты) пункты верхнего уровня должны раздвигаться!

таписал такой лист СSS:

Код


   * {
       margin: 0;
           padding: 0;
           border: 0;
    }
    #container 
    {
       height:1350px;
           left:20%;
           margin: 0 auto;
    }
    #site
    {
           margin: 0 auto;
           min-width: 980px;
           max-width: 1200px;
    }
    .content_fon
    {
         position:absolute;
         width:950px; height:1400px;
         left:12.5%;
         background:url(images/fon.jpg);
    }
    ..menu  {
            position:absolute;
        left:-51px; top:250px;
    }
    
    .menu ul {
                  margin: 0;  padding: 0;
                  list-style: none;
                  width: 150px; height: 48px;
             }
          
    .menu ul li {
                   position:relative; 
                   height:35px;
    }
          
    .menu a {  font-weight:bold; }
          
    .menu li ul {
                     position:relative;
                     left:10px; top:0;  
                     display:none;
                }
          
   .menu  ul li a {
                      display:block;
                      text-decoration:none;
                      color:#72f;
                      padding:1px; 
                  }
          
   .menu  li:hover ul { display:block; } 
        
   .menu ul a:hover {
               font-weight:bold;
                 font-size:16px;
                         color: #00ff00;
   }

ВСё нармально. Толька пункты не рераздвигаются. как исправить!?

olldman

Дата 4.8.2011, 09:19 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Делал как-то нечто подобное: _http://realtsib.ru/oldman/2/menu.html - если оно, пользуйте.

Areostar

Дата 4.8.2011, 14:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

Да такое нужно! Но где исходник взять!?

olldman

Дата 4.8.2011, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Просмотр html-кода не помогает? Я ничего не прятал вроде.

mark2011

Дата 4.8.2011, 16:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 28.6.2011

Репутация: нет
Всего: 2

И да простит меня автор того сайта... но там используется наипростейшая JS функция:

Код


function shiftSubUL(n){
  var el = document.getElementById('subUL'+n);
  if ( el.style.display == 'none' )
    el.style.display = 'block'
  else
    if ( el.style.display == 'block' )
    el.style.display = 'none';
}

А вообще если по теме, то я делал такое меню.... только у меня надо было сделать так, чтобы при клике на один пункт закрывался (или открывался) другой, если это ссылка - чтобы был осуществлён переход по ссылке... в общем сложно всё. Делал на связке php+smarty+js+mootools. Получилось неплохо, вроде)))

olldman

Дата 4.8.2011, 16:30 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Цитата

но там используется наипростейшая JS функция

- это разве плохо? Какая была поставлена задача, то и делалось. smile

Areostar

Дата 4.8.2011, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1191
Регистрация: 5.4.2008

Репутация: -1
Всего: -2

а в сss что нить подправлять!?

olldman

Дата 5.8.2011, 06:26 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Естесственно, подгонять под ваш дизайн smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »