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

@Microo10 · Регистрация: 18.08.2011

Студворк — интернет-сервис помощи студентам

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

Размер: 4.3 Кб

Название: tools.png
Просмотров: 363

Размер: 4.3 Кб

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

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

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

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

Помогите пожалуйста,очень нужно для сайта(

@Konyahinzhenya · 10.03.2012, 01:13

Мне кажется, что для такого меню технологии HTML+CSS недостаточно

@Daredevi1 · 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

@Microo10 · 10.03.2012, 21:19 **[ТС]**

Спасибо большое,немного попозже попытаюсь прилепить к сайту))

Добавлено через 2 минуты
P.S а JS и CSS в какие файлы писать,а то они же привязаны к менюшке...

@Daredevi1 · 11.03.2012, 10:07

Сообщение от Microo10

JS и CSS в какие файлы писать,а то они же привязаны к менюшке...

Файлы любые. Подключите их после подключения mootools.

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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 и т. д. Сборка примера Скачайте. . .

@Microo10 45 / 20 / 4 Регистрация: 18.08.2011 Сообщений: 395

	Раздвигающаяся кнопка 09.03.2012, 21:41. Показов 2387. Ответов 4 Метки нет (Все метки) Меня заинтересовал вопрос,как сделать раздвигающуюся кнопку при помощи css ? Вот тут есть пример этих кнопочек, подскажите пожалуйста,как реализовать выпадающие списки и раздвигающиеся,как в самом верхнем меню (где поиск).... Все картинки от этих кнопочек есть: Помогите пожалуйста,очень нужно для сайта( 0

@Konyahinzhenya 1 / 1 / 0 Регистрация: 20.09.2011 Сообщений: 32
	10.03.2012, 01:13
	Мне кажется, что для такого меню технологии HTML+CSS недостаточно 0

@Microo10 45 / 20 / 4 Регистрация: 18.08.2011 Сообщений: 395
	10.03.2012, 21:19 [ТС]
	Спасибо большое,немного попозже попытаюсь прилепить к сайту)) Добавлено через 2 минуты P.S а JS и CSS в какие файлы писать,а то они же привязаны к менюшке... 0