Выпадающее меню (моя версия)

Поделиться1Вт, 25 Май 2010 18:40:24

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Выпадающее меню или всплывающая подсказка.

Моя версия. Работает на Фреймворке JQuery. Пример тут.

1. устанавливаем JQuery, cтавим в HTML-верх:

Код:

<script type="text/javascript" src="http://ferodar.narod.ru/ajax/js/jquery.js"></script>

2. Устанавливаем функцию(за подсказку спасибо mkusher'у), в HTML-низ:

Код:

<script type="text/javascript"> 
$('.menu p').click(function() {
if($(this).next('em').css('display')=='none')
  $(this).next("em").animate({opacity: "show", top: "-75", display: "none"}, "slow");
else
  $(this).next("em").animate({opacity: "hide", top: "-85", display: ""}, "fast");
});
</script>

3.Ставим CSS cтруктуру меню:

В HTML-верх.

<style type="text/css">

.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu p {
padding: 14px 10px;
display: block;
color: #000000;
width: 160px;
text-decoration: none;
font-weight: bold;

}
.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27346-1.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
</style>

Ccылки на картинки. выпадющее окно. Можно ссылки заменить на свою картинку. Или просто колоризировать эти.

4. Ставим само меню. В любое место:

Код:

<ul class="menu"> 
            <li> 
               <p>Заголовок итады.</p> 
                <em>Текст или <*img src="ccылка на картинку"> и.т.д...</em> 
            </li> 
           
           </ul>

<li>
<p>Текст или <*img src="ccылка на картинку"> и.т.д...</p>
<em>Текст итады.</em>
</li>

Размножать хоть сколько.

Отредактировано FeroDaR (Ср, 26 Май 2010 18:54:37)

+1

Поделиться2Вт, 25 Май 2010 18:47:00

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

FeroDaR
Любопытная вещь, но...
1. Сделай лучше по клику этот эффект, а не при наведении. Так удобнее, по крайней мере для меня.
2. Кроме текста в этот блок ничего не поместить, поскольку при отведении мыши от главного блока, пропадает и выпадающий. Например, вставив туда ссылку, по ней нельзя будет перейти.

Отредактировано rps (Вт, 25 Май 2010 18:47:35)

0

Поделиться3Вт, 25 Май 2010 18:48:54

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

rps
Попытаюсь исправить сказанное.

0

Поделиться4Вт, 25 Май 2010 18:59:22

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3442
Уважение: +2140
Позитив: +683
Пол: Мужской
Последний визит:
Вчера 17:10:55

Где-то видел нечто подобное. Это помойму даже не меню

0

Telegram @reysler

Поделиться5Вт, 25 Май 2010 19:01:48

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3442
Уважение: +2140
Позитив: +683
Пол: Мужской
Последний визит:
Вчера 17:10:55

Вспомнил и нашел где я видал: http://allajax.ru/script/vsplyvayushhie … da-bubble/
Но там ссылки можно вставлять и переходить по ним. Переделай из этого меню в то, а лучше замени.

0

Telegram @reysler

Поделиться6Вт, 25 Май 2010 19:34:06

Автор: [M.@.t.r.i.x]
Cтарожил
Зарегистрирован: Чт, 14 Фев 2008
Сообщений: 1119
Уважение: +1220
Позитив: +141
Пол: Мужской
Последний визит:
Ср, 9 Ноя 2022 00:29:23

Не практично, так как при отведении курсора второй блок исчезает, хотя бы тайм аут был, а так рюшка да только
Добавлено:То есть гиперссылки туда не применишь

0

Поделиться7Вт, 25 Май 2010 19:38:27

Автор: mkusher
Не rocket science
Зарегистрирован: Ср, 19 Мар 2008
Сообщений: 821
Уважение: +1000
Позитив: +706
Пол: Мужской
Последний визит:
Вт, 7 Янв 2020 15:14:17

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

0

Поделиться8Вт, 25 Май 2010 21:14:16

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Обновил.

0

Поделиться9Вт, 25 Май 2010 21:51:25

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27346-1.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Так-же если подумать можно выпадающее окно можно изменить. Привожу пример:

.menu li em {
background: url(http://forumupload.ru/uploads/0000/17/3d/27348-2.png) repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
overflow:auto;
border:1px dashed #000000;

Выглядит так:
[реклама вместо картинки]

Теперь разберём этот код.

background: url(http://forumupload.ru/uploads/0000/17/3d/27348-2.png) repeat; - фон. http://forumupload.ru/uploads/0000/17/3d/27348-2.png - ссылка на фон.

width: 180px; - ширина окна. 180рх.

height: 45px; - высота окна. 45рх.

text-align: center; - текст по центру. также может быть вместо center - right, left .

font-style: normal; - cтиль текста.

border:1px dashed #000000; - границы. шириной 1 пиксел. чёрного цвета, цвета чередуются.

ОСТАЛЬНЫЕ ПАРАМЕТРЫ НЕ ТРОГАТЬ!

0

Поделиться10Ср, 26 Май 2010 10:27:48

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

.

Отредактировано FeroDaR (Ср, 26 Май 2010 11:47:30)

0

Поделиться11Ср, 26 Май 2010 11:43:52

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

FeroDaR
если ты это переделаешь для правил или для сообщений - цены ему не будет. А в объявлении он, ИМХО, лишний.
И есть один баг: при открытии\закрытии форум слегка "трясётся".

0

Поделиться12Ср, 26 Май 2010 12:20:47

Автор: Лафа
Заслуженный
Зарегистрирован: Чт, 4 Июн 2009
Сообщений: 564
Уважение: +33
Позитив: +22
Пол: Женский
Последний визит:
Ср, 19 Дек 2018 19:47:03

FeroDaR
у нас на форуме давно стоит подобный вариант

0

Поделиться13Ср, 26 Май 2010 12:27:34

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Лафа
Да, но этот не-много "проще" того.

0

Поделиться14Ср, 26 Май 2010 18:52:54

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4065
Позитив: +2371
Пол: Мужской
Последний визит:
Вчера 10:38:49

это скорее не меню, а всплывающая подсказка

0

Instagram drumman.1

Поделиться15Ср, 26 Май 2010 18:54:50

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Romych
:yep:

0

Поделиться16Ср, 26 Май 2010 19:00:04

Автор: Romych
drumman
Зарегистрирован: Вт, 16 Дек 2008
Сообщений: 2704
Уважение: +4065
Позитив: +2371
Пол: Мужской
Последний визит:
Вчера 10:38:49

rps написал(а):

если ты это переделаешь для правил или для сообщений - цены ему не будет

это ты Паш, имеешь ввиду, чтоб при получении нового письма у тебя всплывало такое красиво оформленное оповещение?

0

Instagram drumman.1

Поделиться17Ср, 26 Май 2010 19:29:12

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

Romych написал(а):

а всплывающая подсказка

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

0

Поделиться18Ср, 26 Май 2010 21:18:32

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Romych
Ну... Я вообще имел в виду один большой спойлер, например для длинного ФАКа, написанного в несколько параграфов. Было бы удобно.
Ну и для правил, разумеется, чтоб можно было раскрыть каждый пункт отдельно.
Но если ты сделаешь для оповещения о новом сообщении - тоже будет неплохо.

Кстати, а ещё можно сотворить подобное сворачивание-раскрытие категорий. По-моему, подобного точно не было.

0

Поделиться19Ср, 26 Май 2010 21:51:10

Автор: FeroDaR
Redoubtable
Зарегистрирован: Сб, 16 Янв 2010
Сообщений: 1019
Уважение: +123
Позитив: +128
Пол: Мужской
Последний визит:
Ср, 13 Май 2015 11:37:17

rps написал(а):

Кстати, а ещё можно сотворить подобное сворачивание-раскрытие категорий. По-моему, подобного точно не было.

Попробую сделать.

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

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

Выпадающее меню (моя версия)

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

Поделиться1Вт, 25 Май 2010 18:40:24

Поделиться2Вт, 25 Май 2010 18:47:00

Поделиться3Вт, 25 Май 2010 18:48:54

Поделиться4Вт, 25 Май 2010 18:59:22

Поделиться5Вт, 25 Май 2010 19:01:48

Поделиться6Вт, 25 Май 2010 19:34:06

Поделиться7Вт, 25 Май 2010 19:38:27

Поделиться8Вт, 25 Май 2010 21:14:16

Поделиться9Вт, 25 Май 2010 21:51:25

Поделиться10Ср, 26 Май 2010 10:27:48

Поделиться11Ср, 26 Май 2010 11:43:52

Поделиться12Ср, 26 Май 2010 12:20:47

Поделиться13Ср, 26 Май 2010 12:27:34

Поделиться14Ср, 26 Май 2010 18:52:54

Поделиться15Ср, 26 Май 2010 18:54:50

Поделиться16Ср, 26 Май 2010 19:00:04

Поделиться17Ср, 26 Май 2010 19:29:12

Поделиться18Ср, 26 Май 2010 21:18:32

Поделиться19Ср, 26 Май 2010 21:51:10