Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Выпадающее меню. rps

Сообщений 41 страница 45 из 45

1

Популярное сейчас на многих форумах меню. Суть проста: в объявлении или ещё где-то стоит несколько блоков, при нажати на которые открывается меню.

Документация:

1. Установка.
В HTML-верх ставите код:

Код:
<style>
    div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
    .spll {width: 130px; height: 70px; }
    .splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.ru/uploads/0005/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>

В HTML-низ тавите скрипт:

Код:
<!--Спойлер - контейнер-->
<script type="text/javascript">
    $(document).ready(function(){
        $('.splLink').click(function(){
            var aaa=$(this).siblings("div.splCont");
            $('.spll').find('div.splCont.Active').each(function(){
                if($(this).html()!=aaa.html()){$(this).removeClass('Active').hide('normal');}
            });
            $(this).parent().children("div.splCont").addClass('Active').toggle('normal');
            return false;
        });
    });
</script>

А это ставите туда, где хотите увидеть само меню:

Код:
<table style="width: 90%">
    <tr>

        <td><div class="spll">
            <div class=splLink href="">Первый контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то1</DIV>
        </div></td>
        <td><div class="spll">
            <div class=splLink href="">Второй контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то2</DIV>
        </div></td>
        <td><div class="spll">
            <div class=splLink href="">Третий контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то3</DIV>
        </div></td>
        <td><div class="spll">
            <div class=splLink href="">Четвёртый контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то4</DIV>
        </div></td>
        <td><div class="spll">
            <div class=splLink href="">Пятый контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то5</DIV>
        </div></td>
        <td><div class="spll">
            <div class=splLink href="">Шестой контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то6</DIV>
        </div></td>

    </tr>
</table>

2. Заполнение меню.
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.

а). По-умолчанию в коде содержится 6 блоков. По своему усмотрению Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:

Код:
        <td><div class="spll">
            <div class=splLink href="">Первый контейнер</div>
                <DIV style="DISPLAY: none; position: absolute;" class=splCont>
                    Тут будет что-то1</DIV>
        </div></td>

б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:

а).

Код:
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).

б).

Код:
.spll {width: 130px; height: 70px; }

Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).

в).

Код:
.splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.ru/uploads/0005/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}

Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(http://tps.bbmy.ru/uploads/0005/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

Теги: Скрипты и дополнения, Меню,Выпадающее меню

+4

41

eyre; написал(а):

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

morgana написал(а):

да, просто ставьте после каждой всплывающей таблицы тег <br>

У меня что-то не получается .__. И вроде как <br> - это перенос на другую строку, разве нет? А нужно в строчку.
- - -
всё, разобралась, вопрос снят.

Отредактировано Immenzehe (21.08.2011 17:45:27)

0

42

У меня проблема. Я тут решил с умничать и вот эти "контейнеры" поставил в таблицу но когда я на них жму они не открываются в чем проблема

0

43

Как сделать кнопочки Форум
Участники
Награды
Правила
Поиск
Профиль
Сообщения
Картинками?

Отредактировано Pett<Q_Q> (21.09.2011 19:42:50)

0

44

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

0

45

В принципе, автозагружаемая библиотека jQuery обновлённой версии уже давно не требует спецфиских цифр в HTML коде, стоит обновить ин-фу - упростив код HTML, - украсив эффектами сss3 

/cтиль меню/
В HTML верх

Код:
<style> /* Стиль всплывающего меню */
.splLink {width: 100px; height: 40px; border: 0px solid #FFD700; text-align: center; font-family: Gothic century; font-size: 15px; padding: 5px;}
.splCont {height: auto; width: 260px; background: #D2B48C; padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #D2B48C; font-size: 12px; font-family: Lucida Sans Unicode; text-align: center;}

 /* Тень, Прозрачка и Скругление углов во Всплывающем меню */
.splCont {background-color: transparent !important; background-image: url("http://savepic.ru/2408258.png"); 
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    border-radius:15px;

    -webkit-box-shadow:0px 5px 14px #8B6C52;
    -khtml-box-shadow:0px 5px 14px #8B6C52;
    -moz-box-shadow:0px 5px 14px #8B6C52;
     box-shadow:0px 5px 14px #8B6C52;
    /*text-shadow: #FFFFFF 1px 1px 4px !important;
    color: #color: #000000 !important;*/
    }
.splCont:first-letter {
    font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 200% !important; /* Размер шрифта первого символа */
    color: red; /* Красный цвет текста */
   } /* Конец Стиля всплывающего меню */
</style>

В Объявление

Код:
<center><table style="width: 90%">
<tr>

<td><DIV><div class=splLink>Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент 1

</DIV></DIV></td>

<td><DIV><div class=splLink>Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент 2

</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>

<td><DIV><div class=splLink>Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент 5

</DIV></DIV></td>

</tr>
</table></center>

Новую ячейку можно добавить таким кодом >

<td><DIV><div class=splLink>N-ый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>

Ваш Контент

</DIV></DIV></td>

вкладывая между ячейками код <tr></tr> мы можем легко переносить ячейки на новую строку(помня что кол во ячеек в строках должно быть одинаковым (либо прописывая в тегах td colspan="NN" [при нехватке NN ячеек на строчке)

В HTML низ (сокращаем код - уже не нужно вызывать библиотеку jQuery -она уже загружена

Код:
<!--Спойлер - контейнер-->
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

Отредактировано Deff (07.04.2013 10:15:58)

0



Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC