Город Мастеров | Академия помощи |

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Город Мастеров | Академия помощи | » -авторские уроки » Информационное меню для форумов


Информационное меню для форумов

Сообщений 1 страница 4 из 4

1

Всё написано не с моих слов.
Информация взята с http://forumdesign.0pk.ru/ Подробно о меню можете узнать, нажав на ссылку.
Горизонтальное анимированное (ниспадающее, разворачивающееся) меню для форума или сайта. (c) Герда
Я в свое время очень долго искала такую вещь, но пришлось самой креативить, писать почти с нуля, пролистывая информацию про аналоги в интернете.
Поэтому выкладываю эту вещицу, чтобы у других было меньше проблем.

Код можно настроить и видоизменить под ваш форум.

Пример этого меню вы видите у нас на форуме.

Однако настроить этот скрипт для своего форума без знаний html и css не получится.

вставляете в style.css:

/* E1 infomenu
-------------------------------------------------------------*/

#nav {padding:0; margin:0; list-style:none; height:35px; background-image: url(картинка); repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#цвет; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(картинка) no-repeat right top;}

#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#цвет; background: url(картинка) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background:url(картинка) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background:url(картинка) no-repeat right top; cursor:pointer;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; cursor:pointer;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #цвет; padding:3px; border:1px solid #цвет; white-space:nowrap; width:160px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:150px; font-weight:normal; cursor:pointer;}

#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:160px; line-height:18px; text-indent:5px; color:#цвет; text-decoration:none;border:1px solid #цвет; cursor:pointer;}

#nav li ul.sub li a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background-image: url(картинка); color:#цвет; border-color:#цвет; cursor:pointer;}

#nav li:hover ul.sub li a.fly:hover
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; cursor:pointer;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:155px; top:-4px; background: #цвет; padding:3px; border:1px solid #цвет; white-space:nowrap; width:160px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; border-color:#цвет;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#цвет url(картинка) 150px 6px no-repeat; color:#цвет; border-color:#цвет;}

Все, отмеченное красным, можете править под свой стиль. С остальным лучше не экспериментировать.
вставляйте в место, где вы бы хотели установить меню его html-код:

<ul id="nav">

<li class="top"><a href="ссылка" class="top_link"><span>НА ГЛАВНУЮ</span></a></li>

<li class="top"><a href="" id="" class="top_link"><span class="down">FAQ</span></a>

    <ul class="sub">
    <li><a href="ссылка">Вопрос-ответ</a></li>

    <li><a href="" class="fly">Где заказывать?</a>
        <ul>
            <li><a href="ссылка">Стили</a></li>
            <li><a href="ссылка" class="fly">Элементы стиля</a>
            <ul>
                <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="ссылка">Заголовки</a></li>
                <li><a href="ссылка">Курсоры</a></li>
            </ul>
                                                                      </li>
            <li><a href="ссылка" class="fly">Рекламные элементы</a>
            <ul>
                <li><a href="ссылка">Картинки</a></li>
                <li><a href="ссылка">Логотипы</a></li>
                <li><a href="ссылка">Баннеры</a></li>
            </ul>
                                                                     </li>

            <li><a href="ссылка" class="fly">Элементы профиля</a>
            <ul>
                <li><a href="ссылка">Аватарки</a></li>
                <li><a href="ссылка">Юзербары</a></li>
                <li><a href="ссылка">Подписи</a></li>
                <li><a href="ссылка">Комплекты</a></li>
            </ul>
                                                                     </li>
            <li><a href="ссылка" class="fly">HTML-заказы</a>
            <ul>
                <li><a href="ссылка">Таблицы</a></li>
                <li><a href="ссылка">Мэп-карты</a></li>
            </ul>
                                                                     </li>
        </ul>
    </li>
    <li class="mid"><a href="ссылка">Навигация</a>
    </li>
    </ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">О НАС</span></a>
    <ul class="sub">
    <li><a href="ссылкаi">Наши принципы</a></li>
    <li><a href="ссылка"> Администрация проекта</a></li>
    <li><a href="ссылка" class="fly">Правила форума</a>
        <ul>
            <li><a href="ссылка">Этика</a></li>
            <li><a href="ссылка">Общение</a></li>
            <li><a href="ссылка">Заказы</a></li>
            <li><a href="ссылка">Реклама</a></li>
        </ul>
                                   </li>
    <li><a href="ссылка" class="fly">Галерея</a>
        <ul>
            <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>
        </ul>
                                   </li>
    </ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ПАРТНЕРСТВО</span></a>
    <ul class="sub">
    <li><a href="" class="fly">О рекламе</a>
        <ul>
            <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>
        </ul>
                                   </li>
    <li><a href="ссылка">ПАРТНЕРСКАЯ ПРОГРАММА</a></li>
    </ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ПОМОЩЬ ФОРУМУ</span></a>
    <ul class="sub">
    <li><a href="ссылка">Вакансии</a></li>
    <li><a href="ссылка">Продвижение</a></li>
    <li><a href="">Финансовая помощь</a></li>
    </ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span class="down">ВАЖНОЕ</span></a>
    <ul class="sub">
    <li><a href="ссылка">Объявления</a></li>
    <li><a href="ссылка">Конкурсы</a></li>
    <li><a href="ссылка">Новости</a></li>
    </ul>
</li>
</ul>

тут вы сами себе творцы, ибо под ваш форум придется полностью переделывать эту часть меню, а не только вставлять ссылки и менять названия пунктов.

Отредактировано 'Vila (2010-01-28 16:04:07)

0

2

'Vila
А где красное-то? не видно... (хотя итак всё ясно)

0

3

.shatany
просто сообщение получилось как видно) большое, а когда я на какое-нибудь слово нажимаю, у меня всё вначало прокручивается.

0

4

'Vila
Спасибочки)))
Я им уже воспользовалась)))Спасибо!

0


Вы здесь » Город Мастеров | Академия помощи | » -авторские уроки » Информационное меню для форумов