Доброго времени суток!
За основу было взято выпадаюее меню по клику. Стиль и оформление передалал, но возникла необходимость, чтоб при активном меню, оформление кнопки меню менялось.
Само меню - это в окно 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://forumupload.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)