Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Двухуровневое меню (WingedFox)
Author Message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Tue Apr 05, 2005 2:45 pm (написано за 1 минуту 54 секунды)
   Post subject: Двухуровневое меню
Reply with quote

Небольшое меню.

Формируется из списка, растягивается по вертикали.
В общем, аналог www . scriptocean.com/template3.html =)
Жалко отдавать 39$ за то меню 8*)


sliderMenu.1.0.zip
 Description:
SliderMenu v1.0

Download
 Filename:  sliderMenu.1.0.zip
 Filesize:  1.61 KB
 Downloaded:  995 Time(s)

Back to top
View user's profile Send private message
Rumata
Профессионал



Joined: 17 Aug 2003
Posts: 1850
Карма: 185
   поощрить/наказать


PostPosted: Tue Apr 05, 2005 4:19 pm (спустя 1 час 33 минуты; написано за 58 секунд)
   Post subject:
Reply with quote

3+ люблю простые решения
от себя добавлю - меню требует расширения Расширения IE-DOM для других браузеров: DOMExtensions.js. (forum.dklab.ru/js/advises/RasshireniyaIe-domDlyaDrugihBrauzerovDomextensionsJs.html)
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Thu Apr 07, 2005 11:45 am (спустя 1 день 19 часов 26 минут; написано за 4 секунды)
   Post subject:
Reply with quote

Rumata
Спасибо =)

Новая версия 1.1
+ событие onlick для пунктов имеющих подменю чтобы браузер не трогал адресную строку.
% CSS для похожести меню в разных браузерах.
% Теперь подменю имеет размер шрифта 50% от меню, вместо фиксированного.


sliderMenu.1.1.zip
 Description:
SliderMenu v1.1

Download
 Filename:  sliderMenu.1.1.zip
 Filesize:  2.43 KB
 Downloaded:  848 Time(s)

Back to top
View user's profile Send private message
Лобач Олег
Участник форума



Joined: 05 May 2003
Posts: 72
Карма: 6
   поощрить/наказать

Location: Новокузнецк

PostPosted: Thu Apr 07, 2005 11:49 am (спустя 4 минуты; написано за 12 секунд)
   Post subject:
Reply with quote

Симпатично
+1
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Tue Apr 19, 2005 11:41 am (спустя 11 дней 23 часа 51 минуту; написано за 48 секунд)
   Post subject:
Reply with quote

Новая версия 1.2:
+ флаг 'subFollow', позволяющий включить переходы по ссылкам в пунктах меню, имеющих подменю.
+ сохраняет в куках текущий открытый пункт меню при наличии объекта 'Cookie', Object Cookies (forum.dklab.ru/js/advises/ObjectCookies.html).
% проверяет какой пункт меню открыт на сервере.


sliderMenu.1.2.zip
 Description:
SliderMenu v1.2

Download
 Filename:  sliderMenu.1.2.zip
 Filesize:  3.45 KB
 Downloaded:  1029 Time(s)

Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Fri Jun 24, 2005 11:35 am (спустя 2 месяца 4 дня 23 часа 54 минуты; написано за 40 секунд)
   Post subject:
Reply with quote

Немного исправил код, но, в основном исправления касались HTML-шаблона.
Использую только DIV и A.
Изящнее HTML и CSS. Проще добавить подменю третьего и больших уровней (если дописать логику определения открытых элементов).
Code (html): скопировать код в буфер обмена
  <div (december.com/html/4/element/div.html) id="menu"> (december.com/html/4/element/.html)
   <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) lorem </a>               
   <a (december.com/html/4/element/a.html) href="#" id="sub1"> (december.com/html/4/element/.html) adipiscing </a>
   <div> (december.com/html/4/element/div.html)
     <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) dolor </a>
     <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) vestibulum </a>
   </div>
   <a (december.com/html/4/element/a.html) href="#" id="sub2"> (december.com/html/4/element/.html) consectetuer </a>
   <div> (december.com/html/4/element/div.html)
     <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) elit </a>
     <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) ipsum </a>
     <a (december.com/html/4/element/a.html) href="#"> (december.com/html/4/element/.html) Donec </a>
   </div>
   <a (december.com/html/4/element/a.html) href="#" > (december.com/html/4/element/.html) sit amet </a>
  </div>
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Fri Jun 24, 2005 11:36 am (спустя 1 минуту 12 секунд; написано за 17 секунд)
   Post subject:
Reply with quote

Code (css): скопировать код в буфер обмена
div#menu{
  width: 350px;
  font-size: 36px;
}
div#menu a{
  display: block;
  text-align: center;
  color: #D7D7D7;
  background-color: #000000;
  border: 1px solid #444444;
  cursor: hand;
  width: 100%;
  padding: 1px 0;
  text-decoration: none;
}
div#menu a:hover{
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
div#menu div{
  margin: 0 0 0 1em;
  display: none;
  font-size: 50%;
  font-weight: bold;
  line-height: 133%;
  padding: 2px 2px 0;
}
div#menu div a{
  background-color: #616161;
  color: #CDCDCD;
  border: 1px solid #7A7A7A;
}

div#menu div a:hover {
  background-color: #9E9E9E;
  color: #000000;
  border: 1px solid #AEAEAE;
}
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Fri Jun 24, 2005 11:38 am (спустя 2 минуты; написано за 39 секунд)
   Post subject:
Reply with quote

Code (JavaScript): скопировать код в буфер обмена
  init : function (){
    var cid = false;
    var sm = document.getElementById(sliderMenu.id);
    var as = sm.getElementsByTagName ('A');
    var asL = as.length;
    for (var i = 0; i<asL; i++) {
      var tmp = as.item(i);
     // if (tmp.className.indexOf(sliderMenu.cls)>-1) { поле cls, похоже, тоже не нужно
        while (tmp = tmp.nextSibling) {
         if (tmp.tagName && tmp.tagName.toLowerCase() == 'div') {  //!!! поменял блк для подменю
         //  if (as.item(i).id /*=== cid*/) tmp.style.display = 'block';
           if (tmp.style.display == 'block') sliderMenu.current = tmp;
           as.item(i).__submenu = tmp;
           as.item(i).attachEvent ('onmouseup',sliderMenu.toggle);
           if (!sliderMenu.subFollow) as.item(i).attachEvent ('onclick',sliderMenu.stop);
           break;
         }
        }
     // }
    }
  }
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Fri Jun 24, 2005 3:50 pm (спустя 4 часа 12 минут; написано за 41 секунду)
   Post subject:
Reply with quote

Нашел баг в своем исправлении. Если среди следующих элементов проверять только наличие DIV, в случае, когда у элемента нет подменю, он открывает подменю следующего. Нужно проверять также и следующий A:
Code (JavaScript): скопировать код в буфер обмена
if (tmp.tagName && tmp.tagName.toLowerCase() == 'div') {
   //  ...
}else if (tmp.tagName && tmp.tagName.toLowerCase() == 'a') {
   break;
}
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Fri Jun 24, 2005 4:00 pm (спустя 9 минут; написано за 12 секунд)
   Post subject:
Reply with quote

aross
А чем список не устраивает?
Back to top
View user's profile Send private message
aross
Участник форума



Joined: 14 May 2005
Posts: 48
Карма: 3
   поощрить/наказать

Location: Вологда

PostPosted: Mon Jun 27, 2005 9:08 am (спустя 2 дня 17 часов 7 минут; написано за 8 минут 11 секунд)
   Post subject:
Reply with quote

Устраивает. Просто предложил еще один вариант. Причем рабочий вариант.
Плюсы (на мой взгляд):
  + меньше тегов вообще (два вместо трех),
    меньше тэгов на каждую ссылку (один вместо двух),
    в силу этого более изящный гипертекст, без потери функциональности, и более изящная CSS;
  + просто другой вариант;
  + это работает;
Минусы (какие обнаружил):
  - просто другой вариант.

Позже обнаружил еще один минус: в FF не работает :-(
Значит вариант WingedFox'a ;-)

Last edited by aross on Mon Sep 19, 2005 11:22 am; edited 2 times in total
Back to top
View user's profile Send private message
WingedFox
Профессионал



Joined: 29 Apr 2003
Posts: 4064
Карма: 268
   поощрить/наказать

Location: Питер

PostPosted: Mon Jun 27, 2005 9:25 am (спустя 16 минут; написано за 1 минуту 55 секунд)
   Post subject:
Reply with quote

aross
Ещё один минус - список подходит для PDA и прочих мобильных браузеров
Набор из div+a - не для всех.

CSS можно и в оригинале оптимизировать, только не сильно было нужно =)

А так - конечно Ваш вариант имеет право на жизнь 8*)
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML