Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 12.06.2016, 02:13   #1
lisica198808
Пользователь
 
Регистрация: 06.11.2012
Сообщений: 64
По умолчанию Анимированное меню..

Учусь делать анимированное меню. Возникли вопросы.. Не могу разобраться..
задание:нужно добавить в начало две кнопки: одну-для скрытия элементов, другую – для отображения скрытых элементов. Настроить методы click( ) кнопок, так чтобы они то скрывали, то отображали элементы
первый вопрос по css - делаю фоновую картинку - и чтоб на ней менюшка была , а она не отображается.. Почему-то белым цветом просто весь основной фон становится..Как сделать, чтоб она была видна??
второй вопрос JQuery - проблема с кнопками.. не реагируют.. как-то не так записала чтоли??как на списки заставить их отзываться?

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Менюшка</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="style.css"/>

<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery-latest.js"></script>

</head>
<body>

<div id="menu_pop">
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<ul id="accordion">
 <li><div class=leto>Летние цветы<br>
 <span class="button_podtext">Что нас радует летом?</span></div>
 <ul>
 <li><a href="#">Ромашки</a></li>
 <li><a href="#">Розы</a></li>
 <li><a href="#">Колокольчики</a></li>
 <li><a href="#">Васильки</a></li>

 </ul>
 </li>
 <li><div class=osen>Осенние цветы <br>
 <span class="button_podtext">Что нас радует осенью?</span></div>
 <ul>
 <li><a href="#">Астры</a></li>
 <li><a href="#">Георгины</a></li>
 <li><a href="#">Хризантемы</a></li>
 <li><a href="#">Флоксы</a></li>
 </ul>
 </li>
 <li><div class=zima>Зимние цветы<br>
 <span class="button_podtext">Чем восхищаемся зимой?</span></div>
 <ul>
 <li><a href="#">Азалия</a></li>
 <li><a href="#">Камелия</a></li>
 <li><a href="#">Декабрист</a></li>
 <li><a href="#">Орхидея</a></li>
 </ul>
 <li><div class=vesna>Весенние цветы<br>
 <span class="button_podtext">Что нас радует весной?</span></div>
 <ul>
 <li><a href="#">Подснежники</a></li>
 <li><a href="#">Ландыши</a></li>
 <li><a href="#">Тюльпаны</a></li>
 <li><a href="#">Нарциссы</a></li>
 </ul>
 </li>
</ul>

</div>
</body>

<script>
$("#accordion > li > div").click(function(){//при нажатии на любой div
if(false == $(this).next().is(':visible')) {// вызывается подменю..
$('#accordion ul').slideUp(280);//сворачиваем
}
$(this).next().slideToggle(280);
}); 


$("#but1").click(function(){ $("#accordion ul").slideUp(3000)});
$("#but2").click(function(){ $("#accordion ul").slideDown(3000)});

 

 </script> 

</html>
Код:
body {
        /* background: #696969; */
		background: url('images/cveti2.ipeg');
    }

#menu_pop {
 padding: 20px 20px 20px 20px;
 margin: 40px 20px 0 20px;
 width: 280px;
 border-radius: 6px;
 box-shadow:  0px 1px 5px #000;
}

#accordion {
 list-style: none;
 padding: 0px;
 margin: 0px;
}

#accordion .button_podtext {
 font-size: 9px;
 color: #b1b1b1;
}

#accordion div {
 display: block;
 cursor: pointer;
 text-decoration: none;
 display: block;
 padding: 8px 0px 8px 11px;
 background: #000;
 color: #fff;
 font-size: 12px;
 font-family: tahoma;
 background: url('images/bg.png') 0px 0px;
 text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
 list-style: circle;
}

#accordion div:hover {
 background: url('images/bg.png') 0px -44px;
}

#accordion ul a {
 color: #777;
}

#accordion ul {
 list-style: none;
 padding: 5px;
 font-size: 10px;
 font-family: Tahoma;
 background: #1a1a1a;
 box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
 display: none;
}

#accordion ul li {
 font-weight: normal;
 cursor: auto;
 padding: 3px 7px;
}

#accordion a {
 text-decoration: none;
 
}

#accordion a:hover {
 text-decoration: underline;
 color:#FF0000;
}
lisica198808 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимированное заполнение ячеек таблицы StringGrid разными способами dubsteppaman Помощь студентам 15 06.04.2015 13:59
горизонтальное анимированное меню johny_03 JavaScript, Ajax 1 16.11.2011 18:17
Как создать анимированное изображение Nikolaj1 Общие вопросы C/C++ 4 25.03.2010 17:12
Анимированное изображение в Delphi Lorden Помощь студентам 8 26.12.2009 01:56
b-cumulus – анимированное Облако тегов НА РАБОЧЕМ СТОЛЕ!!! Lok_8 Фриланс 7 23.10.2009 09:20