Форум PHP программистов > Как сделать такой выпадающий список?

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Как сделать такой выпадающий список?

Dave

30.03.2011 - 18:23

Помогите пожалуйста. Как сделать чтобы при нажатии на кнопку:
http://clip2net.com/s/RbDk
Выпадал вот такой список:
http://clip2net.com/s/RbCz

Все скрины с самой вёрстки... всё уже свёрстано

Спустя 7 минут, 20 секунд (30.03.2011 - 17:31) inpost написал(а):

Dave
onclick="функцию"
тебе надо получить элемент по ID, который уже есть на странице, и поменять его свойство с display:block на display:none, и наоборот.

Спустя 5 минут, 20 секунд (30.03.2011 - 17:36) Dave написал(а):

Я не совсем понял)

Вот смотрите:

                <ul>
                <li class="cat-active">
                <a class="select" href="#"><span class="selected">Арты</span></a>
                <ul>
                <li><a href="#">Анимэ</a></li>
                <li><a href="#">Векторная графика</a></li>
                <li><a href="#">Фотошоп</a></li>
                <li><a href="#">3D</a></li>
                <li><a href="#">Планшет</a></li>
                <li><a href="#">Фотографии</a></li>
                <li><a href="#">Флэш</a></li>
                <li><a href="#">Фан арты</a></li>
                <li><a href="#">Манга</a></li>
                </ul>
                </li>
                </ul>

И CSS

.select {
	border:1px solid #cde6fa;
	background:url(../images/select-bg.gif) repeat-x;
	padding:1px;
	padding:10px;
	text-decoration:none;
}

.selected {
	font-size:24px;
	color:#000;
	border-bottom:1px dashed #000;
	padding:0 10px 0 0;
	background:url(../images/select-strelka.gif) no-repeat 100% 10px;
}

.select-border {
	border:1px solid #fff;
	padding:8px 15px 8px 15px;
}

.categories {
	margin:0 0 20px 0;
}

.categories ul {
	padding:7px 0 0 0;
}

.categories li {
	margin:10px 0 0 10px;
}

.cat-active {
	margin:0 0 0 15px !important;
}

.cat-active ul {
	display:none;
}

.cat-active:active ul {
	display:block;
}

Сейчас работает только если удерживать нажатие на кнопке :(

Спустя 3 минуты, 11 секунд (30.03.2011 - 17:39) DmitryOpalev написал(а):

  <ul>
                <li class="cat-active">
                <a class="select" href="#"><span class="selected" onClick="menu.style.display='block';">Арты</span></a>
                <ul id='menu'>
                <li><a href="#">Анимэ</a></li>
                <li><a href="#">Векторная графика</a></li>
                <li><a href="#">Фотошоп</a></li>
                <li><a href="#">3D</a></li>
                <li><a href="#">Планшет</a></li>
                <li><a href="#">Фотографии</a></li>
                <li><a href="#">Флэш</a></li>
                <li><a href="#">Фан арты</a></li>
                <li><a href="#">Манга</a></li>
                </ul>
                </li>
                </ul>

Или какой там для списка надо display не помню

Спустя 2 минуты, 5 секунд (30.03.2011 - 17:41) Dave написал(а):

Спасибо, теперь при нажатии открывается, а как сделать чтобы при повторном нажатии закрывался?)

Спустя 3 минуты, 13 секунд (30.03.2011 - 17:45) DmitryOpalev написал(а):

Ммммм... создавай перменную, потом при каждом нажатии на кнопку увеличивай её на 1.
Так же при нажатии на кнопку проверяй эту переменную на четность. Если чето - открывай, если нечетна - закрывай, как пример.

Спустя 2 минуты, 22 секунды (30.03.2011 - 17:47) sharki написал(а):

DmitryOpalev
Ужас)

Сделай проверку если стоит display: block то скрыть если none тот открыть)

Спустя 51 секунда (30.03.2011 - 17:48) Dave написал(а):

sharki а как это?) Я в JavaScript полный 0)

Спустя 1 минута, 39 секунд (30.03.2011 - 17:49) inpost написал(а):

Dave
А что мешает изучить? Не просим же углубляться в построение БД на JS, а просто знать маленькие вещи, такие как if-eles операторы.

Спустя 48 секунд (30.03.2011 - 17:50) sharki написал(а):

http://javascript.ru/ui/show-hide-toggle
Вот там всё разжованно

Спустя 1 минута, 55 секунд (30.03.2011 - 17:52) DmitryOpalev написал(а):

sharki

Спустя 1 минута, 16 секунд (30.03.2011 - 17:53) alex12060 написал(а):


<a class="select" href="#"><span class="selected" onClick="if (getElementById('menu').style.display =='block') { getElementById('menu').style.display = 'none'; } else { getElementById('menu').style.display = 'block'; }">Арты</span></a>

Спустя 1 минута, 23 секунды (30.03.2011 - 17:55) Dave написал(а):

Спасибо

Быстрый ответ:

Здесь расположена полная версия этой страницы.