Красивое плавающее меню для форума на JS

Serberg · 23.05.2010, 22:02 **Вверх**

Красивое плавающее меню для форума на JS

В этой небольшой инструкции я расскажу Вам как состряпать краивую менюшку для форума. Посмотреть как работает меню можно ВОТ ТУТ

Инструкия по вставке Меню под шапку форума.

Итак, для начала нужно скачать архив с файлами меню: Dock in Rock и распаковать содержимое папки upload в корень форума.

Теперь заходим в админку и открываем шаблон navbar своего стиля и находим там в самом начале:

PHP код:


			
<!-- breadcrumb, login, pm info -->

Перед этим кодом вставляем:

PHP код:


			
<div align="center">



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS Mac Dock</title>

<script type="text/javascript" src="bormotuhinet/js/jquery.js"></script>

<script type="text/javascript" src="bormotuhinet/js/interface.js"></script>



<!--[if lt IE 7]>

 <style type="text/css">

 div, img { behavior: url(iepngfix.htc) }

 </style>

<![endif]-->



<link href="bormotuhinet/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="dock" id="dock">

  <div class="dock-container">

  <a class="dock-item" href="#"><img src="bormotuhinet/home.png" alt="home" /><span>На главную</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/email.png" alt="contact" /><span>Контакты</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/portfolio.png" alt="portfolio" /><span>Портфилио</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/music.png" alt="music" /><span>Музыка</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/video.png" alt="video" /><span>Видео</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/history.png" alt="history" /><span>история</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/calendar.png" alt="calendar" /><span>Календарь</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/rss.png" alt="rss" /><span>RSS</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>

</body>

</html> 



</div>

Для каждой менюшки нужно переделать свои ссылки вместо href="#".
Сохраняем изменения.

++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++

Инструкия по вставке Меню в футер форума.

Итак, для начала нужно скачать архив с файлами меню: Dock in Rock и распаковать содержимое папки upload в корень форума.

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

PHP код:


			
$vbphrase[top]</a>

            </strong>

        </div>

Сразу после </div> вставляем код:

PHP код:


			
<br>

<div align="center">



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS Mac Dock</title>

<script type="text/javascript" src="bormotuhinet/js/jquery.js"></script>

<script type="text/javascript" src="bormotuhinet/js/interface.js"></script>



<!--[if lt IE 7]>

 <style type="text/css">

 div, img { behavior: url(iepngfix.htc) }

 </style>

<![endif]-->



<link href="bormotuhinet/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="dock" id="dock">

  <div class="dock-container">

  <a class="dock-item" href="#"><img src="bormotuhinet/home.png" alt="home" /><span>На главную</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/email.png" alt="contact" /><span>Контакты</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/portfolio.png" alt="portfolio" /><span>Портфилио</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/music.png" alt="music" /><span>Музыка</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/video.png" alt="video" /><span>Видео</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/history.png" alt="history" /><span>история</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/calendar.png" alt="calendar" /><span>Календарь</span></a> 

  <a class="dock-item" href="#"><img src="bormotuhinet/rss.png" alt="rss" /><span>RSS</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>

</body>

</html>



</div>

Для каждой менюшки нужно переделать свои ссылки вместо href="#".
Сохраняем изменения.

Все, пользуемся.
Перевод инструкции выполнил Serberg.
При копировании инструкции ссылка на эту страницу обязательна.

barrimor · 26.05.2010, 22:19 **Вверх**

а можно это меню длину раздвинуть?, чтоб поширее было

Serberg · 27.05.2010, 00:07 **Вверх**

Сообщение от barrimor

а можно это меню длину раздвинуть?, чтоб поширее было

Так ширина ничем и не фиксируется. Загляни в CSS и увидишь что там ширина меню 100%. Можно иконки побольше сделать или прибавить их в количестве.

kadet · 27.05.2010, 15:23 **Вверх**

Сергей, отличная вещь!
Случаем нет в запасе такого образца иконок в большем кол-ве? :)
И есть ещё одна неприятная вещь...

Оффтоп

barrimor · 27.05.2010, 18:17 **Вверх**

я думаю barrimor имеет в веду отступ между кнопками.

я как раз это и имел ввиду, у меня не получилось их раздвинуть

Serberg · 27.05.2010, 18:31 **Вверх**

Сообщение от kadet

И есть ещё одна неприятная вещь...

Ну эта штука нагрузку давать не должна, т.к. представляет собой CSS + JS. Максимум что дает эта панель - это большая затрата трафика, сама панель обрабатывается браузером и запросы не делает.

Сообщение от kadet

Случаем нет в запасе такого образца иконок в большем кол-ве? :)

Мой запас иконок составляет 4 Гб примерно )). Брал на рутрекере.

Сообщение от barrimor

я как раз это и имел ввиду, у меня не получилось их раздвинуть

Будет время - попробую еще раз поставить панельку.

no name · 06.07.2010, 15:56 **Вверх**

а можно сделать чтобы было несколько ссылок с иконками?

Serberg · 06.07.2010, 18:02 **Вверх**

Сообщение от m1kar

а можно сделать чтобы было несколько ссылок с иконками?

Всмысле несколько ? Там целый вагон ссылок с иконками поставить можено... хоть в два ряда.

syltan020919 · 11.09.2016, 09:29 **Вверх**

Подскажите как раздвинуть иконки, а то при их увеличение они слились.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Красивое оформление текста	NuRt1ck	CSS и HTML	7	09.06.2011 15:53
Дополнительное меню форума [смотри скрин]	Serberg	Инструкции по vBulletin	22	09.02.2011 08:44
[Вопрос] Меню	imba	vBulletin 4.x	10	11.01.2011 15:01
[Вопрос] Дополнительнное меню	Syfon	vBulletin 3.х	4	09.01.2011 01:19
[Вопрос] Меню	f0wl	vBulletin 4.x	1	27.10.2010 11:39