С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
1

Меню

07.02.2018, 12:27. Просмотров 187. Ответов 10
Метки нет (Все метки)

Доброго времени суток!
Необходимо настроить меню таким образом, чтобы при наведении на главный пункт внизу отображались подпункты меню [del]
Меню


На данный момент получается что-то в этом виде [del]
Меню


Возникли трудности:
1) Если сделать отступ от главного меню сверху, то когда пытаться навести мышкой на подпункты меню, меню исчезает (т.е. вся область где зеленый фон исчезает)
2) подскажите, как отцентровать треугольник в меню по пункту? [del]
Меню


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

Добавлено через 1 минуту
Пример кода для подпунктов:
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
.block {
border: 1px solid green;
border-radius: 10px;
padding: 10px;
position: relative;
background: green;
color: #fff;
box-shadow: 0 0 7px #000; /* Добавляем тень для блока */
width: 200px;
}
.block::after, .block::before {
content: '';
position: absolute;
background: green;
left: 90px; 
top : -5px;
width: 10px; 
height: 10px;
box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
z-index: -1; /* Прячем за основным блоком */
transform: rotate(45deg); /* Поворачиваем на 45Вє */
-webkit-transform: rotate(45deg);
}
.block::before {
z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */
box-shadow: none; /* Прячем тень */
}
 Комментарий модератора 
Изображения и любые другие файлы загружайте на форум! (Правила п.4.11)
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.02.2018, 12:27
Ответы с готовыми решениями:

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

Bootstrap и адаптивное меню. При уменьшении меню распадается на несколько строк
меню до уменьшения выглядит так после уменьшения так используется Bootstrap.

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

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код:...

Не пойму как в меню при наведении отобразить под меню
Сделал простенькое меню, как мне при наведении на ли отобразить ul что по умолчанию display none ...

10
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2838 / 2405 / 1039
Регистрация: 15.12.2012
Сообщений: 8,940
Записей в блоге: 5
07.02.2018, 12:28 2
_marisha, полный код в студию! Модер ругаться будет за картинки не на форуме...)
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
07.02.2018, 12:32  [ТС] 3
Прилагаю скрины как необходимо сделать (скрин "Эталон") и как пока получилось (скрин "Как сейчас").
0
Миниатюры
Меню   Меню  
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2838 / 2405 / 1039
Регистрация: 15.12.2012
Сообщений: 8,940
Записей в блоге: 5
07.02.2018, 12:36 4
_marisha, разметку в студию...)
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
07.02.2018, 12:47  [ТС] 5
Прилагаю код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="right_top_nav dropdown">
    <li class="dropdown-top">
    <a class="vacancies-link triangle" href="" style=" padding-bottom: 0px;">Услуги</a>
    <div>
        <ul class="dropdown-inside block" style="padding-top: 0px;">
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 1</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 2</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 3</a></li>
        </ul>
    </div>
    </li>
    <li class="dropdown-top">
    <a class="vacancies-link triangle" href="" style=" padding-bottom: 0px;">Продукция</a>
        <ul class="dropdown-inside block" style="padding-top: 0px;">
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 1</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 2</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 3</a></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
ul.dropdown li 
{ 
    position: relative;
}
ul.dropdown-inside 
{
    list-style-type: none;
    position: absolute;
    left: -9999px;
    /**/
    margin-left: -70px;
    /*margin-top: 5px;
    width: 170px;
    /**/
}
ul.dropdown li.dropdown-top 
{
    display: inline;
    float: left;
}
ul.dropdown li.dropdown-top a 
{
    display:inline-block;
}
ul.dropdown li.dropdown-top:hover .dropdown-inside 
{
    left: 0;
}
.dropdown-inside
{
    /*width: 100%;*/
    padding-top: 10px;
}
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
.triangle::after {
content: ''; 
position: absolute; /* Абсолютное позиционирование */
right : 25px; 
bottom: 7px; /* Положение треугольника */
border: 3px solid transparent;
border-top: 3px solid #fff; /* Добавляем треугольник */
}
 
.block {
border: 1px solid green;
border-radius: 10px;
padding: 10px;
position: relative;
background: green;
color: #fff;
box-shadow: 0 0 7px #000; /* Добавляем тень для блока */
width: 200px;
}
.block::after, .block::before {
content: '';
position: absolute;
background: green;
left: 90px; 
top : -5px;
width: 10px; 
height: 10px;
box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
z-index: -1; /* Прячем за основным блоком */
transform: rotate(45deg); /* Поворачиваем на 45Вє */
-webkit-transform: rotate(45deg);
}
.block::before {
z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */
box-shadow: none; /* Прячем тень */
}
Добавлено через 8 минут
Fedor92, спасибо что откликнулись. Предоставленных данных надеюсь достаточно
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2838 / 2405 / 1039
Регистрация: 15.12.2012
Сообщений: 8,940
Записей в блоге: 5
07.02.2018, 13:03 6
По первому ответ прост в тот момент когда Вы водите курсором между выпадающим списком и пустом меню, появляется отступ, и когда Вы наводите указатель на него меню и пропадает...
По второму вопросу:
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
.block {
border: 1px solid green;
border-radius: 10px;
padding: 10px;
position: relative;
background: green;
color: #fff;
box-shadow: 0 0 7px #000; /* Добавляем тень для блока */
width: 200px;
}
 
.block::after, .block::before {
content: '';
position: absolute;
background: green;
left: 50%; 
margin-left:-5px;
top : -5px;
width: 10px; 
height: 10px;
box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
z-index: -1; /* Прячем за основным блоком */
transform: rotate(45deg); /* Поворачиваем на 45Вє */
-webkit-transform: rotate(45deg);
}
 
.block::before {
z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */
box-shadow: none; /* Прячем тень */
}
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
07.02.2018, 13:20  [ТС] 7
Цитата Сообщение от Fedor92 Посмотреть сообщение
По первому ответ прост в тот момент когда Вы водите курсором между выпадающим списком и пустом меню, появляется отступ, и когда Вы наводите указатель на него меню и пропадает...
- верно. Возможно ли сделать так, чтобы производилось удержание подпунктов на некоторое время?
Например:
1) наводим на главный пункт
2) отображаются подпункты
3) и если курсор мыши навести на область между выпадающим списком, то список сразу не пропадал, а исчезал через некоторое время (если курсор мыши находился на области некоторое время) или если курсор мыши навести на другой пункт (то выпадающий список пропадал бы, и появлялся выпадающий список другого пункта меню)
Цитата Сообщение от Fedor92 Посмотреть сообщение
По второму вопросу
- спасибо. Треугольник теперь находится посередине
Каким образом теперь сделать так, чтобы список подпунктов находился строго по центру от главного пункта? (скрины "Середина", "Середина 2")
0
Миниатюры
Меню   Меню  
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2838 / 2405 / 1039
Регистрация: 15.12.2012
Сообщений: 8,940
Записей в блоге: 5
07.02.2018, 13:44 8
_marisha, накидал примерчик, вырезал всё лишнее... Выделил границы у пунктов, чтобы было понятнее...)
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
    
 
.block {
border: 1px solid green;
border-radius: 10px;
padding: 10px;
position: relative;
background: green;
color: #fff;
box-shadow: 0 0 7px #000; /* Добавляем тень для блока */
width: 200px;
}
 
.block::before {
content: '';
position: absolute;
background: green;
left: 50%; 
margin-left:-5px;
top : -5px;
width: 10px; 
height: 10px;
box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */
z-index: 1; /* Прячем за основным блоком */
transform: rotate(45deg); /* Поворачиваем на 45Вє */
-webkit-transform: rotate(45deg);
box-shadow: none; /* Прячем тень */
}
 
.dropdown-inside{
    display:none;
    width:200px;
    left:50%;
    margin-left:-100px;
    position:absolute; 
    top:50px
}
 
.right_top_nav, .dropdown-inside{
    list-style:none;
    padding:0;
}
 
.dropdown-top{
    position:relative;
    display:inline-block;
    padding:15px;
    border: 1px solid
}
 
.dropdown-top:hover .dropdown-inside{
    display:block
}
 
 
 
 
    </style>
</head>
<body>
 
<ul class="right_top_nav dropdown">
    <li class="dropdown-top">
    <a class="vacancies-link triangle" href=""></a>Услуги</a>
    <div>
        <ul class="dropdown-inside block" style=>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 1</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 2</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 3</a></li>
        </ul>
    </div>
    </li>
    <li class="dropdown-top">
    <a class="vacancies-link triangle" href="" style=" padding-bottom: 0px;">Продукция</a>
        <ul class="dropdown-inside block" style="padding-top: 0px;">
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 1</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 2</a></li>
            <li class="subparagraph"><a class="vacancies-link" href="">Пункт 3</a></li>
        </ul>
    </li>
</ul>
    
</body>
</html>
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
08.02.2018, 05:40  [ТС] 9
Fedor92, спасибо за пример )
Но почему-то список остается неизменным, т.е. смещен влево (скрин "Смещено").
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
08.02.2018, 05:41  [ТС] 10
Прилагаю скрин
0
Миниатюры
Меню  
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2838 / 2405 / 1039
Регистрация: 15.12.2012
Сообщений: 8,940
Записей в блоге: 5
08.02.2018, 09:40 11
_marisha, по все видимости Вы ширину выпадающего меню изменили... Надо поправку делать на левый отступ по формуле: margin-left:-width/2...
0
08.02.2018, 09:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.02.2018, 09:40

Работа меню при наведении, оставить фон основного меню
Добрый день! Помогите решить вопрос. Есть dropdown меню (белый буквы и черные фон) открывается при...

Центровка пунктов в выпадающем меню по центру ul блока (Битрикс меню)
Всем привет! Требуется в выпадающем меню, т.е. в самых блоках выпадающего меню, сделать чтобы...

Меню codrops (стильное меню), Как сделать чтобы текст не смещался в блоке?
вот менюшка (live-code): http://jsfiddle.net/Stasonix/gPbxC/ на всякий случай вот листинг: ...


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

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

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