Доброго времени суток!
За основу было взято выпадаюее меню по клику. Стиль и оформление передалал, но возникла необходимость, чтоб при активном меню, оформление кнопки меню менялось.
Само меню - это в окно html-верх:
Код:
<style> /* Стиль всплывающего меню */
.splLink {width: 190px; height: 20px; border: 2px solid yellow; text-align: center; font-family: Gothic century; font-size: 14px; font-weight : bold; padding : 5px 5px 5px 5px; color : #c3fbfd; margin-left: 15px; margin-top: -10px;}
.splCont {height: auto; width: 300px; background: #479cc8; padding: 5px; z-index: 1000; margin-top: 10px; border: 2px solid #2727dd; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center; color : #fbf9e1;}
/* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splLink {
border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
box-shadow:0px 5px 18px #003A70;
-webkit-box-shadow:0px 5px 18px #003A70;
-khtml-box-shadow:0px 5px 18px #003A70;
-moz-box-shadow:0px 5px 18px #003A70;
}
.splCont {background-color: transparent !important; background-image: url("https://upforme.ru/uploads/000e/a7/ab/34-1.png");
border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
box-shadow:0px 5px 14px #8B6C52;
-webkit-box-shadow:0px 5px 14px #8B6C52;
-khtml-box-shadow:0px 5px 14px #8B6C52;
-moz-box-shadow:0px 5px 14px #8B6C52;
}
.splCont:first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
font-size: 200% !important; /* Размер шрифта первого символа */
color: #88f4fe; /* Красный цвет текста */
} /* Конец Стиля всплывающего меню */
</style>Это в объявлении :
Код:
<!-- меню в объявлении --> <table style="width: 98%"> <tr> <td><DIV><div class=splLink>Инфо пользователя</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Здесь должно быть информационное табло пользователя </DIV></DIV></td> <td><DIV><div class=splLink>Последние сообщения</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Здесь отображаться последние 5 сообщений </DIV></DIV></td> <td><DIV><div class=splLink>Третий контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Ваш Контент 3 </DIV></DIV></td> <td><DIV><div class=splLink>Четвертый контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont> Ваш Контент 4 </DIV></DIV></td> </tr> </table>
И сам скрипт:
Код:
<!--Спойлер - контейнер-->
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>Нужно модифицировать скрипт, чтоб менялось оформление кнопок, что-то типа статуса .active, например в стиле прописать:
Код:
.splLink {width: 190px; height: 20px; border: 2px solid yellow; text-align: center; font-family: Gothic century; font-size: 14px; font-weight : bold; padding : 5px 5px 5px 5px; color : #c3fbfd; margin-left: 15px; margin-top: -10px;}
.splLink .active {width: 190px; height: 20px; border: 2px solid red; text-align: center; font-family: Gothic century; font-size: 14px; font-weight : bold; padding : 5px 5px 5px 5px; color : #c3fbfd; margin-left: 15px; margin-top: -10px;}И чтоб скриптом выполнялась смена статусов.
Просьба помочь с модифицированием скрипта.
Отредактировано Кофеман (Вт, 15 Мар 2011 11:51:29)
