Хотел бы, чтоб можно было сделать информационное табло по структуре, подобное как на этом сайте: Ведьмак
Но чтоб оно было не в шапке форума, а с левого края. Чтоб при нажатии на кнопку, например, "новости", выдвигалась панелька, поверх форума. А повторное нажатие приводило к обратному эффекту.
Также хотелось бы, чтоб эта полоса "информационных кнопок" двигалась при прокрутке - то есть всегда была с краю, сколько бы ты не прокручивал и его можно было бы увидеть на любой страничке форума.
Хотелось бы, чтоб при нажатии на кнопку инф.панели она плавно менялась на другую
Информационное табло
Страница: 1
Сообщений 1 страница 7 из 7
Поделиться122.09.11 21:20
- Бестелесный дух прошлого
- Уважение: +10
Поделиться222.09.11 21:25
- Бестелесный дух прошлого
- Уважение: +10
Надеюсь, вы не откажите... Ну позяяяя ^___^
Поделиться323.09.11 00:52
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
I.E.R.H.O.N Чо нидь такое по-быстрому
Код:
<style>
#table000 {
position:fixed;
z-index:3000;
left:0;
top:40%;
}
#menu span {
display:block;
position:relative;
border:solid red 2px;
padding: 7px 7px;
margin-right: 5px;
margin: 15px 4px!;
width: 120px;
text-decoration: none;
color:#641C22;
font-size:13px;
text-shadow:#9C706D 1px 1px 2px;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}
#submenu {
padding: 5px;
height: 200px;
text-align: left;
font-size: 12px;
width: 720px;
}
.submenutext {
text-align: center;
background:#F9F1DD;
position:absolute;
width:100%;
max-width: 720px;
display: none;
height: 260px!important;
}
.submenutext img {
right: 0;
}
.bgdiv {
background:url(http://savepic.net/744293.png) right top repeat-y;
position:relative;
text-align: left;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
/*$(".tabs span:first").addClass("active").show();
$("td.#MenuTxT div.submenutext:first").show();*/
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").css({"z-index":"-1;"})
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).css({"z-index":"1"})
$("td.#MenuTxT div.submenutext").hide(1200);
$("div."+activeDiv).show(2200);
return false; });
});
</script>
<table id=table000 style="width: 615px;">
<tbody>
<tr>
<td align="right">
<div id="menu"> <b>
<span alt=#sm1 "style="cursor: pointer;">Погода и время</span><br>
<span alt=#sm2 "style="cursor: pointer;">Сюжет,акции и квесты</span><br>
<span alt=#sm3 "style="cursor: pointer;">Соревнования</span><br>
<span alt=#sm4 "style="cursor: pointer;">Администрация</span><br>
<span alt=#sm5 "style="cursor: pointer;">Навигация</span><br>
<span "style="cursor: pointer;">Cкрыть Все!</span><br>
</b>
</div>
</td>
<td id="MenuTxT" valign="top" style="height: 260px;">
<div id="submenu" width="100%">
<div id="sm1" class="submenutext" style="display:block;">
<img src="http://s57.radikal.ru/i156/1103/e8/0de5fbf8ba6f.jpg" height=100% style="position:absolute;"/>
<div class="bgdiv">
Тут пишем свой текст Погода и время
</div>
</div>
<div id="sm2" class="submenutext">
<img src="http://s45.radikal.ru/i110/1103/8e/ff1f90438efe.jpg" height=100% style="position:absolute;"/>
<div class="bgdiv">
Тут пишем свой текст Сюжет,акции и квесты
</div>
</div>
<div id="sm3" class="submenutext">
<img src="http://s52.radikal.ru/i137/1103/68/f5abfea71ce7.jpg" height=100% style="position:absolute;"/>
<div class="bgdiv">
Тут пишем свой текст Соревнования
</div>
</div>
<div id="sm4" class="submenutext">
<img src="http://s005.radikal.ru/i209/1103/b9/6f48143e0754.jpg" height=100% style="position:absolute;"/>
<div class="bgdiv">
Тут пишем свой текст Администрация
</div>
</div>
<div id="sm5" class="submenutext">
<img src="http://s013.radikal.ru/i325/1103/08/c1bd36b219b1.jpg" height=100% style="position:absolute;"/>
<div class="bgdiv">
Тут пишем свой текст Навигация
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>(ставим куда хотца (*Но лучше в Объявление или HTML верх
Поделиться423.09.11 05:29
- Бестелесный дух прошлого
- Уважение: +10
Спасибо, можно узнать, как настроить теперь сами кнопки? Например, вместо них использовать картинки, при нажатие которые они сменяются на другие.
Также хочется узнать часть кода, которые отвечают за ширину и длину этой панели.
Поделиться523.09.11 10:03
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
I.E.R.H.O.N написал(а):
Спасибо, можно узнать, как настроить теперь сами кнопки? Например, вместо них использовать картинки, при нажатие которые они сменяются на другие.Также хочется узнать часть кода, которые отвечают за ширину и длину этой панели.
<span alt=#sm1 "style="cursor: pointer;">Погода и время</span><br>
<span alt=#sm2 "style="cursor: pointer;">Сюжет,акции и квесты</span><br>
<span alt=#sm3 "style="cursor: pointer;">Соревнования</span><br>
<span alt=#sm4 "style="cursor: pointer;">Администрация</span><br>
<span alt=#sm5 "style="cursor: pointer;">Навигация</span><br>
<span "style="cursor: pointer;">Cкрыть Все!</span><br>
Вместо красного текста - ставим картинки. Картинки сменяцо - покак не будут -если есть возможность - сделайте их полупрозрачными,
меняется фон за ними - цвет можно настроить
Код картинки
<img src="Ваша Ссылка"/>
Если нужна смена Картинок - Используйте тогда скрипт Уриверсальной кнопки Скрытия - Каждую кнопку Позиционируем в нужное Место
Каждому Раскрываемому Блоку - приписываем своё индивидуальное id и ставим в нужное место..
Минус - сворачивание - не будет продольным
Плюс = смена картинки
Отредактировано Deff (23.09.11 10:23)
Поделиться623.09.11 15:54
- Бестелесный дух прошлого
- Уважение: +10
Deff, как изменить размеры кнопок и расстояние между ними? А то я уже наворотил по неопытности.
Поделиться725.09.11 12:53
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
I.E.R.H.O.N написал(а):
Deff, как изменить размеры кнопок и расстояние между ними? А то я уже наворотил по неопытности.
#menu span {
display:block;
position:relative;
border:solid red 2px;
padding: 7px 7px;
margin-right: 5px;
margin: 15px 4px!;width: 120px;
text-decoration: none;
color:#641C22;
Пробуйте менять цифры красным - первые две - отвечают за высоту и расстояние между кнопками по высоте
120 - за длину кнопки
-по моему - так ...
Страница: 1
