Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Как поменять вид нумерации страниц тем?автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28
Помогите разобраться со выплывающей панелью...
+2
Альберт Вескер
NaYami
Участников: 6
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 2 из 2
Страница 2 из 2 • 1, 2
Помогите разобраться со выплывающей панелью...
Первое сообщение в теме :
Помогите разобраться с панелью, что бы сунуть меню/навигацию под всплывающую панель как ТУТ! но так что бы структура html осталась примерно такой же.
HTML
CSS
jQuery
Помогите разобраться с панелью, что бы сунуть меню/навигацию под всплывающую панель как ТУТ! но так что бы структура html осталась примерно такой же.
HTML
- Код:
<div id="slidedown_top"></div> <!-- slidedown_top -->
<div id="slidedown_content">
<div class="content">
<div class="block">
<img src="footerAuthor.gif"/><br/>
<p>A passionate web designer, developer who keens to contribute to web development industry.</p>
<p>Feel free to say hi to me, or follow me on twitter. </p>
</div>
<div class="block">
<img src="footerTwitter.gif"/><br/>
<ul>
<li>I have a new inspiration using easing method, stay tuned!</li>
<li>Dock menu with jQuery! pretty cool huh...</li>
</ul>
</div>
<div class="block">
<img src="footerPartner.gif"/><br/>
<ul>
<li>Smashing Magazine</li>
<li>Vandelay Design</li>
<li>Sixrevision</li>
<li>CSS Mania</li>
<li>Web Designer Depot</li>
<li>Queness</li>
</ul>
</div>
<div class="clear"></div>
</div> <!-- content -->
<div class="footer">
</div> <!-- footer -->
</div> <!-- slidedown_content -->
CSS
- Код:
<style>
body {
margin:0;
padding:0
}
#slidedown_top {
height: 70px;
background-color:#666;
}
#slidedown_bottom {
position: absolute;
width: 100%;
height:100%;
background-color:#666;
}
slidedown_content {
position: absolute;
width: 100%;
height: 250px;
top: -205px;
text-align:center;
background:url(bg.gif) repeat-x 0 bottom;
z-index:999;
}
#slidedown_content .content {
margin:0 auto;
width:830px;
height:205px;
}
/* Styles for content */
#slidedown_content .content .block {
float:left;
width:250px;
padding:0 4px 0 4px;
margin: 0 4px 0 4px;
text-align:left;
font-family:georgia;
font-size:11px;
color:#ccc;
}
slidedown_content .footer {
height:40px;
}
#slidedown_content .content li {
padding:0;
margin:4px 0
}
.clear {clear:both}
</style>
jQuery
- Код:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
var top = '-' + $('#slidedown_content .content').css('height');
var easing = 'easeOutBounce';
$('#slidedown_top').mouseover(function() {
$('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});
});
$('#slidedown_bottom').mouseover(function() {
$('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});
});
});
</script>
Последний раз редактировалось: NaYami (Июль 17th 2011, 21:46), всего редактировалось 2 раз(а)
Re: Помогите разобраться со выплывающей панелью...
Но как?..я не знаю.. совсем...
я в профиле, но видны ссылки, как для гостя...
а тут получилось как-то странно..Dana Domirani пишет:Есть такая тема - https://help.forum2x2.ru/t17776-topic#143749
я в профиле, но видны ссылки, как для гостя...
Re: Помогите разобраться со выплывающей панелью...
Извиняюсь, а почему там ссылки на картинки кириллицей прописаны?
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Помогите разобраться со выплывающей панелью...
пока что нечего вместо них ставить... неужели в этом проблема?...
и кстати там будут оставаться такие "пустые места" вместо того что скрылось?
и кстати там будут оставаться такие "пустые места" вместо того что скрылось?
Re: Помогите разобраться со выплывающей панелью...
А Вы класс basemn меню навигации присвоили? Пункт 2 туториала.
Поставьте вот так:
Пример: http://calidasa.mirbb.net/forum
Можете зайти как
ник: calidasa
пароль: calidasa12
и проверить.
2. Прятать кнопки базового меню поштучно через CSS не надо. Откройте шаблон overall_header (Верхняя часть страницы) и замените фрагмент менюна
- Код:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>Таким образом базовое меню будет скрыто, а ячейка с кнопками навигации получит индивидуальный класс. Это нужно для корректной работы скрипта.
- Код:
<table style="display:none">
<tr>
<td class="basemn">{GENERATED_NAV_BAR}</td>
</tr>
</table>
Поставьте вот так:
- Код:
<a href="/portal">Портал</a><br />
<a href="/forum">Форум</a><br />
<a href="/faq">ЧаВо</a><br />
<a href="/search">Поиск</a><br />
<a href="/memberlist" rel="nofollow">Юзеры</a><br />
<a href="/groups" rel="nofollow">Группы</a><br />
<a href="/profile?mode=editprofile" id="mn_prof">Профиль<br /></a>
<a href="/msg.forum?folder=inbox" id="mn_ls">Мои ЛС<br /></a>
<a href="/login.forum?logout" id="mn_logout">Выход<br /></a>
<a href="/login" id="mn_login">Вход</a><br />
<a href="/profile?mode=register" id="mn_reg">Регистрация</a><br />
Пример: http://calidasa.mirbb.net/forum
Можете зайти как
ник: calidasa
пароль: calidasa12
и проверить.
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: Помогите разобраться со выплывающей панелью...
Спасибо большое, я вам премного благодарна*_* вечерком попробую установить и отпишусь))))
Re: Помогите разобраться со выплывающей панелью...
Благодарю! Я вас на руках носить готова за помощь.
Страница 2 из 2 • 1, 2
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 2 из 2
Права доступа к этому форуму:
Вы не можете отвечать на сообщения