PR-агентство "Достучаться до небес"

Объявление

Добро пожаловать на наш форум!

Наше агенство предоставляет различные услуги, способсвующие раскрутке вашего форума.

Мы работаем как за „спасибо”:

- критика дизайна

- критика контента

- подборка ключей

- автосерфинг

Так и в ответ за вашу активность на нашем форуме:

- добавление в каталоги

- добавление в соц. закладки и поисковики

- взаимный пиар по форумам системы майбб

- наполнение контентом

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

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

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

Вы здесь » PR-агентство "Достучаться до небес" » -каталог скриптов- » Выплывающее\выпадающее меню в таблице

Выплывающее\выпадающее меню в таблице

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: ₪ happiness ₪
  • ученик
  • ₪ happiness ₪
  • Зарегистрирован: 2011-08-19
  • Приглашений: 0
  • Сообщений: 76
  • Уважение: +8
  • Провел на форуме:
    12 часов 49 минут
  • Последний визит:
    2011-12-07 01:09:30

Способ первый.
При нажатии на кнопку выпадает меню.

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

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; }
.spll div .splCont {height: auto; width: 300px; background:  url(https://forumupload.ru/uploads/0003/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" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

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

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

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

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

2. Заполнение меню.

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

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

Код:
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></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 div .splCont {height: auto; width: 300px; background:  url(https://forumupload.ru/uploads/0003/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(https://forumupload.ru/uploads/0003/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; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).
Внимание! Производить какие-либо изменения во второй части кода ЗАПРЕЩЕНО!

0

2

  • Автор: ₪ happiness ₪
  • ученик
  • ₪ happiness ₪
  • Зарегистрирован: 2011-08-19
  • Приглашений: 0
  • Сообщений: 76
  • Уважение: +8
  • Провел на форуме:
    12 часов 49 минут
  • Последний визит:
    2011-12-07 01:09:30

Способ второй

При наведении на кнопку выпадает меню.

Первым действием создадим небольшой список, который в последствии и станет нашим меню

Код:
<ul id="menu-css">
<li>1<ul><li>Подсказка 1</li></ul></li>
<li>2<ul><li>Подсказка 2</li></ul></li>
<li>3<ul><li>Подсказка 3</li></ul></li>
<li>4<ul><li>Подсказка 4</li></ul></li>
</ul>

и предадим ему вид горизонтального меню

Код:
<style type="text/css">
#menu-css
{
	margin: 0; 
	padding: 0; 
	list-style: none; 
}
#menu-css li
{ 
	position: relative; 
	float: left;
	margin: 3px;
}
</style>

Теперь спрячем подсказки, ведь они должны появляться только при наведении мышки

Код:
<style type="text/css">
li ul 
{ 
	position: absolute; 
	display: none; 
	border: 1px solid black;
	background: #DADADA;
}
</style>

Ну и наконец, последним действием мы заставим подсказку появляться при наведении мышки на текст

Код:
<style type="text/css">
li:hover ul{display: block;}
</style>

Если хотите,что бы ваше меню было посередине,поставте теги <center>..... </center>
+есть еще вариант.Если предыдущий не прокатил,попробуйте этот.

То что в HTML верх остаётся по прежнему а в объяву поставьте это

Код:
<center><table border="0" width="55%" cellpadding="20" cellspassing="10">
    <tbody align="center">
    <tr>
    <td width="20%" height="50px"><ul id="menu-css">
<li><b><center>
Контейнер 1
</center></b>

<ul><li>
Содержимое 1
</ul></li> </td>

    <td width="20%" height="50px">
<li><b><center>
Контейнер 2
</center></b>

<ul><li>
Содержимое 2
</li></ul> </td>

    <td width="20%" height="50px">

<li><b><center>
Контейнер 3
</center></b>

<ul><li>
Содержимое 3
</li></ul> </td>
    

<td width="20%" height="50px">

<li><b><center>
Контейнер 4
</center></b>

<ul><li>
Содержимое 4
</li></ul> </td>

    <td width="20%" height="50px"><ul id="menu-css">
<li><b><center>
Контейнер 5
</center></b>

<ul><li>
Содержимое 5
</li></ul> </td>

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

0

Страница: 1

Вы здесь » PR-агентство "Достучаться до небес" » -каталог скриптов- » Выплывающее\выпадающее меню в таблице

Рейтинг форумов | Создать форум бесплатно