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

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

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

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

Подробнее

Мийрон

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

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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



Выезжающее меню с помощью jQuery

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

1

Название
Красивое горизонтальное меню с выезжающими описаниями разделов.
https://forumupload.ru/uploads/0007/e3/f7/57198-1-f.jpg

Демо:
[html]<!-- меню -->
<br /><br />
<div class="con_2">
<div class="con_1">
<ul id="menu">
<li> <a href="https://forumd.ru/viewtopic.php?id=1790"> <em class="icon_about"></em> <span class="title">О нас</span> <span class="description"> История проекта и принципы нашей работы </span> </a> </li>
<li> <a href="https://forumd.ru/viewforum.php?id=27"> <em class="icon_work"></em> <span class="title">Работы</span> <span class="description"> Наше портфолио - лучшие работы дизайнеров </span> </a> </li>
<li> <a href="https://forumd.ru/viewforum.php?id=75"> <em class="icon_help"></em> <span class="title">Помощь</span> <span class="description"> Задайте здесь свой вопрос </span> </a> </li>
</ul>
</div>
</div>
<!-- стиль -->
<style><!--
.con_1 {
    background-color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius: 0 0 20px 20px;
    box-shadow: 1px 1px 6px #000000;
    height: 130px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 900px;
}
ul#menu {
    bottom: 0;
    color: #999999;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 36px;
    font-weight: bold;
    left: 20px;
    letter-spacing: -2px;
    list-style: none outside none;
    position: absolute;
}
ul#menu li {
    float: left;
    margin: 0 10px 0 0;
}
ul#menu a {
    bottom: -95px;
    cursor: pointer;
    float: left;
    line-height: 20px;
    position: relative;
    width: 210px;
  color: #000000;
text-decoration: none;
}
ul#menu a:hover {
  color: #000000;
text-decoration: none;
}
ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}
.icon_about {
    background: url("https://forumupload.ru/uploads/0007/e3/f7/56375-4.png") no-repeat scroll left top transparent;
}
.icon_work {
    background: url("https://forumupload.ru/uploads/0007/e3/f7/56375-2.png") no-repeat scroll left top transparent;
}
.icon_help {
    background: url("https://forumupload.ru/uploads/0007/e3/f7/56375-3.png") no-repeat scroll left top transparent;
}
.icon_ban {
    background: url("https://forumupload.ru/uploads/0007/e3/f7/56671-1.png") no-repeat scroll left top transparent;
}

.icon_about, .icon_work, .icon_help, .icon_ban {
    display: block;
    height: 48px;
    left: 165px;
    position: absolute;
    top: 50px;
    width: 48px;
}
ul#menu span.title {
    color: #B7B7B6;
    display: block;
    height: 26px;
    text-indent: 10px;
    text-shadow: 1px 1px 1px #000000;
}
ul#menu span.description {
    background-color: #B7B7B6;
    border: 3px solid #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 1px 1px 6px #000000;
    color: #FFFFFF;
    display: block;
    font-size: 20px;
    height: 80px;
    padding: 10px;
    width: 140px;
}
--></style>
</p>
<!-- скрипт -->
<p>
<script type="text/javascript" src="http://sadhaka.moy.su/ForumDesign/jquery-1.4.2.min.js"></script>
<script type="text/javascript"><!--
$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});
// --></script>
[/html]

Платформа: любая

Разметка

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - ссылка на страницу
синее - заголовок пункта
зеленое - описание пункта

для добавления еще одного пункта, необходимо копировать следующее:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Красным отмечен класс иконки. Он должен быть уникальным, отличающимся от других пунктов. Подойдет любое буквосочетание на английском языке: например, icon_1, icon_search, moya_ikonka и т.п.
Затем, мы перейдем к css и загрузим в стиль иконки, которые будут соответствовать этим классам.

Классы "title" и "description" (отмечено синим) оставьте одинаковыми для всех пунктов. Они будут отвечать за то, чтобы заголовки и описания (соответственно) имели одинаковый стиль.

CSS

Контейнер

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - фон контейнера.
синее - границы контейнера, где "3px" - это ширина границы, "solid" - это ее стиль (а можно сделать другого, например: dotted - точечками, dashed - пунктиром, double - двойной рамкой и т.п.), "#FFFFFF" - это ее цвет.
зеленое - это высота контейнера в пикселях (учитывайте, что сверху должно оставаться место для выезжающих описаний)
розовое - это ширина контейнера в пикселях
салатовое - это закругление контейнера и тень

Меню

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - цвет шрифта
синее - семейство шрифта. (то бишь сам шрифт. идет в виде перечисления шрифтов в порядке приоритета: если у пользователя не установлен первый шрифт, то он увидит второй, если нет второго - третий и т.п.)
зеленое - размер шрифта
розовое - делает текст жирным
бордовое - отступ слева
салатовое- отступ букв друг от друга

Иконки

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Сначала идет перечисление классов иконок с целью задать для них общие свойства:
Красное - ширина и высота (width - ширина, height - высота)
Синее - отступ влево
Зеленое - отступ сверху

Затем, идут индивидуальные свойства каждой иконки, а именно - картинки (отмечено розовым). Указываем ссылки на наши иконки в соответствии с их классами.

Если вы добавляли свои пункты меню, то не забудьте дописать дополнительную иконку в стиль:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Заголовки

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - цвет текста заголовков
синее - высота заголовков
зеленое - задает отступ слева
розовое - тень заголовков

Текст заголовков

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - выравнивание (left - слева, right- справа, center - по центру)
синее - отступы

Ссылки

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Описание

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - цвет фона
синее - границы (рамка)
зеленое - цвет текста
розовое - размер шрифта
бордовое - расстояние, на которое будет "торчать" выезжающий контейнер с описанием
темко-красное - высота и ширина
салатовое - закругление границ и тень

Изменения при наведении курсора

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

красное - цвет фона описания
синее - цвет текста заголовка

вы можете придумать что-нибудь свое. достаточно просто дописать селектор (класс) в код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

или можно задать свой стиль для предложенных селекторов: "span.description" - это описание, "span.title" - это заголовок

Javascript

Скрипт, который осуществляет "выезд" элемента ссылки и иконки при наведении мышки:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

ставить в html-низ

и подключаем jQuery (html-верх)

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

источник

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+3

2

а куда ставить?

0

3

Vava

разметку туда, где хотите видеть меню.
css либо в html-верх между тегов <style> ... </style>, либо в стиль форума (если пользуетесь функцией "свой стиль")
скрипты куда ставить описано выше: javascript - вниз, jQuery - вверх.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

4

Отображается лишь белая полоса, да текст по строчкам. Да и в коде запуталась слегка. Заказать уже настроенный нельзя?

0

5

Vava

если устраивает дизайн того, который на демо, то давай пункт, ссылку и иконку(если над).
я их вставлю в код.
в остальном он-то уже готовый уже. http://i.smiles2k.net/aiwan_smiles/smile3.gif

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

6

Хм, а в объявление это вставить можно?

0

7

Anto
вставлять можно куда угодно, где работает html

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

8

Спасибо!

0

9

Герда
хм. у меня лишь белая полоса. Причем очень большая. В пикселей 200. все вставила, иконки тоже поставила но не прет.. можешь помочь? http://i.smiles2k.net/aiwan_smiles/pardon.gif

Отредактировано Jii-Jo (05.08.11 10:41)

0

10

Jii-Jo
а ссылку?

0