Помощь админам бесплатных форумов на PHPBB3
http://admins.bestforums.org/

Меню в стиле выплывающих картинок
http://admins.bestforums.org/viewtopic.php?f=6&t=379
Страница 4 из 5

Автор:  vikweb [ 30 апр 2014, 20:33 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

cataha писал(а):Просто последний скрипт его поверх этого ставить?

не могли бы вы более понятнее изъяснятся?, ато из вашего вопроса я ни чего не понял, какой последний скрипт, и поверх чего ?

Автор:  cataha [ 30 апр 2014, 20:37 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Вот я поставил перед <head>
<script type="text/javascript" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/jquery.js"></script>

Потом я ставлю
1 этот скрипт
[+]
<div id="main_content">

<div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=49" style="width: 40px; left: 0px;">
<img alt="home" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/home.png">
<span style="display: none;">ЭНЦИКЛОПЕДИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=26" style="width: 40px; left: 40px;">
<img alt="contact" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/email.png">
<span style="display: none;">ВСТРЕЧИ И ОБЩЕНИЕ КОЛЛЕКЦИОНЕРОВ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=27" style="width: 40px; left: 80px;">
<img alt="portfolio" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/portfolio.png">
<span style="display: none;">ДРУГИЕ КОЛЛЕКЦИИ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=47" style="width: 40px; left: 120px;">
<img alt="music" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/music.png">
<span style="display: none;">МЕЛОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=37" style="width: 40px; left: 160px;">
<img alt="video" src=" http://hobby.getbb.ru/images/ranks/hobb ... /video.png">
<span style="display: none;">КИНОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=25" style="width: 40px; left: 200px;">
<img alt="history" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/history.png">
<span style="display: none;">ИСТОРИЯ И АРХЕОЛОГИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=64" style="width: 40px; left: 240px;">
<img alt="calendar" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/calendar.png">
<span style="display: none;">Объявления</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=24" style="width: 40px; left: 280px;">
<img alt="rss" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/rss.png">
<span style="display: none;">ТРЁП</span>
</a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);

</script>












<script type="text/javascript" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/interface.js"></script>


2 Этот куда ставить?
[+]
<table width="100%" cellspacing="0">
<tr>
<td>

<div class="menu">
<div class="menu-left">
<div class="menu-right">

<script type="text/javascript" src="ССЫЛКА НА СКРИПТ/interface.js"></script>

<div id="topmenubg">
<script type="text/javascript">$(document).ready( function() { $('#dock').Fisheye({maxWidth: 80,items: 'a',itemsText: 'span',container: '.dock-container',itemWidth: 40,proximity: 60,halign : 'center'})});</script>
<div class="dock" id="dock">
<div class="dock-container">
<!--Board Index-->
<a class="dock-item" href="{U_INDEX}"><img src="ССЫЛКА на изображение" alt="{SITENAME}" /><span>{SITENAME}</span></a>
<a class="dock-item" href="{U_FAQ}"><img src="ССЫЛКА на изображение" alt="{L_FAQ}" /><span>{L_FAQ}</span></a>
<a class="dock-item" href="{U_SEARCH}"><img src="ССЫЛКА на изображение" alt="{L_SEARCH}" /><span>{L_SEARCH}</span></a>

<!-- IF U_EMAIL_TOPIC --><a class="dock-item" href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}"><img src="ССЫЛКА на изображение" alt="{L_EMAIL_TOPIC}" /><span>{L_EMAIL_TOPIC}</span></a>
<!-- ENDIF -->

<!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><!-- IF S_DISPLAY_PM --><a class="dock-item" href="{U_PRIVATEMSGS}"><img src="ССЫЛКА на изображение" /><span>{PRIVATE_MESSAGE_INFO}</span></a> <!-- ENDIF --><!-- ENDIF -->

<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><a class="dock-item" href="{U_MEMBERLIST}"><img src="ССЫЛКА на изображение" alt="{L_MEMBERLIST}" /><span>{L_MEMBERLIST}</span></a>
<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><a class="dock-item" href="{U_PROFILE}"><img src="ССЫЛКА на изображение" alt="{L_PROFILE}" /><span>{L_PROFILE}</span></a>
<!-- ELSEIF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><a class="dock-item" href="{U_REGISTER}"><img src="ССЫЛКА на изображение" alt="{L_REGISTER}" /><span>{L_REGISTER}</span></a>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT --><a class="dock-item" href="{U_LOGIN_LOGOUT}"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onmouseover="delay1 = setTimeout('document.getElementById(\'quick-login\').style.zIndex=\'2\'', 500);" onmouseout="clearTimeout(delay1)"<!-- ENDIF -->><img src="ССЫЛКА на изображение" alt="{L_LOGIN_LOGOUT}" /><span>{L_LOGIN_LOGOUT}</span></a><!-- ENDIF -->
</div>
</div>
</div>
</td>
</tr>
</table>

Автор:  cataha [ 30 апр 2014, 20:39 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

cataha писал(а):Вот я поставил перед <head>
<script type="text/javascript" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/jquery.js"></script>

Потом я ставлю
1 этот скрипт
[+]
<div id="main_content">

<div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=49" style="width: 40px; left: 0px;">
<img alt="home" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/home.png">
<span style="display: none;">ЭНЦИКЛОПЕДИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=26" style="width: 40px; left: 40px;">
<img alt="contact" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/email.png">
<span style="display: none;">ВСТРЕЧИ И ОБЩЕНИЕ КОЛЛЕКЦИОНЕРОВ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=27" style="width: 40px; left: 80px;">
<img alt="portfolio" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/portfolio.png">
<span style="display: none;">ДРУГИЕ КОЛЛЕКЦИИ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=47" style="width: 40px; left: 120px;">
<img alt="music" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/music.png">
<span style="display: none;">МЕЛОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=37" style="width: 40px; left: 160px;">
<img alt="video" src=" http://hobby.getbb.ru/images/ranks/hobb ... /video.png">
<span style="display: none;">КИНОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=25" style="width: 40px; left: 200px;">
<img alt="history" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/history.png">
<span style="display: none;">ИСТОРИЯ И АРХЕОЛОГИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=64" style="width: 40px; left: 240px;">
<img alt="calendar" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/calendar.png">
<span style="display: none;">Объявления</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=24" style="width: 40px; left: 280px;">
<img alt="rss" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/rss.png">
<span style="display: none;">ТРЁП</span>
</a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);

</script>












<script type="text/javascript" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/interface.js"></script>


2 Этот куда ставить?
[+]
<table width="100%" cellspacing="0">
<tr>
<td>

<div class="menu">
<div class="menu-left">
<div class="menu-right">

<script type="text/javascript" src="ССЫЛКА НА СКРИПТ/interface.js"></script>

<div id="topmenubg">
<script type="text/javascript">$(document).ready( function() { $('#dock').Fisheye({maxWidth: 80,items: 'a',itemsText: 'span',container: '.dock-container',itemWidth: 40,proximity: 60,halign : 'center'})});</script>
<div class="dock" id="dock">
<div class="dock-container">
<!--Board Index-->
<a class="dock-item" href="{U_INDEX}"><img src="ССЫЛКА на изображение" alt="{SITENAME}" /><span>{SITENAME}</span></a>
<a class="dock-item" href="{U_FAQ}"><img src="ССЫЛКА на изображение" alt="{L_FAQ}" /><span>{L_FAQ}</span></a>
<a class="dock-item" href="{U_SEARCH}"><img src="ССЫЛКА на изображение" alt="{L_SEARCH}" /><span>{L_SEARCH}</span></a>

<!-- IF U_EMAIL_TOPIC --><a class="dock-item" href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}"><img src="ССЫЛКА на изображение" alt="{L_EMAIL_TOPIC}" /><span>{L_EMAIL_TOPIC}</span></a>
<!-- ENDIF -->

<!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><!-- IF S_DISPLAY_PM --><a class="dock-item" href="{U_PRIVATEMSGS}"><img src="ССЫЛКА на изображение" /><span>{PRIVATE_MESSAGE_INFO}</span></a> <!-- ENDIF --><!-- ENDIF -->

<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><a class="dock-item" href="{U_MEMBERLIST}"><img src="ССЫЛКА на изображение" alt="{L_MEMBERLIST}" /><span>{L_MEMBERLIST}</span></a>
<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><a class="dock-item" href="{U_PROFILE}"><img src="ССЫЛКА на изображение" alt="{L_PROFILE}" /><span>{L_PROFILE}</span></a>
<!-- ELSEIF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><a class="dock-item" href="{U_REGISTER}"><img src="ССЫЛКА на изображение" alt="{L_REGISTER}" /><span>{L_REGISTER}</span></a>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT --><a class="dock-item" href="{U_LOGIN_LOGOUT}"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onmouseover="delay1 = setTimeout('document.getElementById(\'quick-login\').style.zIndex=\'2\'', 500);" onmouseout="clearTimeout(delay1)"<!-- ENDIF -->><img src="ССЫЛКА на изображение" alt="{L_LOGIN_LOGOUT}" /><span>{L_LOGIN_LOGOUT}</span></a><!-- ENDIF -->
</div>
</div>
</div>
</td>
</tr>
</table>



Или мне этот не ставить?
1 этот скрипт
[+]
<div id="main_content">

<div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=49" style="width: 40px; left: 0px;">
<img alt="home" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/home.png">
<span style="display: none;">ЭНЦИКЛОПЕДИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=26" style="width: 40px; left: 40px;">
<img alt="contact" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/email.png">
<span style="display: none;">ВСТРЕЧИ И ОБЩЕНИЕ КОЛЛЕКЦИОНЕРОВ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=27" style="width: 40px; left: 80px;">
<img alt="portfolio" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/portfolio.png">
<span style="display: none;">ДРУГИЕ КОЛЛЕКЦИИ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=47" style="width: 40px; left: 120px;">
<img alt="music" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/music.png">
<span style="display: none;">МЕЛОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=37" style="width: 40px; left: 160px;">
<img alt="video" src=" http://hobby.getbb.ru/images/ranks/hobb ... /video.png">
<span style="display: none;">КИНОМАН</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=25" style="width: 40px; left: 200px;">
<img alt="history" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/history.png">
<span style="display: none;">ИСТОРИЯ И АРХЕОЛОГИЯ</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=64" style="width: 40px; left: 240px;">
<img alt="calendar" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/calendar.png">
<span style="display: none;">Объявления</span>
</a>
<a class="dock-item" href="http://hobby.getbb.ru/viewforum.php?f=24" style="width: 40px; left: 280px;">
<img alt="rss" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/rss.png">
<span style="display: none;">ТРЁП</span>
</a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);

</script>












<script type="text/javascript" src="http://hobby.getbb.ru/images/ranks/hobby_getbb_ru/interface.js"></script>

Автор:  vikweb [ 30 апр 2014, 20:42 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

cataha писал(а):1 этот скрипт

cataha писал(а):2 Этот куда ставить?
ну вобщето это не скрипты- это коды
удалите всё что вы делали раньше и сделайте то что я написал тут viewtopic.php?p=2436#p2436

Автор:  cataha [ 30 апр 2014, 20:45 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Сейчас попробую

Автор:  cataha [ 30 апр 2014, 20:56 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Всё получилось только 2 вопросика осталось как поменять сылки на переходы и названия кнопок?

и по выше кнопки сделать?

Автор:  vikweb [ 30 апр 2014, 21:07 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

cataha писал(а):как поменять сылки на переходы и названия кнопок?


на пример в этих строках
<a class="dock-item" href="{U_INDEX}"><img src="ССЫЛКА на изображение" alt="{SITENAME}" /><span>{SITENAME}</span></a>
<a class="dock-item" href="{U_FAQ}"><img src="ССЫЛКА на изображение" alt="{L_FAQ}" /><span>{L_FAQ}</span></a>
<a class="dock-item" href="{U_SEARCH}"><img src="ССЫЛКА на изображение" alt="{L_SEARCH}" /><span>{L_SEARCH}</span></a>

выделенное красным, ссылки
выделенное зелёным, названия

cataha писал(а):по выше кнопки сделать?

поставьте в шаблоне код повыше <!-- INCLUDE breadcrumbs.html -->

Автор:  cataha [ 30 апр 2014, 21:10 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Спасибо большое :dance4:

Автор:  cataha [ 01 май 2014, 11:37 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

vikweb писал(а):
cataha писал(а):как поменять сылки на переходы и названия кнопок?


на пример в этих строках
<a class="dock-item" href="{U_INDEX}"><img src="ССЫЛКА на изображение" alt="{SITENAME}" /><span>{SITENAME}</span></a>
<a class="dock-item" href="{U_FAQ}"><img src="ССЫЛКА на изображение" alt="{L_FAQ}" /><span>{L_FAQ}</span></a>
<a class="dock-item" href="{U_SEARCH}"><img src="ССЫЛКА на изображение" alt="{L_SEARCH}" /><span>{L_SEARCH}</span></a>

выделенное красным, ссылки
выделенное зелёным, названия

cataha писал(а):по выше кнопки сделать?

поставьте в шаблоне код повыше <!-- INCLUDE breadcrumbs.html -->


Подскажите плиз а где можно поменять цвет названия кнопок?

Автор:  vikweb [ 01 май 2014, 11:48 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

cataha писал(а):где можно поменять цвет названия кнопок?

в теме стиля, в этом куске
Код:
a.dock-item {
   display: block;
   width: 40px;
   color: #006597;
   position: absolute;
   top: 50px;
   text-align: center;
   text-decoration: none;
   font: bold 12px Arial, Helvetica, sans-serif;
}


в строке: color: #006597; вот код цвета шрифта названий #006597

Страница 4 из 5 Часовой пояс: UTC + 1 час [ Летнее время ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/