Выпадающее меню с градиентом

[Angel_33_3]

На форуме нужной мне темы не нашел. Вот есть сайт, нужно сделать динамическое меню, которое при нажатии на Услуги сворачивалась бы и разворачивалось. в меню на фоне используется градиен, внизу тень и в этом вся проблема. подскажите, как можно добиться этого эффекта.

[Vlad]

Например, здесь по шагам расписано, как это сделать на jQuery.

http://www.webresourcesdepot.com/sliding-t...nu-with-jquery/

Вот рабочий пример, надо щелкнуть по "Open It".

http://www.webresourcesdepot.com/wp-conten...-sliding-menu/#

[Angel_33_3]

я в JS не силен. как можно сделать чтобы при нажатии на кнопку Услуги, она оставалась на месте, а список выезжал вниз?

[stars]

я в JS не силен. как можно сделать чтобы при нажатии на кнопку Услуги, она оставалась на месте, а список выезжал вниз?

Cтать сильным или в JS или в ActionScript

Edited October 6, 2010 by stars

[psywalker]

Cтать сильным или в JS или в ActionScript

Ага, прокачаться до нормального уровня)

[mishka]

Предлагаю вариант - заплатить денюжку, и вам сделают.

[Great Rash]

Angel_33_3, Вам во втором посте привели пошаговый пример как сделать. Или вы начинаете что-то делать и показываете что конкретно не получается на конкретном примере, или я перенесу тему в соответствующий раздел.

В этом разделе мы готовы вам помочь реализовать что-то, но не делать это что-то за вас.

[Angel_33_3]

меню уже работает, но при нажатии на стрелку оно раскрывается, а при переходе на новую страницу, опять закрывается. Как зафиксировать положение меню или как сделать, чтобы оно по умолчанию было открыто, а не закрыто?

вот скрипт в html-странице:

<script type="text/javascript">
	$(document).ready(function() {
		$(".topMenuAction").click( function() {
			if ($("#openCloseIdentifier").is(":hidden")) {
				$("#slider").animate({ 
					marginTop: "-248px"
					}, 500 );
				$("#topMenuImage").html('<img src="design/images/open.png" alt="" />');
				$("#openCloseIdentifier").show();
			} else {
				$("#slider").animate({ 
					marginTop: "0px"
					}, 500 );
				$("#topMenuImage").html('<img src="design/images/close.png" alt="" />');
				$("#openCloseIdentifier").hide();
			}
		});  
	});
</script>

Вот css код меню:

#sliderWrap {
width: 242px;
}
#slider {
position: absolute;
background-image:url(linkList2.png);
background-repeat:no-repeat;
background-position: bottom;
width: 242px;
height: 279px;
margin-top: -249px;
}
#slider img {
border: 0;
}
#sliderContent {
position: absolute;
text-align:left;
}
#openCloseWrap {
position:absolute;
margin: 248px 0 0 0px;
font-size:12px;
font-weight:bold;
}

Вот ссылка на сам скрипт: http://nz-ua.com/design/scripts/jquery-1.2.6.min.js

Правда там код не красиво оформлен

[Great Rash]

Это делается при помощи серверных скриптов (PHP, Java, Perl и т.п.).

[Angel_33_3]

в css в margin-top изменил значение с -249px на 0px и теперь оно по умолчанию развернутое, но как сделать, чтобы вначале меню сворачивалось с первого раза кликая на стрелку, а не со второго, как сейчас. Потом оно сворачивается и разворачивается с первого раза.

[sap1ens]

меню уже работает, но при нажатии на стрелку оно раскрывается, а при переходе на новую страницу, опять закрывается. Как зафиксировать положение меню или как сделать, чтобы оно по умолчанию было открыто, а не закрыто?

Если нужно, чтобы что-то было всегда открыто, то после

$(document).ready(function() {

Нужно написать

$("#идентификатор_того_что_нужно_держать_открытым").show();

Ну а margin вернуть на место... Таким образом при открытии страницы и полной её загрузки откроются все нужные меню.

[Angel_33_3]

$(document).ready(function() {

Так в коде вообще такой строчки нету

[sap1ens]

Так в коде вообще такой строчки нету

Куда же она делась =) внимательно в начале посмотрите.

[Angel_33_3]

Куда же она делась =) внимательно в начале посмотрите.

http://nz-ua.com/design/scripts/jquery-1.2.6.min.js загляни сам в код там нет такой строчки

[Great Rash]

Боже... прочтите уже документацию к jQuery.

[Angel_33_3]

Боже... прочтите уже документацию к jQuery.

я в любом случае буду изучать js и jQuery, мне это очень надо, но это меню мне по работе нужно сделать сейчас. Надеялся что, кто-то в код заглянет и подскажет.

[sap1ens]

меню уже работает, но при нажатии на стрелку оно раскрывается, а при переходе на новую страницу, опять закрывается. Как зафиксировать положение меню или как сделать, чтобы оно по умолчанию было открыто, а не закрыто?

вот скрипт в html-странице:

<script type="text/javascript">
	$(document).ready(function() {
		$(".topMenuAction").click( function() {
			if ($("#openCloseIdentifier").is(":hidden")) {
				$("#slider").animate({ 
					marginTop: "-248px"
					}, 500 );
				$("#topMenuImage").html('<img src="design/images/open.png" alt="" />');
				$("#openCloseIdentifier").show();
			} else {
				$("#slider").animate({ 
					marginTop: "0px"
					}, 500 );
				$("#topMenuImage").html('<img src="design/images/close.png" alt="" />');
				$("#openCloseIdentifier").hide();
			}
		});  
	});
</script>

Вот здесь строчку эту найдите =) Это по сути начало исполнения jQuery скрипта, а по ссылке типо jquery-1.2.6.min.js лежит сам jQuery фреймворк, причем запакованный. Его трогать/менять не нужно.

[Angel_33_3]

Вот здесь строчку эту найдите =) Это по сути начало исполнения jQuery скрипта, а по ссылке типо jquery-1.2.6.min.js лежит сам jQuery фреймворк, причем запакованный. Его трогать/менять не нужно.

дааа... здесь я эту строчку не смотрел. завтыкал малеха. но я в эту строчку $("#идентификатор_того_что_нужно_держать_открытым").show(); подставляю разные идентификаторы и меню все равно закрывается.

вот код самого меню, что я опять делаю не так?

<div id="linkList">
			<div id="sliderWrap">
				<div id="openCloseIdentifier"></div>
				<div id="slider">
					<div id="sliderContent">
							<ul id="listService">
								<li><a href="organizing_events.html">Организация событий</a></li>
								<ul id="listSer">
									<li><a href="corporate_party.html">- корпоративный праздник</a></li>
									<li><a href="private_party.html">- частный праздник</a></li>
									<li><a href="major_events.html">- крупные мероприятия</a></li>
								</ul>
								<li><a href="creative.html">Креатив – копирайт, креатив</a></li>
								<li><a href="promo.html">Промо, PR</a></li>
								<li><a href="production.html">Продакшн – аудио видео</a></li>
								<li><a href="design.html">Дизайн</a></li>
								<ul id="listSer">
									<li><a href="des_web.html">- веб</a></li>
									<li><a href="des_polygraphy.html">- полиграфия</a></li>
								</ul>
							</ul>
					</div>
					<div id="openCloseWrap">
						<a href="#" class="topMenuAction" id="topMenuImage">
							<img src="design/images/open.png" alt="" />
						</a>
					</div>
				</div>
			</div>
		</div>