VPF::Всплывающее меню на jquery - Форум программистов

Aver78

Дата 30.3.2008, 00:11 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Как сделать всплывающее меню на jquery. Надо что бы при клике всплывало меню, при клике на ссылку в этом меню оно бы закрывалось и выполнялся привязаный к этой ссылке код. Или ткните ,плиз, пальцем в подходящий плагин.

ksnk

Дата 31.3.2008, 15:32 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Aver78, Надо открыть для себы плагины к jQuery/ Искать в тексте по слову Tooltip...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aver78

Дата 31.3.2008, 20:52 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Насколько я знаю, tooltip это всплывающие подсказки, туда нельзя впихнуть ссылки. А плагины я очень долго перебирал, не нашел ничего подходящего. В общем как бы тоже уже все, написал сам. Но все равно спасибо, такое впечатление что ты тут один отвечаешь на вопросы )

ksnk

Дата 31.3.2008, 21:00 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Цитата(Aver78 @ 31.3.2008, 20:52

)

tooltip это всплывающие подсказки, туда нельзя впихнуть ссылки

Это не так. Tooltip - это div, в который можно впихнуть почти все ...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aver78

Дата 31.3.2008, 22:54 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 185
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Это понятно, но нельзя на него перейти. Он двигается на фиксированном растоянии от мыши. По типу смотри но не трогай.

Добавлено через 3 минуты и 7 секунд
Хм, посмотрел твою ссылку. Самое обидное что этот плаг я смотрел, но не досмотрел до нужного мне примера.

XJIOP

Дата 23.4.2008, 17:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 23.4.2008

Репутация: нет
Всего: нет

если кому не трудно сделайте такое меню, естественно заплачу, обращатся в аську 211730382

Это сообщение отредактировал(а) XJIOP - 23.4.2008, 17:27

Leoo

Дата 7.5.2008, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 270
Регистрация: 3.10.2005
Где: г. Обнинск

Репутация: нет
Всего: 3

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" href="./jquery.tabs.css" type="text/css" media="print, projection, screen"><!-- Additional IE/Win specific style sheet (Conditional Comments) --><!--[if lte IE 7]>
<link rel="stylesheet" href="./jquery.tabs-ie.css" type="text/css" media="projection, screen">
<![endif]-->

<script src="./jquery.js" type="text/javascript" language="javascript"></script>
<script src="./jquery.tabs.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
     
     $("li").click(function(){
        $("li > ul").animate({height: "hide"}, 300)
        if( $(this).find("ul").css("display") == 'none')
            $(this).find("ul").animate({height: "show"}, 300)
        else
            $(this).find("ul").animate({height: "hide"}, 300)
     })
     $("li > ul > li").click(function(){
        $("#text").text($(this).text());
     });
     
});
</script>

<style type="text/css">
body {
    margin: 0 auto;
    padding: 0;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
    outline: none;
}
#top-menu{
    float: left;
    list-style: none;
}
#top-menu li{
    float: left;
    background: #754c24;
    margin-left: 1px;
    height: 25px;
    width: 100px;
    text-align: center;
    cursor: pointer;
}
#top-menu li ul{
    margin: 0px;
    padding: 0px;
    margin-top: 12px;
    list-style: none;
    display: none;
}
#top-menu li ul li{
    margin: 0px;
    padding: 0px;
    margin-top: 1px;
}
</style>

</head>

<body>
    <div id="text">Номер подпункта</div>
    <ul id="top-menu">
        <li>Первый
            <ul>
                <li>Подпункт1</li>
                <li>Подпункт2</li>
                <li>Подпункт3</li>
                <li>Подпункт4</li>
                <li>Подпункт5</li>
            </ul>
        </li>
        <li>Второй
            <ul>
                <li>Подпункт6</li>
                <li>Подпункт7</li>
                <li>Подпункт8</li>
            </ul>
        </li>
        <li>Третий
            <ul>
                <li>Подпункт9</li>
                <li>Подпункт10</li>
            </ul>
        </li>
        <li>Четвертый
            <ul>
                <li>Подпункт11</li>
                <li>Подпункт12</li>
                <li>Подпункт13</li>
                <li>Подпункт14</li>
                <li>Подпункт15</li>
                <li>Подпункт16</li>
            </ul>
        </li>
        <li>Пятый
            <ul>
                <li>Подпункт17</li>
                <li>Подпункт18</li>
                <li>Подпункт19</li>
                <li>Подпункт20</li>
            </ul>
        </li>
    </ul>


</body>
</html>

--------------------

Если вы не страдаете паранойей, это не значит, что они за вами не летят!

XJIOP

Дата 17.6.2008, 06:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 23.4.2008

Репутация: нет
Всего: нет

это совсем не то smile

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

ksnk

Дата 18.6.2008, 18:27 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Вот так можно переписать кусочек скрипта... Как-то коряво вышло, с этими дурными тоглами, но чегото на моей версии никак не вышло выбрать только LI первого уровня...

Код


<script type="text/javascript">
$(document).ready(function(){
     var curr=null;
     $("#top-menu li").toggleClass('li');
     $("#top-menu li li").toggleClass('li');
     function animate(){
        if(curr==this) return false; curr=this;
        $("li > ul").animate({height: "hide"}, 300)
        if( $(this).find("ul").css("display") == 'none')
            $(this).find("ul").animate({height: "show"}, 300)
        else
            $(this).find("ul").animate({height: "hide"}, 300)
    }
     $(".li").mouseover(animate).click(animate);
     $("li >ul> li").click(function(){
        $("#text").text($(this).text());curr=null;
     });
     
});
</script>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

yantar

Дата 15.9.2008, 13:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 20.1.2007

Репутация: нет
Всего: нет

2 aver78
http://anton.shevchuk.name/javascript/jque...or-beginners-2/

Snowcore

Дата 23.9.2008, 09:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 23.9.2008

Репутация: нет
Всего: нет

обращайте внимание на селекторы!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »