Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.84/25: Рейтинг темы: голосов - 25, средняя оценка - 4.84
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
1

Как сделать скругленные углы у фона выпадающего меню?

24.04.2012, 20:39. Просмотров 4608. Ответов 24
Метки нет (Все метки)

Как сделать скругленные углы у фона выпадающего меню? Смотрел сайты где имеется выпадающее меню, но в коде у них не могу найти правило отвечающее за скругление или мб оно кладется фоном сразу каким-то образом?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.04.2012, 20:39
Ответы с готовыми решениями:

Скругленные углы у родительского блока и позиционирование дочерних элементов
Доброго времени суток Есть две проблемы. 1. На зеленом блоке не работает...

Как сделать плавное появление пунктов выпадающего меню
То есть, при наведении на ссылку появляется сначала первый пункт, потом через...

как сделать выравнивание у подразделов выпадающего меню постарался дать максимальные комментарии
Сделал выпадающее меню. Но: 1) не могу правильно сделать ширину у выпадающего...

Изменить горизонтальное меню - сделать автозакрытие выпадающего меню после отвода курсора
Вообщем что имеем: http://test.aowserv.ru имеется горизонтальное меню, при...

Как улучшить вид выпадающего меню
Как изменить вид выпающего меню оно не корректно смотрится. Главное меню сверху...

24
maximkou
368 / 43 / 8
Регистрация: 11.04.2012
Сообщений: 149
Записей в блоге: 1
24.04.2012, 21:23 2
закруглить углы у контейнера, в котором находятся пункты выпадающего меню например.

border-radius к примеру.

примерчик:

HTML5
1
2
3
4
5
6
7
8
<ul>
   <li>Первый пункт</li>
   <li>Выпадающий пункт 
       <ul style="border-radius: 0 5px 0 5px;">
           тут пункты
       </ul>
   </li>
</ul>
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
25.04.2012, 00:47  [ТС] 3
Никаких изменений
0
Маргарита Диез
0 / 0 / 0
Регистрация: 25.04.2012
Сообщений: 4
25.04.2012, 01:08 4
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
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MENU</title>
 
 
<style>
.ind_5 ul {
    list-style-type: none;
    width:200px;
    margin: 100px 500px ;
    padding: 0;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
   }
   .ind_5 li ul {
    position: absolute;
    display: none;
    margin-left: 155px;
    margin-top: -2em;
    width:150px;
   }
   .ind_5 li a {
    display: block;
    padding: 7px;
    text-decoration: none;
    color: black;
    border-radius:15px 40px 40px 0;
    border: 3px solid  #505050;
    background-color: #2FBCE7;
     border-bottom: none;
     border-right:5px;
     
 
   }
   .ind_5 li a:hover {
    color: #ffe;
    background-color: orange;
   }
   .ind_5 li:hover ul {
    display: block;
   }
   .bord {
    border-bottom: 1px solid #ccc;
   }
 
 
 
</style>
 </head>
 <body>
 
 
<div class="ind_5">
  <ul>
   <li><a href="">Item 1</a>
    <ul>
     <li><a href="INDEX.html">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="">Item 2</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="">Item 3</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="" class="bord">Item 4</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
    </li>
  </ul>
</div>
 
 </body>
</html>
0
allukard
155 / 155 / 50
Регистрация: 08.11.2010
Сообщений: 1,358
25.04.2012, 07:07 5
Цитата Сообщение от Chris Посмотреть сообщение
Никаких изменений
Каким браузером пользуетесь?
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
25.04.2012, 17:22  [ТС] 6
Ой =) вы знаете, я не заметил их) В общем получилось) сделал 8px и получилось как раз отлично.
Спасибо за помощь
0
Миниатюры
Как сделать скругленные углы у фона выпадающего меню?  
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 12:08 7
вы вот чему человека учите!?
CSS
1
2
3
4
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/
пирог

для ie лучше создать файл с отдельной таблицей стилей и подключать с помощью условных комментариев
HTML5
1
2
3
<!--[if lt IE 9]>
<link type="text/css" href="style_for_ie8.css" rel="stylesheet">
<![endif]-->
2
allukard
155 / 155 / 50
Регистрация: 08.11.2010
Сообщений: 1,358
26.04.2012, 12:34 8
Цитата Сообщение от Heleg Посмотреть сообщение
PIE.htc
а где скачать?
Цитата Сообщение от Heleg Посмотреть сообщение
behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/
чтот с пирогом не работает округление углов в ИЕ
1
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 13:08 9
сейчас не могу на ie потестить, у меня его нет, но я гарантирую, что пирог работает. правда возможны косяки. например, (не помню, в пироге это или ещё где-то) углы скругляются, но для содержимое блока выходит за рамки. у меня так было с картинками, но вроде на каком-то другом htc
Цитата Сообщение от Макc Посмотреть сообщение
а где скачать?
там же на сайте ссылка есть download

Добавлено через 2 минуты

Не по теме:

ишака надо лечить, так как по статистике популярности восьмой ишак занимает чуть ли не первое место, как это не прескорбно. эт потому что у всех стоит XP SP3, наверно самое лучшее, что смогла собрать micro$oft))

1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
26.04.2012, 16:05  [ТС] 10
Heleg, Спасибо очень хороший совет и ссылка.
behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/ - только лишь его в ie.css?
0
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 16:31 11
Цитата Сообщение от Chris Посмотреть сообщение
только лишь его в ie.css?
в данном случае только её, но в процессе создания странички, думаю придется ещё добавлять стили, эксплореру постоянно приходится ставить какие-нибудь костыли. короче, туда стили для ie версий с 6 по 8
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
26.04.2012, 19:08  [ТС] 12
Поставил правило туда и ничего не изменилось. Еще проблема с выпадающем меню в целом. На левом рисунке показано как должно быть, а на правом как в ie =) Как это исправить? Меню на JS.
0
Миниатюры
Как сделать скругленные углы у фона выпадающего меню?   Как сделать скругленные углы у фона выпадающего меню?  
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 22:19 13
вышли код
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
26.04.2012, 22:57  [ТС] 14
Вот архив с меню.
0
Вложения
Тип файла: rar site.rar (78.1 Кб, 9 просмотров)
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 23:39 15
что-то я там не нашел сам файл htc
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
26.04.2012, 23:42  [ТС] 16
Эм.. я даже незнаю о чем вы говорите Это меню с поставил с помощью шаблона dreamweaver. А что в этом файле должно быть? Мб я вас так с ориентирую.
0
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 23:50 17
ну вот ссылка, по ней должен быть файл .htc
CSS
1
behavior: url(/PIE.htc);
файл, который я прикрепил. он есть на сайте csspie, и в доках там всё описано.
1
Вложения
Тип файла: zip PIE.htc.zip (16.1 Кб, 13 просмотров)
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
26.04.2012, 23:58 18
border-radius как бы работает, но фон как-то странно отображается. с ним придется поплясать. вообще градиент для ie, если и задавать, то свойством filter
1
Chris
4 / 4 / 2
Регистрация: 20.07.2011
Сообщений: 114
27.04.2012, 00:01  [ТС] 19
Да правда, не скачал. Но при вставке ничего не изменилось =(
0
Heleg
206 / 206 / 6
Регистрация: 23.10.2011
Сообщений: 970
27.04.2012, 00:07 20
лично у меня изменилось, вот пруф. с фоном проблемы. делай страничку с блоком отдельно, чтоб без js был и выгугливай баги, ищи методом научного тыка. эксплорер просто так не сдается))
1
Миниатюры
Как сделать скругленные углы у фона выпадающего меню?  
27.04.2012, 00:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.04.2012, 00:07

Как изменить цвет выпадающего меню
Столкнулся с такой вот проблемой.У меня на сайте движек Osclass в самом шаблоне...

Как вствить картинку в блок выпадающего меню?
Подскажите пожалуйста как можно вставить картинку в выпадающем меню?

Как увеличить область линка выпадающего меню?
есть простое меню-выпадлка: &lt;style&gt; ul { list-style:none; margin:0; } ...


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

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

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