Меню "аккордеон" с картинкой

Тема в разделе "Веб-дизайн", создана пользователем sidor, 13 мар 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. sidor

    sidor

    Регистр.:
    7 июн 2006
    Сообщения:
    220
    Симпатии:
    14
    Делаю меню для сайта и пришел с некоторый ступор.
    В закрытом виде оно имеет такой вид:
    [​IMG]
    Тоесть перед пунктами, в которых есть подпункты, стоит стрелочки вправо.

    После нажатия на такой пункт, оно должно октрываться в таком виде:
    [​IMG]

    Так вот как сделать что бы та же картинка менялась когда меню открывается?
    Такое же меню нашел на
    http://www.iprofi.su/
    Только там без картинки.
     
  2. dosia

    dosia Постоялец

    Регистр.:
    22 июн 2007
    Сообщения:
    77
    Симпатии:
    9
    в таких вещах не особо разбираюсь но
    я видел нечто подобное тут:
    http://www.free-lance.ru/
    можно и подглядеть ;)
     
    sidor нравится это.
  3. glas_naroda

    glas_naroda Постоялец

    Регистр.:
    4 авг 2007
    Сообщения:
    83
    Симпатии:
    15
    Не понял вопроса... на рис. 1 стрелочка на картинке смотрит вправо; на рис. 2 стрелочка смотрит вниз. Что еще надо???
     
  4. WolandV

    WolandV Создатель

    Регистр.:
    5 мар 2009
    Сообщения:
    13
    Симпатии:
    4
    Код:
    <script>
    function _HeaderSect(ot, CheckNum) {
    	switch(CheckNum) {
    		case 0:
    			SectionName = "Solutions"; 
    			break;
    		case 6:
    			SectionName = "Marketing";
    			break;
    	}
    	if (document.getElementById(SectionName).style.display == 'block')
    	{
    		document.getElementById(SectionName).style.display = 'none';
    		ot.style.backgroundImage = "url(/images/vpravo.gif)"; 
    	}
    	else
    	{
    		document.getElementById(SectionName).style.display = 'block';
    		ot.style.backgroundImage = "url(/images/vniz.gif)";
    	}
    }
    </script>
    ...
    <h3 style="background: url(/images/vpravo.jpg) no-repeat;" onClick="_HeaderSect(this, 6);">Каталог продукции</h3>
    	<div id="Marketing" style="display: none; width: 90%;">
    		<p>Ноутбуки</p>
    		<p>Клавиатуры</p>
    		<p>Мыши</p>
    	</div>
    ...
     
    sidor нравится это.
  5. sidor

    sidor

    Регистр.:
    7 июн 2006
    Сообщения:
    220
    Симпатии:
    14
    я в жаве вообще ноль :)
    картинка слева вообще не показывается почему-то...

    upd.
    все сделал. запутался с путями картинок.

    а как вот можно еще сделать что бы оно выскакивало не сразу, а с задержкой как на сайте указанном в 1м посте?
     
  6. dosia

    dosia Постоялец

    Регистр.:
    22 июн 2007
    Сообщения:
    77
    Симпатии:
    9
    sidor, а мои пример не подошол?
    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
    можеш его подогнатЬ под себя
     
  7. Baxxxter

    Baxxxter Писатель

    Регистр.:
    12 янв 2008
    Сообщения:
    9
    Симпатии:
    0
    а на jQuery не пробвал?
     
  8. WolandV

    WolandV Создатель

    Регистр.:
    5 мар 2009
    Сообщения:
    13
    Симпатии:
    4

    задержку можно сделать с помощью функции setTimeout(func, time).
    Например,
    function demo(){
    //вызвать функцию wz через 5 секунд
    window.setTimeout('wz()', 5000)
    }

    И кстати, пример с фриланса был прямо в яблочко ))
     
    sidor нравится это.
Статус темы:
Закрыта.