Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
 Аватар для Microo10
45 / 20 / 4
Регистрация: 18.08.2011
Сообщений: 395

Раздвигающаяся кнопка

09.03.2012, 21:41. Показов 2387. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Меня заинтересовал вопрос,как сделать раздвигающуюся кнопку при помощи css ?
Вот тут есть пример этих кнопочек, подскажите пожалуйста,как реализовать выпадающие списки и раздвигающиеся,как в самом верхнем меню (где поиск)....
Все картинки от этих кнопочек есть:
Название: tools.png
Просмотров: 363

Размер: 4.3 Кб

Название: usertools-bg-l.png
Просмотров: 370

Размер: 454 байт







Название: childactive-bg.gif
Просмотров: 379

Размер: 44 байт
Помогите пожалуйста,очень нужно для сайта(
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
09.03.2012, 21:41
Ответы с готовыми решениями:

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

"Раздвигающаяся" форма поиска
Здравствуйте! Хочу сделать форму поиска, что она могла "раздвигаться" вниз, после нажатия "расширенный поиск" и появлялись...

Как сделать что бы кнопка добавилась, а предыдущая кнопка не исчезла с страницы?
Добрый день. Есть кнопка1, которая добавляет кнопку2, следующая в свою очередь создает кнопку3. Вопрос. Как сделать что бы кнопка3...

4
1 / 1 / 0
Регистрация: 20.09.2011
Сообщений: 32
10.03.2012, 01:13
Мне кажется, что для такого меню технологии HTML+CSS недостаточно
0
 Аватар для Daredevi1
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
10.03.2012, 13:31
Вот выдрал.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<ul class="nx-clearfix" id="nx-cssmenu">
            <li class="active"><a id="menu1" class="active" href="http://www.phpbbguru.net/">Главная</a></li>
            <li class="havechild"><a id="menu19" href="/community/">Форумы</a>
                <ul style="height: 0px; left: -999em;">
                    <li><a id="menu36" href="/community/search.php?search_id=active_topics">Активные темы</a></li>
                    <li><a id="menu39" href="/community/search.php?search_id=unanswered">Сообщения без ответов</a></li>
                    <li><a id="menu42" href="/community/faq.php">FAQ</a></li>
                    <li><a id="menu35" href="/community/rules/">Правила</a></li>
                </ul>
            </li>
            <li class="havechild"><a id="menu2" href="/files/">Файлы</a>
                <ul style="height: 0px; left: -999em;">
                    <li><a id="menu3" href="/files/base/">Базовый пакет</a></li>
                    <li><a id="menu58" href="/files/updates/">Обновления</a></li>
                    <li class="havesubchild"><a id="menu4" href="/files/mods/">Модификации</a>
                        <ul style="width: 0px; left: -999em;">
                            <li><a id="menu52" href="/files/mods/localizations/">Переводы модификаций</a></li>
                        </ul>
                    </li>
                    <li class="havesubchild"><a id="menu5" href="/files/styles/">Стили</a>
                        <ul style="width: 0px; left: -999em;">
                            <li><a id="menu59" href="/files/styles/prosilver-based/">На основе Prosilver</a></li>
                            <li><a id="menu60" href="/files/styles/subsilver-based/">На основе Subsilver2</a></li>
                            <li><a id="menu61" href="/files/styles/buttons/">Русские кнопки для стилей</a></li>
                        </ul>
                    </li>
                    <li class="havesubchild"><a id="menu62" href="/files/images/">Изображения</a>
                        <ul style="width: 0px; left: -999em;">
                            <li><a id="menu63" href="/files/images/smilies/">Смайлики</a></li>
                            <li><a id="menu64" href="/files/images/ranks/">Картинки званий</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="havechild"><a id="menu6" href="/kb/">База знаний</a>
                <ul style="height: 0px; left: -999em;">
                    <li><a id="menu7" href="/kb/modding/">Модификация</a></li>
                    <li><a id="menu8" href="/kb/styling/">Стилизация</a></li>
                    <li><a id="menu9" href="/kb/administration/">Администрирование</a></li>
                    <li><a id="menu55" href="/kb/protect/">Защита</a></li>
                    <li class="havesubchild"><a id="menu57" href="/database/">База данных</a>
                        <ul style="width: 0px; left: -999em;">
                            <li><a id="menu66" href="/database/tools/">Инструментарий БД</a></li>
                            <li><a id="menu65" href="/database/tables/">Таблицы БД phpBB3</a></li>
                        </ul>
                    </li>
                    <li class="havesubchild"><a id="menu41" href="/useful/">Полезные сведения</a>
                        <ul style="width: 0px; left: -999em;">
                            <li><a id="menu68" href="/useful/general/">Общие данные</a></li>
                            <li><a id="menu67" href="/useful/codebook/">Справочник кодера</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="havechild"><a id="menu10" href="/documentation/">Документация</a>
                <ul style="height: 0px; left: -999em;">
                    <li><a id="menu11" href="/documentation/install/">Установка phpBB</a></li>
                    <li><a id="menu12" href="/documentation/upgrade/">Обновление phpBB</a></li>
                    <li><a id="menu13" href="/documentation/admin/">Администратору</a></li>
                    <li><a id="menu14" href="/documentation/moderator/">Модератору</a></li>
                    <li><a id="menu15" href="/documentation/user/">Пользователю</a></li>
                    <li><a id="menu16" href="/documentation/glossary/">Список терминов</a></li>
                </ul>
            </li>
            <li><a id="menu17" href="/community/faq-phpbb3.html">FAQ</a></li>
            <li class=""><a id="menu18" href="/blog/">Блог</a>            </li>
        </ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
#nx-cssmenu {
    margin: 0;
    background: url("../images/menu-bg-l.png") top left no-repeat;
    float: right;
    padding: 0 20px;
}
 
#nx-cssmenu ul {
    margin: 0; /* all lists */
    padding: 0;
    float: right;
}
 
#nx-cssmenu li {
    margin: 0; /* all list items */
    padding: 0;
    float: left;
    display: block;
    background: none;
    cursor: pointer;
}
 
#nx-cssmenu li ul {
    width: 16.4em;
    position: absolute; /* second-level lists */
    z-index: 1;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    height: auto;
    w\idth: 15.9em;
}
 
#nx-cssmenu li ul ul {
    margin: -1.5em 0 0 13em; /* third-and-above-level lists */
}
 
#nx-cssmenu li li {
    padding: 0 1em 0 0;
    margin: 0;
    width: 14.9em;
}
 
#nx-cssmenu ul a {
    width: 14.8em;
    w\idth: 10.8em;
}
 
#nx-cssmenu li:hover ul ul, #nx-cssmenu li:hover ul ul ul,
#nx-cssmenu li.sfhover ul ul, #nx-cssmenu li.sfhover ul ul ul {
    left: -999em;
}
 
/* This "unhides" the sub-menus (left: -999em is what hides them) */
#nx-cssmenu li:hover ul, #nx-cssmenu li li:hover ul, #nx-cssmenu li li li:hover ul,
#nx-cssmenu li.sfhover ul, #nx-cssmenu li li.sfhover ul, #nx-cssmenu li li li.sfhover ul {
    left: auto;
}
 
/* STYLING THE MENU
-----------------------------------*/
#nx-cssmenu li ul {
    border: 1px solid #53AEC8;
    border-top: none;
    background: url(../images/menu/child-bg.gif) top #69BAD0;
}
 
#nx-cssmenu li ul a {
    border-right: none;
/*    font-size: 11px;    */
    text-transform: none;
    line-height: 25px;
}
 
#nx-cssmenu li ul a:hover {
}
 
#nx-cssmenu li a {
    padding: 0 14px;
    display: block;
    text-decoration: none !important;
    line-height: 31px;
}
 
#nx-cssmenu li a:hover {
    color: #FFFFFF;
    background: #53AEC8;
}
 
#nx-cssmenu li a.active {
    color: #FFFFFF;
    background: url(../images/menu/active-bg.png) repeat-x #99C581;
}
 
#nx-cssmenu li a.active:hover,
#nx-cssmenu li a.active:active {
    color: #FFFFFF;
}
 
#nx-cssmenu li li a.active {
    background: url(../images/menu/childactive-bg.gif) no-repeat top left;
}
 
#nx-cssmenu li.havechild.active {
    background: url(../images/menu/active-bg.png) repeat-x;
}
#nx-cssmenu li.havechild > a {
    background: url(../images/menu/arrow-parent.gif) no-repeat 98% center;
    padding: 0 16px 0 12px;
}
 
#nx-cssmenu li.havesubchild {
    background: url(../images/menu/arrow-child.gif) no-repeat center right;
}
 
#nx-cssmenu li:hover,
#nx-cssmenu li.sfhover {
    background: #53AEC8;
}
 
#nx-cssmenu ul li:hover, #nx-cssmenu ul ul li:hover,
#nx-cssmenu ul li.sfhover, #nx-cssmenu ul ul li.sfhover {
    background: url(../images/menu/childhover-bg.gif) #90BC7E;
}
 
#nx-cssmenu ul li a,
#nx-cssmenu ul ul li a {
    padding: 0 10px;
    background: none;
    font-weight: normal;
    white-space: nowrap;
}
 
#nx-cssmenu ul li a:hover,
#nx-cssmenu ul ul li a:hover {
    background: none;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
if (typeof(MooTools) != 'undefined' && !window.ie6) {
 
    var subnav = new Array();
 
    Element.extend({
        hide: function(timeout) {
            this.status = 'hide';
            clearTimeout (this.timeout);
            if (timeout)
                this.timeout = setTimeout (this.anim.bind(this), timeout);
            else
                this.anim();
        },
                
        show: function(timeout) {
            this.status = 'show';
            clearTimeout (this.timeout);
            if (timeout)
                this.timeout = setTimeout (this.anim.bind(this), timeout);
            else
                this.anim();
        },
 
        anim: function() {
            if ((this.status == 'hide' && this.style.left != 'auto') || (this.status == 'show' && this.style.left == 'auto' && !this.hidding)) return;
            this.setStyle('overflow', 'hidden');
            if (this.status == 'show') {
                this.hidding = 0;
                this.hideAll();
            }
 
            if (this.status == 'hide') {
                this.hidding = 1;
                this.myFx2.stop();
                if (this.parent._id)
                    this.myFx2.start(this.offsetWidth, 0);
                else
                    this.myFx2.start(this.offsetHeight, 0);
            }
            else {
                this.setStyle('left', 'auto');
                this.myFx2.stop();
                if (this.parent._id)
                    this.myFx2.start(0, this.mw);
                else
                    this.myFx2.start(0, this.mh);
            }
        },
 
        init: function() {
            this.mw = this.clientWidth;
            this.mh = this.clientHeight;
            if (this.parent._id) {
                this.myFx2 = new Fx.Style(this, 'width', {duration: 200});
                this.myFx2.set(0);
            }
            else {
                this.myFx2 = new Fx.Style(this, 'height', {duration: 200});
                this.myFx2.set(0);
            }
            this.setStyle('left', '-999em');
            animComp = function() {
                if (this.status == 'hide') {
                    this.setStyle('left', '-999em');
                    this.hidding = 0;
                }
                this.setStyle('overflow', '');
            }
            this.myFx2.addEvent('onComplete', animComp.bind(this));
        },
 
        hideAll: function() {
            for (var i = 0; i < subnav.length; i++) {
                if (!this.isChild(subnav[i]))
                    subnav[i].hide(0);
            }
        },
 
        isChild: function(_obj) {
            obj = this;
            while (obj.parent) {
                if (obj._id == _obj._id)
                    return true;
                obj = obj.parent;
            }
            return false;
        }
 
    });
    
 
    var DropdownMenu = new Class({
        initialize: function(element) {
            $A($(element).childNodes).each(function(el) {
                if (el.nodeName.toLowerCase() == 'li') {
                    $A($(el).childNodes).each(function(el2) {
                        if (el2.nodeName.toLowerCase() == 'ul') {
                            $(el2)._id = subnav.length + 1;
                            $(el2).parent = $(element);
                            subnav.push ($(el2));
                            el2.init();
                            el.addEvent('mouseover', function() {
                                el2.show(0);
                                return false;
                            });
    
                            el.addEvent('mouseout', function() {
                                el2.hide(20);
                            });
                            new DropdownMenu(el2);
                        }
                    });
                }
            });
            return this;
        }
    });
    
    window.addEvent('domready',function() {
        new DropdownMenu($('nx-cssmenu'));
    });
 
}
else if (window.ie6) {
    sfHover = function() {
        var sfEls = document.getElementById("nx-cssmenu").getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; ++i) {
            sfEls[i].onmouseover = function() {
                this.className += " sfhover";
            }
            sfEls[i].onmouseout = function() {
                this.className = this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
}
+ нужна библиотека mootools
1
 Аватар для Microo10
45 / 20 / 4
Регистрация: 18.08.2011
Сообщений: 395
10.03.2012, 21:19  [ТС]
Спасибо большое,немного попозже попытаюсь прилепить к сайту))

Добавлено через 2 минуты
P.S а JS и CSS в какие файлы писать,а то они же привязаны к менюшке...
0
 Аватар для Daredevi1
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
11.03.2012, 10:07
Цитата Сообщение от Microo10 Посмотреть сообщение
JS и CSS в какие файлы писать,а то они же привязаны к менюшке...
Файлы любые. Подключите их после подключения mootools.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
11.03.2012, 10:07
Помогаю со студенческими работами здесь

Как сделать что бы кнопка добавилась, а предыдущая кнопка не исчезла с страницы?
Как сделать что бы кнопка3 добавилась, а кнопка2 не исчезла с страницы? &lt;?php if (isset($_POST)) echo...

Не работает кнопка Ctrl + левая кнопка мыши в Excel
Не работает кнопка ctrl + левая кнопка мыши в excel.Не выделяются ячейки.Хотя на рабочем столе или в любой папке выделяются любые несколько...

Кнопка BS_OWNERDRAW или кнопка со своей картинкой
Есть код, с помощью которого можно менять картинку при нажатии, при фокусе { // ownerdraw button static HBITMAP no_active; ...

Подскжите создать макрос , одно кнопка копирует выделенные объекты, вторая кнопка вставит эти данные в excel?
Sub macros6() Sheets(&quot;Ëèñò1&quot;).Select Range(&quot;C9:D13&quot;).Select Selection.Copy Range(&quot;R5&quot;).Select ...

кнопка на стоимость и кнопка на завтрашнюю дату
Добрый день. Мне нужно сделать в форме 2 кнопки У меня есть база данных из набора hdd, в которых указана стоимость каждого из них и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Киев стоит - украинская песня
zorxor 28.01.2026
wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru