ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Контакты:

Instagram: a.schmidt1895
WhatsApp: +7(938)116-19-35

Подробнее

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Открыта регистрация участников лотереи "Ролевые заявки" за июль. Не пропустите! Cрок регистрации до 10.08!

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

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



Выпадающее меню

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

1

[ex]Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ![/ex]
Горизонтальное анимированное (ниспадающее, разворачивающееся) меню для форума или сайта. (c) Герда

Я в свое время очень долго искала такую вещь, но пришлось самой креативить, писать почти с нуля, пролистывая информацию про аналоги в интернете.
Поэтому выкладываю эту вещицу, чтобы у других было меньше проблем.

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

______________________
Скриншот меню:

http://i009.radikal.ru/0910/0b/6e75ae5e7930.jpg
______________________

Преимущества этого меню:
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]

+2

2

Вы можете задать здесь свои вопросы по поводу настройки, если хоте ли бы сделать это самостоятельно или можете обратиться в тему Настройка скрипта информационного меню. и заказать настройку меню.

0

3

Я бы хотел заказать настройку етово скрипта под свой форум... http://nonstopmusic.ru/

Отредактировано Nazar4ik (06.04.2010 15:33:43)

0

4

Хочу заказать настройку меню для форума http://foto2fp.0pk.ru
Вот картинка на фон http://s59.radikal.ru/i163/1006/c3/1ddeca73fe8d.jpg Буковки желательно белым и пожирней)
Заранее спасибо)))

0

5

Elle Riht
Nazar4ik
Почему все не до конца читают посты >__< тема для настройки выпадающего меню тут (это ссылка, туда нужно нажаты, ну на текст >_<") --->>> Настройка скрипта информационного меню. впредь читайте полностью посты, а заодно и правилаи не фиг не по теме тут писать

Отредактировано Сара (01.06.2010 18:57:35)

0

6

Сара
Там тема устаревшая и написать там нельзя, может есть новая тема но я ее не нашла!

0

7

А вот в первом скрипте (где надо вставлять в style.css) отмечено красным, то, что можно исправить. А как узнать что это меняет?

0

8

Zagadka
Методом тыка

background:#цвет url(картинка) 150px 38px no-repeat

Цвет фона
Фоновая картинка
Позиция картинки (сначала координата по горизонтали, затем по вертикали)

color:#цвет

Цвет текста
А всё остальное либо высота\ширина элементов, либо стиль текста.

0