Красивый блок навигации

для начинающих, кто не умеет оформлять блоки

Небольшие моды и хаки для форума phpBB3
Правила форума
При размещении мода/статьи взятой с другого форума/сайта обязательно необходимо указывать первоисточник сообщения.
 • Просмотры: 2014
Аватара пользователя
9CaraTT
Благодарил (а): 230 раз
Поблагодарили: 228 раз
Сообщения: 3085
Зарегистрирован: 13 мар 2011, 15:23
Сообщение

Красивый блок навигации

16 июл 2011, 20:12

Что-то посмотрел, не нашёл темы как сделать блок навигации и красиво оформить :)

Корпус блока рипанул с одного сайта , чуть настроил корпусню и готова! =)
так начнёмс, инструкция для subsilver2, так как просильвер ну не переношу и не считаю его вообще за стиль = ))))
создаём текстовый файл naviga.html, берём любой пустой левый блок и копируем оформление блока туда
Пример:

Код: Выделить всё

{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
тут может быть что угодно = )))
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}
Теперь вставляем туда саму навигацию навигацию (как вставлять думаю все знают :D )
чтобы получилось так:

Код: Выделить всё

{$LR_BLOCK_H_L}Навигация{$LR_BLOCK_H_R}
<table class="tablebg" cellspacing="1" width="100%">
<div id="left"><div id="navcontainer">
        <ul class="navlist">
        <li><a href="/">Карта сайта</a></li>
        <li><a href="/">Главная</a></li>
        <li><a href="/">Гостевая книга</a></li>
        <li><a href="/">Форум</a></li>
        <li><a href="/">Делаем сайт</a></li>
        <li><a href="/">Оптимизируем сайт</a></li>
        <li><a href="/">Раскручиваем сайт</a></li>
        <li><a href="/">Зарабатываем</a></li>
        <li><a href="/">Графика для Web</a></li>
        <li><a href="/">Уроки Photoshop</a></li>
        <li><a href="/">Уроки HTML</a></li>
        <li><a href="/">Уроки CSS</a></li>
        <li><a href="/">Уроки JavaScript</a></li>
        <li><a href="/">Уроки jQuery</a></li>
        <li><a href="/">Уроки SQL и БД</a></li>
        <li><a href="/">Уроки Joomla</a></li>
        </ul>
</div><div id="advertising">
</table>
{$LR_BLOCK_F_L}{$LR_BLOCK_F_R}
Кидаем его styles/ваш стиль/template/portal/block
блок готов! теперь нужно его подключить!!!
Открываем файл portal_left.html
находим:

Код: Выделить всё

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
	<!-- INCLUDE portal/block/birthday_list.html -->
<!-- ENDIF -->
после вставляем:

Код: Выделить всё

<!-- INCLUDE portal/block/naviga.html -->
далее открываем файл stylesheet.css и запихиваем с ноги или с руки туда код , куда вам удобно, можно в конеЦ = )

Код: Выделить всё

/* NaV9CaraTT
 ------------ */
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }
#navcontainer  a#active{
display: block;
padding: 5px 10px 5px 20px;
width: 192px;
color: #000;
font-weight: bold;
font-size: 12px;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/blocks/4.png);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a
{
display: block;
padding: 5px 15px;
width: 192px;
color: #dcdcdc;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
font-weight: bold;
font-size: 12px;
background-image: url(images/blocks/3.png);
background-repeat: no-repeat;
background-position: 0 0;
}

#navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #999;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/blocks/4.png);
background-repeat: no-repeat;
background-position: 0 0;
}
настраиваем как нужно, если к примеру у Вас блоки в админке по ширине выставлены 230, то и картинки должны быть аналогичного размера.
Теперь по директории styles/ваш стиль/theme/images/ кидаем папку с картинками Скачать

Всё готова! Проверить в живую этот блок можите тут http://9caratt.com/
p.s на стандартном шаблоне subsilver2 смотриться лучше чем ожидал! ;)
В следующий раз как время будет подгодовлю блок с выподающим меню, с js, он в принципи воляется на винте, но донастроить нужно = )))
Аватара пользователя
zip
Благодарил (а): 372 раза
Поблагодарили: 80 раз
Сообщения: 865
Зарегистрирован: 04 янв 2010, 09:11
Сообщение

Красивый блок навигации

17 июл 2011, 04:35

Во че земляк зачот =)
Национальный Татарский BitТоррент-Трекер
Аватара пользователя
9CaraTT
Благодарил (а): 230 раз
Поблагодарили: 228 раз
Сообщения: 3085
Зарегистрирован: 13 мар 2011, 15:23
Сообщение

Красивый блок навигации

18 июл 2011, 02:56

Во че земляк зачот =)
Да чё там, не сложно, удобно и красиво ;)
Аватара пользователя
Oleg
Откуда: Омск
Благодарил (а): 66 раз
Поблагодарили: 7 раз
Сообщения: 211
Зарегистрирован: 23 янв 2012, 14:34
Сообщение

Красивый блок навигации

04 май 2014, 16:41

9CaraTT писал(а):Теперь по директории styles/ваш стиль/theme/images/ кидаем папку с картинками ↑ Скачать
А можно пере залить на файл обменник, а то все удалено, спасибо заранее :?
jh
jheka7
Благодарил (а): 5 раз
Сообщения: 33
Зарегистрирован: 11 янв 2015, 02:53
Сообщение

Красивый блок навигации

15 янв 2015, 08:45

как обычно скачать, как впрочем на всём этом ресурсе 50-60% файл не найден! :)
Аватара пользователя
9CaraTT
Благодарил (а): 230 раз
Поблагодарили: 228 раз
Сообщения: 3085
Зарегистрирован: 13 мар 2011, 15:23
Сообщение

Красивый блок навигации

13 мар 2015, 12:20

Гугл и вперёд ... неужели самому тяжело запилить какую-то менюшку.

Вернуться в «Минимоды и хаки для phpBB3»