Перейти до вмісту

Випадаючі списки


Повідомлень в темі: 10

#1 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 06.10.2007 – 16:49

  • 10
Випадаючі списки без перзавантаженяня сторінки як тут: http://www.marcegagl...o/pannelli.html
Нижче в розділі продукти - Insulating panels

Повідомлення відредагував sdl: 06.10.2007 – 16:50


#2 Lukom

    Абориген

  • Користувачі
  • PipPipPipPip
  • 112 повідомлень
  • Стать:Чоловік
  • Місто:Ukraine-Lviv

Відправлено 06.10.2007 – 18:31

Ну і...? А яке питання?
Не бачу на тому сайті жодного списку, який випадає без перезавантаження сторінки.

Якщо треба зробити випадаючий список без перевантаження сторінки, то тут є 2 підходи:
1) display: none + javascript. Список є на сторінці але його не видно, натискаючи на лінк робимо його видимим/невидимим за допомогою display = '' i display = 'none'.
Приклад:
<script type="text/javascript">
function Toggle(el) {
	el.style.display = (el.style.display == 'none' ? '' : 'none');
}
</script>
...
<a href="java script:void(0);" onclick="Toggle(this.nextSibling)">Випадаючий список</a><ul style="display: none">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
Треба тільки вважати в даному прикладі, щоб між </a> i <ul> не було пробілів.
(Увага! Пишучи на цьому форумі href="javаscript:..." мені злосно при відправці розділяє на href="java script:..." :) Тому якщо будете копіювати код, незабудьте забрати пробіл між java i script. Перестарались трохи адміни з безпекою ;) )
До речі, Toggle - це одна з функцій javascript, які використовуються дуже часто. Наприклад в цьому рейтингу вона на 6-му місці :)

2) AJAX. Тут треба мати трохи більше скілів... Дуже коротенько про це можна прочитати тут. Суть в тому, що списку немає на сторінці, натискаючи на лінк ми підгружаємо його з сервака.

Взагалі є ще більш збоченськіші методи, але про них не будемо...

Повідомлення відредагував Lukom: 06.10.2007 – 18:59

  • 0

#3 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 08.10.2007 – 11:03

http://www.vip-invest.com.ua/stile.htm

Майже розібрався, в тому прикладі... там на iframe'ax меню...
але коли клікаєш по:
 с полимерным покрытием   - Metal Trade Comax (Чехия) - Прайс листи - в рулонах
йде перехід на прайси, проблема в тому, що список звертається... що робити?

А щодо, Toggle, скоріш всьго набагато зручніше, і швидше... тільки не працює.... ;)
  • 0

#4 Lukom

    Абориген

  • Користувачі
  • PipPipPipPip
  • 112 повідомлень
  • Стать:Чоловік
  • Місто:Ukraine-Lviv

Відправлено 10.10.2007 – 00:15

Підхід із iframe'мами якраз і є тим збоченням про яке я навіть розповідати не хочу. Так, iframe звісно класна штука, але пхати їх всюди куди попало не треба, принаймні для таких елементарних задач як розгортання меню. Правильний приклад використання - це, наприклад, фрейм останніх новин форуму на гол. сторінці теревень.
Це причому з'являються такі проблеми про які ти кажеш - наприклад при загрузці нової сторінки ти не знаєш який саме iframe розгорнути, або важко в меню позначити лінк активної сторінки іншим кольором...

Тому Toggle звісно дешевше і сердитіше. Я тут трохи посидів, і вродив 2 приклади випадаючої менюшки: Меню1, Меню2. Перший мінімально простий, другий трохи складніший. Приклади працюють в IE, FF i OP. Ще можна подивитись як зроблено менюшка на моєму сайті - http://lukom.org/ :D

P.S. Можна подивитись на досить цікаві приклади списків на http://css.maxdesign....au/listamatic/

Повідомлення відредагував Lukom: 10.10.2007 – 00:25

  • 0

#5 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 10.10.2007 – 10:23

Дуже дякую.:D :D
хороший скрипт, довго б мучився з iframe'aми...
Починаю реалізувати...
а як зробити, щоб при завантаженні, список був звернутий?
  • 0

#6 Lukom

    Абориген

  • Користувачі
  • PipPipPipPip
  • 112 повідомлень
  • Стать:Чоловік
  • Місто:Ukraine-Lviv

Відправлено 10.10.2007 – 17:22

Для цього треба зробити протилежне до того, що робить Toggle.
Щоб список був згорнутий у першому випадку потрібно у першому прикладі виставити для субменю стиль display: none,
а в другому прикладі щоб зробити субменю розгорнутим треба виставити клас active для li, який тримає це субменю.
Приклади оновив.
  • 0

#7 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 11.10.2007 – 14:14

Перегляд дописуLukom (10.10.2007 18:22) писав:

Для цього треба зробити протилежне до того, що робить Toggle.
Щоб список був згорнутий у першому випадку потрібно у першому прикладі виставити для субменю стиль display: none,
а в другому прикладі щоб зробити субменю розгорнутим треба виставити клас active для li, який тримає це субменю.
Приклади оновив.

Реалізував, що вийшло... :D
Біда, тестую на різних браузерах...
Firefox 2.0.0.7, margin-left: 15px;, розуміє не так як треба, може є якась альтернатива?
Доречі, який у тебе браузер?

А display: none, взагалі не хочуть сприймати. Може я щось не так роблю:
.menudrop, .submenu {
	list-style-image:url(img/list.jpg);
	margin-left: -10px;
}
.submenu {
	display:none;
}
В тебе сайт на ПХП? Гарно вийшов :D

Повідомлення відредагував sdl: 11.10.2007 – 14:16

  • 0

#8 Lukom

    Абориген

  • Користувачі
  • PipPipPipPip
  • 112 повідомлень
  • Стать:Чоловік
  • Місто:Ukraine-Lviv

Відправлено 12.10.2007 – 00:21

Цитата

Реалізував, що вийшло... smile.gif
Добре, тільки ще добре було б, якби звичайні лінки і лінки, які розгортають меню якось відрізнялись... кольором, або іншими маркерами...

Цитата

margin-left: 15px;, розуміє не так як треба, може є якась альтернатива?
Спробуй padding-left

Цитата

Доречі, який у тебе браузер?
FireFox 1.5.0.12, користуюсь трохи старішою версією для підтримки старих розширень, без яких я не можу жити, а також працює швидше за 2-й.

Цитата

А display: none, взагалі не хочуть сприймати. Може я щось не так роблю:
Якщо ти так напишеш, то списки згорнуться і більше не розгорнуться :D
Для кожного субменю треба руками прописати так - <ul class="submenu" style="display: none">

Цитата

В тебе сайт на ПХП? Гарно вийшов cool2.gif
Дякую :D Сайт написаний на c# під asp.net 2.0. Але були часи, коли він був і на php...

P.S. Виправ у лінках слеші з \ на / :happy1:

Повідомлення відредагував Lukom: 12.10.2007 – 00:27

  • 0

#9 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 12.10.2007 – 16:40

Дякую.
Чому C# i ASP?

Підскажи, що фокс має на увазі:
Изображение “http://www.sdl.net.ua/img/top1.jpg” не может быть показано, так как содержит ошибки. на sdl - це я натиснув праву кнопку миші, там де має бути шапка, вибрав "показать фоновое изображение"...ІЕ- також не показує... В Опері все норм.
  • 0

#10 Lukom

    Абориген

  • Користувачі
  • PipPipPipPip
  • 112 повідомлень
  • Стать:Чоловік
  • Місто:Ukraine-Lviv

Відправлено 12.10.2007 – 17:03

Цитата

Чому C# i ASP?
Подобається c# :blink:

Цитата

Підскажи, що фокс має на увазі:
Изображение “http://www.sdl.net.ua/img/top1.jpg” не может быть показано, так как содержит ошибки. на sdl - це я натиснув праву кнопку миші, там де має бути шапка, вибрав "показать фоновое изображение"...ІЕ- також не показує... В Опері все норм.
Трохи погугливши, прочитав, що в одного проблема зникла коли він перезаписав картинку графічним редактором, ще в одного чувака зникла проблема коли він перезалив картинку по ftp через режим binary. Також знайшов таке повідомлення - тут пишуть що це відомий глюк файрфокса і це пов'язано з тим, що сервер бореться з лічерами, тобто не видає картинку, якщо referrer не з цього сайту.

Повідомлення відредагував Lukom: 12.10.2007 – 17:17

  • 0

#11 Opium

    Абориген

  • Користувачі
  • PipPipPipPip
  • 78 повідомлень
  • Місто:Київ

Відправлено 15.10.2007 – 09:49

Фотки тут, поздирав... Якийсь захист...
Фіг з ними, знайду ішні...
  • 0



Кількість користувачів, що читають цю тему: 1

0 користувачів, 1 гостей, 0 анонімних