Всё написано не с моих слов.
Информация взята с 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)
