[ex]Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ![/ex]
Горизонтальное анимированное (ниспадающее, разворачивающееся) меню для форума или сайта. (c) Герда
Я в свое время очень долго искала такую вещь, но пришлось самой креативить, писать почти с нуля, пролистывая информацию про аналоги в интернете.
Поэтому выкладываю эту вещицу, чтобы у других было меньше проблем.
Меню получилось просто замечательным: стилизованное, при наведении курсора цвет фона или ссылки меняется, аккуратные окошки выпадают при наведении и т.п.
______________________
Скриншот меню:
______________________
Преимущества этого меню:
1. Оно горизонтальное. (в тырнете очень много подобных вертикальных, но они для меня не подходят)
2. Оно настраиваемое стилистически (чего нет во многих навигаторах)
3. Оно при отсутствии криворукости админа может содержать в себе великое разнообразие пунктов и вкладок.
4. Его css-код никак не сказывается на стиле и само оно с движком форума не конфликтует. (я находила готовые аналоги, которые либо стиль портили, либо "не дружили" с форумными элементами)
Недостаток - скрипт не просто освоить новичкам в администрировании.
Однако настроить этот скрипт для своего форума без знаний 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>
тут вы сами себе творцы, ибо под ваш форум придется полностью переделывать эту часть меню, а не только вставлять ссылки и менять названия пунктов.
[mod]у нас на форуме вы можете заказать индивидуальную настройку этого скрипта под ваш стиль и ваш форум: http://forumdes.mybb.ru/viewtopic.php?id=357 [/mod]
