Gamer`s Club

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

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


Вы здесь » Gamer`s Club » Скрипты. » Боковые панели, всплывающее (выпадающее) меню.


Боковые панели, всплывающее (выпадающее) меню.

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

1

Сейчас очень популярна боковая панель.
Так вот скрипт:
1.Вставляем это в ХТМЛ-ВЕРХ

Код:
<style>
#pun {
  margin: auto 20px auto 185px;
  width : 870px;}
.sidbar {background: transparent url(http://i009.radikal.ru/0908/34/c646503d774e.png); width: 188px; height: 1600px; border: 1px solid; position: absolute; z-index: 1000;  top: 0px; right: 310px; left: 5px;}
.sidbar h1 , .sidbar h2 , .sidbar h3 {
background:  transparent  url(http://i041.radikal.ru/0908/f8/606ac58d6426.png); height: 17px; text-align: center; color: #496690; border: 0px none; width: 90%; margin: auto;}
.sidbar p {padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; text-align: center;}
</style>
<div class="sidbar">...</div>

2. Это мы только создали место для боковой панели.
Находим строчку:

<div class="sidbar">...</div>

И вместо ...  вставляем мини-дополнение , которые будут написаны далее.
3. НЕ ЗАБЫВАЙТЕ ,ЧТО В ЭТИХ МИНИ-ДОПОЛНЕНИЯХ НЕОБХОДИМО ИЗМЕНЯТЬ ИНФОРМАЦИЮ ПОД СВОЙ ФОРУМ!
Мини-приложение "Приветствие гостей".

Код:
<h1>Добро пожаловать</h1><p><script
        language="JavaScript">
<!--begin fantasyflash.ru
var h=(new Date()).getHours();
if (h > 24 || h <6) document.write('<b>Доброй ночи!</b> ') ;
if (h > 6 && h < 12) document.write('<b>Доброе утро!</b> '); 
if (h > 12 && h < 18) document.write('<b>Добрый день! </b>'); 
if (h > 18 && h < 24) document. write('<b>Добрый вечер!</b> '); 
//-->
</script>  Рады приветствовать Вас на форуме "Не про что ". У нас есть скрытые разделы, поэтому рекомендуем <a href="http://neprochto.forumbb.ru/login.php">войти</a> под своим аккаунтом или пройти несложный процесс <a href="http://neprochto.forumbb.ru/register.php">регистрации</a>.</p><br>

Мини-приложение "Время и дата основания форума".

Код:
<h2>Текущее время</h2><br><p><iframe name="fantasy" src="http://fantasyflash.ru/vr2/vr12.htm" height="174" width="164" scrolling="no" frameborder="0"></iframe><br><br><SCRIPT language=JavaScript>
<!--
d0 = new Date('June 20, 2009');
d1 = new Date();
dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);
document.write('<b>Наш форум живет</b> ' + Math.round(dt) + '<b>-й день.</b>');
-->
</SCRIPT></p>

Мини-приложение "Новости".

Код:
<h3>Новости форума</h3>
<p>
<a href="#">Новость 1</a><br>
<a href="#">Новость 2</a><br>
<a href="#">Новость 3</a><br>
<a href="#">Новость 4</a><br>
<a href="#">Новость 5</a><br>
<a href="#">Новость 6</a><br>
<a href="#">Новость 7</a><br>
<a href="#">Новость 8</a><br>
<a href="#">Новость 9</a><br>
<a href="#">Новость 10</a><br>
</p>

Можете добавить новостей столько сколько Вам необходимо.
Так будет выглядеть:
http://i052.radikal.ru/1101/29/4786bbb24503.jpg
Мини-приложение "Навигатор по форуму".

Код:
<h3>Навигатор по форуму</h3><br>
<p>
<form> 
<select name="select" class="forminput" onchange="location.href=(form.select.options[form.select.selectedIndex].value)"> 
 <option>-- Навигатор --</option> 
  <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=282"><small>о1. Правила</small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?pid=13804#p13804"><small>о2. Книга жалоб </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=188"><small>o3. Занятые </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=285"><small>o4. Шаблоны </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=286"><small>o5. Репутация. </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewtopic.php?id=549"><small>o6. Подпись. </small></option> 
 <option value="http://trinitycollege.forumbb.ru/viewforum.php?id=98"><small>o7. Реклама.</small></option> 
</select> 
</form> 
 <br><br>
Просто выбирайте нужный раздел и Вы автоматически будете перемещены в него!</p>

Это не поиск! А ссылки на разделы!
Мини-приложение "Баннер".

Код:
<h3>Наш баннер</h3><br>
<p>
 <a href="http://narutosvobod.ru"><img src="http://narutosvobod.ru/uploads/0003/5f/e1/536845-3.gif"  title="Ролевая Игра по аниме Наруто"Narutosvobod RPG" /></a><br><br> 
Если Вы желаете помочь развиться нашему форуму, просто скопируйте следующий код и вставьте в любое удобное для Вас место:<br><br><TEXTAREA class=TEXTAREA rows=3 cols=25 name=S3> &lt;a href="http://narutosvobod.ru"&gt;&lt;img src="http://narutosvobod.ru/uploads/0003/5f/e1/536845-3.gif"  title="Ролевая Игра по аниме Наруто"Narutosvobod RPG" /&gt; </TEXTAREA></p>

Мини-приложение "Баннеры дружественных форумов".

Код:
<h3>Друзья форума</h3>
<p>
Предлагаем Вам посетить форумы наших друзей:
<center><marquee width="100" height="100" Direction="down" scrollamount="4" onMouseOut="document.all.abc.start()" onMouseOver="document.all.abc.stop()"><center>
<a href="http://style4you.org.ru" target=_blank><img 
src="http://pic.ipicture.ru/uploads/090516/2kbZTC1LZq.gif" alt="Фабрика Стиля!" border="0" 
width="88" hight="31"></a>
 
<a href="http://animetokyo.ru/"><img 
src="http://s55.radikal.ru/i149/0902/29/2695797162af.gif" alt="†Токио: Отражение 
Реальности†"></a>
 
<a href="http://narutoclan.ru"><img src="http://narutoclan.ru/banner.gif" alt="Naruto 
Clan"></a>
 
<a href="http://narutosoul.ru/" target=_blank><img height=31 title="NarutoSoul - скачать, аниме, манга, субтитры, наруто, фанфики, игры, музыка, видео, статьи" 
src="http://narutosoul.ru/banners/banner_88x31.gif" width=88 border=0></a>
 
<a href="http://naruto-online.net.ru/"><img title="РПГ Наруто" 
src="http://naruto-online.net.ru/banner.gif" border="0" height="31" width="88"></a>
 
<a href="http://narutosite.ru/" target="_blank"><img 
src="http://i024.radikal.ru/0906/d4/a243e9e8a0a7.png" border="0" width="88" height="31"

выглядеть будет примерно так:
http://s010.radikal.ru/i314/1101/19/c2f035b8fc43.jpg

0

2

Выпадающее меню 1

Код:
<form 
method="post" name="nameform"> <font color="#CCCCCC" 
size="2" face="Times New Roman"><select name="tanyasmenu" 
size="1" style="BACKGROUND: #CCCCCC; BORDER-BOTTOM: outset; BORDER-LEFT: 
outset; BORDER-RIGHT: outset; BORDER-TOP: outset; COLOR: #003366; FONT-FAMILY: 
Times New Roman; FONT-SIZE: 12px"> <option selected value="ВАША ССЫЛКА">ПРАВИЛА</option> 
<option value="ВАША ССЫЛКА">Активные темы</option> 
<option value="ВАША ССЫЛКА">ВЫХОД</option> 
</select> <input type="button" value="Перейти" onclick="location 
= document.nameform.tanyasmenu.options [document.nameform.tanyasmenu.selectedIndex].value;" 
style="BACKGROUND: #CCCCCC; COLOR: #003366; FONT-FAMILY: Times New Roman; 
FONT-SIZE: 12px"> </form>

http://i012.radikal.ru/1101/24/a20d5c2e9985.jpg http://i037.radikal.ru/1101/9c/9ad49410080d.jpg

Соответственно изменяя "ВАША ССЫЛКА", надписи ПРАВИЛА ... , цвета фона и текста можно подогнать данный скрипт под конкретный стиль форума.

<option value="ВАША ССЫЛКА">Активные темы</option>  кол-во строк (пунктов меню) ставите столько сколько необходимо, вставляя свои данные.

0

3

Выпадающее меню 2.
В объявлении или ещё где-то стоит несколько блоков, при нажати на которые открывается меню
http://s015.radikal.ru/i332/1101/79/4b58fe75dc16.jpg

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(http://tps.bbmy.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>

Эта часть кода отвечает за оформление меню.
Ниже приведены доступные для пользователей изменения в дизайне:

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; менять одновременно с предыдущим значением ширины (ширина основных блоков).

.spll div .splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.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(http://tps.bbmy.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; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).
HTML-низ:

Код:
<!--Спойлер - контейнер-->
<script type="text/javascript" src="http://himlibrary.narod.ru/javscript/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>

Содержимое меню.

а).По-умолчанию в коде содержится 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.

0

4

Меню с исчезающими разделами 3.
4 ссылки, при наведении на которые - разное меню
В HTML-верх:

Код:
<style type="text/css">
#part1,#part2,#part3,#part4 {
z-index: 2;
position: absolute;
visibility: hidden}
</style>

В HTML-низ:

Код:
<script type="text/javascript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
</script>

В объявление

Код:
<a href="" onmouseover="part1ON()" onmouseout="part1OFF()">Линка 1</a>
<a href="" onmouseover="part2ON()" onmouseout="part2OFF()">Линка 2</a>
<a href="" onmouseover="part3ON()" onmouseout="part3OFF()">Линка 3</a>
<a href="" onmouseover="part4ON()" onmouseout="part4OFF()">Линка 4</a>

<div id="part1" class="container">
Контейнер номер 1
</div>

<div id=part2 class="container">
Контейнер номер 2
</div>

<div id=part3 class="container">
Контейнер номер 3
</div>

<div id="part4" class="container">
Контейнер номер 4
</div>

Кроме части для обьявления ничего менять ненадо!

Содержимое появляющегося меню находиться между тегами <div ...></div>. Можно вставлять туда всё, что угодно: картинки, ссылки, кнопки, таблицы и тд, хоть еще одно всплывающее меню!

0

5

Меню с всплывающими разделами 4. Работу меню (в доработанном под форум варианте) можно наблюдать на нашем форуме  :) .

Эта версия меню основана только на HTML и CSS, не будет грузить форум лишними скриптами и более простая в использовании.

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

Код:
<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>

То же самое, но вместо заголовков будут картинки:

Код:
<ul id="menu-css"> 
<li><img src="ссылка на картинку 1" ><ul><li>Подсказка 1</li></ul></li> 
<li><img src="ссылка на картинку 2" ><ul><li>Подсказка 2</li></ul></li> 
<li><img src="ссылка на картинку 3" ><ul><li>Подсказка 3</li></ul></li> 
</ul>

Всё остальное ставим в html-верх между тегами <style type="text/css"> и </style>

Сделает меню горизонтальным:

Код:
#menu-css
{
margin: 0; 
padding: 0; 
list-style: none; 
}
#menu-css li
{ 
position: relative; 
float: left;
margin: 3px;
}

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

Код:
li ul 
{ 
position: absolute; 
display: none; 
border: 1px solid black;
background: #DADADA
}

Заставит подсказку появляться при наведении мышки на заголовок:

Код:
li:hover ul{display: block;}

0


Вы здесь » Gamer`s Club » Скрипты. » Боковые панели, всплывающее (выпадающее) меню.