Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Web-мастеру > vBulletin 3.х > Инструкции по vBulletin
Расширенный поиск

Инструкции по vBulletin Всевозможные мануалы, FAQ и инструкции по vBulletin

Ответ
 
Опции темы Поиск в этой теме
Старый 23.05.2010, 21:02 Вверх   #1
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
Хорошо Красивое плавающее меню для форума на JS

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

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

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



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

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

PHP код:
<!-- breadcrumbloginpm 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.
При копировании инструкции ссылка на эту страницу обязательна.

Последний раз редактировалось Serberg; 25.05.2010 в 15:48..
  Ответить с цитированием
8 пользователя(ей) сказали cпасибо:
Старый 26.05.2010, 21:19 Вверх   #2
Коренной житель
 
Аватар для barrimor
barrimor вне форума
Доп. информация
По умолчанию

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

Последний раз редактировалось barrimor; 26.05.2010 в 21:33..
  Ответить с цитированием
Старый 26.05.2010, 23:07 Вверх   #3
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
По умолчанию

Цитата Сообщение от barrimor Посмотреть сообщение
а можно это меню длину раздвинуть?, чтоб поширее было
Так ширина ничем и не фиксируется. Загляни в CSS и увидишь что там ширина меню 100%. Можно иконки побольше сделать или прибавить их в количестве.
  Ответить с цитированием
Старый 27.05.2010, 14:23 Вверх   #4
Грамотный форумчанин
 
Аватар для kadet
kadet вне форума
Доп. информация
По умолчанию

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

Оффтоп

Последний раз редактировалось kadet; 27.05.2010 в 14:44..
  Ответить с цитированием
Старый 27.05.2010, 17:17 Вверх   #5
Коренной житель
 
Аватар для barrimor
barrimor вне форума
Доп. информация
По умолчанию

я думаю barrimor имеет в веду отступ между кнопками.
я как раз это и имел ввиду, у меня не получилось их раздвинуть
  Ответить с цитированием
Старый 27.05.2010, 17:31 Вверх   #6
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
По умолчанию

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


Цитата Сообщение от kadet Посмотреть сообщение
Случаем нет в запасе такого образца иконок в большем кол-ве? :)
Мой запас иконок составляет 4 Гб примерно )). Брал на рутрекере.


Цитата Сообщение от barrimor Посмотреть сообщение
я как раз это и имел ввиду, у меня не получилось их раздвинуть
Будет время - попробую еще раз поставить панельку.
  Ответить с цитированием
Cказали cпасибо:
Старый 06.07.2010, 14:56 Вверх   #7
forever alone
 
Аватар для no name
no name вне форума
Доп. информация
По умолчанию

а можно сделать чтобы было несколько ссылок с иконками?
  Ответить с цитированием
Старый 06.07.2010, 17:02 Вверх   #8
Коварный тип
 
Аватар для Serberg
Serberg вне форума
Доп. информация
По умолчанию

Цитата Сообщение от m1kar Посмотреть сообщение
а можно сделать чтобы было несколько ссылок с иконками?
Всмысле несколько ? Там целый вагон ссылок с иконками поставить можено... хоть в два ряда.
  Ответить с цитированием
Старый 11.09.2016, 08:29 Вверх   #9
Новичок
 
Аватар для syltan020919
syltan020919 вне форума
Доп. информация
По умолчанию

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

Последний раз редактировалось syltan020919; 11.09.2016 в 08:33..
  Ответить с цитированием
Ответ

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


Текущее время: 06:51. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2022, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.12505 секунды с 12 запросами