Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
sendxt
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
1

Выдвижное меню

24.06.2014, 20:07. Просмотров 1629. Ответов 8
Метки нет (Все метки)

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


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="first-furniture">
                    <li>
                        <p>Furniture</p>
                        <ul class="furniture-second">
                            <li>For Home
 
                                <ul class="for-home">
                                    <li><a href="">Kitchen</a></li>
                                    <li><a href="">Living room</a></li>
                                    <li><a href="">Bedroom</a></li>
                                    <li><a href="">Children's room</a></li>
                                    <li><a href="">bathroom</a></li>
                                </ul>
 
                            </li>
                            <li>some other li</li>
                            <li>some other li</li>
                        </ul>
                    </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
.first-furniture > li  {
 
}
 
.first-furniture > li {
    width: 100px;
    height: 50px;
    float: left;
    background: #ccc;
    position: relative;
}
 
 
.first-furniture > li:hover {
    background: #098;
}
 
.furniture-second {
    width: 200%;
    background: #777;
    color: #fff;
    display: block;
    position: relative;
    z-index:20;
    top: 12px;
    right:19px;
}
 
.furniture-second > li {
    height: 50px;
}
 
 
.first-furniture > li:hover .furniture-second {
    display: block;
}
 
.for-home-list {
    height:50px;
}
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.06.2014, 20:07
Ответы с готовыми решениями:

Выдвижное меню
Здравствуйте, каким образом можно &quot;раздвинуть&quot; страничку при нажатии на некую кнопку? Пример: ...

Выдвижное меню
Проблема в том, что меню открывается только при клике на изображение. Кто нибудь сможет сделать...

ВЫДВИЖНОЕ МЕНЮ
НАРОД ПОМОГИТЕ Я ХОЧУ ПОСТАВИТЬ ВЫДВЕЖНОЕ МЕНЮ !!! Поделитесь опытом и расскажите в подробностях...

Выдвижное меню на css
при нажатии на одну из категорий выпадает список подкатегорий, и когда нажимаешь на одну из...

Выдвижное меню поверх других элементов
Здравствуйте, проблема такова, z-index не работает, куда бы его не вставлял. &lt;!DOCTYPE html&gt;...

8
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
25.06.2014, 08:56 2
Цитата Сообщение от sendxt Посмотреть сообщение
как на картинке у меня
0
sendxt
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
25.06.2014, 10:06  [ТС] 3
да что-то сморозил с картинкой))
0
Изображения
 
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
25.06.2014, 10:08 4
Что должно что тут двигать?)
0
sendxt
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
25.06.2014, 11:01  [ТС] 5
sMockingbird, по for home кликаю, выдвигается субкатегории, которые двигают остальные разделы щас они отмечены как some other li
0
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
25.06.2014, 11:13 6
CSS
1
2
3
4
5
6
7
.first-furniture > li {
    width: 100px;
    height: 50px;
    float: left;
    background: #ccc;
    position: relative;
}
мб убрать жёсткое ограничение на высоту?
а вообще тестить надо, может ссылку дадите?
0
sendxt
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
25.06.2014, 11:18  [ТС] 7
sMockingbird, сыллка, на medium экране смотрите(768пх - 1200пх)
0
sMockingbird
282 / 282 / 72
Регистрация: 06.05.2013
Сообщений: 1,613
25.06.2014, 11:22 8
.furniture-second > li {height:50px}
вот у Вас тут высота строго задаётся. уберите это, будет то что надо. ну по крайней мере примерно.
у меня кстати при нажатии ничего не происходит, Вы не вешали обработчик ещё?
1
sendxt
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
25.06.2014, 11:25  [ТС] 9
sMockingbird, не пока не вешал чтоб наглядно было, там много стилей ещё будет, спасибо)
0
25.06.2014, 11:25
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.06.2014, 11:25

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

JasnyBootstap, выдвижное меню перекрывающее блоки с содержимым
Всем здравствуйте! Верстаю шаблон, использую Bootstrap 3 и JasnyBootstap, JB использую для того,...

Как добавить выплывающее меню к уже готовому горизонтальному меню (не меняя дизайн горизонтального меню)?
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;...

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: &quot;как сделать чтобы в надписи буквы1 был шрифт 19px, а...


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.