Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


Закругление углов для меню

#1 zosya

zosya
  • Неактивные
  • 4 сообщений
  • Репутация: 0
0

Отправлено 02 July 2013 - 12:05

Здравствуйте. Помогите, пожалуйста. у меня есть меню с закругленными углами, в котором при нажатии на блок меняется фон и должны закругляться боковые блоки как и в меню. Как их можно закруглить, если свойства first-child и last-child использовать нельзя, так как меню находится в колонке с фиксированной шириной и при большом количестве рубрик может растягиваться вниз.

код css:

#menu {
margin-top:40px;
margin-left: 10px;
padding: 0;
list-style-type:none;
position:relative;
display:block;
width: 940px;
float:left;
background-color: #181e21;
border-radius: 10px;
}
#menu li {
float:left;
display:block;
position:relative;
}
#menu li a {
display:block;
line-height:55px;
padding:0px 19px;
height:50px;
text-decoration:none;
text-shadow: 1px 0px 0px #000;
color:rgb(228, 228, 228);
font-size:12px;
font-family:tahoma;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
text-transform:uppercase;
}
#menu li a:hover {
color:#888d8f;
}
#menu .current_page_item{
background: #2695c1;
display: block;
}
#menu li .current_page_item{
background: #2695c1;
}
#menu ul {
position:absolute;
display:none;
margin:0;
padding:0 10px 0 10px;
list-style:none;
z-index: 100;
}
#menu ul li {
min-width:170px;
height:50px;
/*border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#333;*/
}
#menu ul li:first-child a,#menu ul li ul :first-child a {
padding-left:19px;
line-height:50px;
color:#fff;
background: #181e21;
}
#menu ul li a,#menu ul li ul a {
padding-left:19px;
line-height:50px;
color:#fff;
background: url(img/div.png) repeat-x #181e21;
text-transform: capitalize;
}
#menu ul a {
display:block;
height:50px;
padding:0px 5px 0px 5px;
color: #fff;
background-color:#181e21;
border:none !important;
}
#menu ul a:active, #menu ul a:hover{
border:none !important;
}
#menu ul a:active,#menu ul a:hover {
border:none !important;
}
#menu ul a:hover {
text-decoration:none;
color:#888d8f;
}
#menu ul li ul {
margin-left:170px;
position:absolute;
display:none;
padding:0px;
height:auto;
top:0px;
}
#menu ul li ul li {
width:170px;
}
код html:
<body>
<h1><span>Выпадающее меню</span></h1>
<div class="container">
<nav>
<ul id="menu">
<li><a class="active" href="#">Главная</a></li>
<li><a href="#">Обзоры</a>
<ul>
<li><a href="#">Ноутбуки</a></li>
<li><a href="#">Принтеры</a></li>
<li><a href="#">Планшеты</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">Телефоны</a></li>
</ul>
</li>
<li><a href="#">Новости</a></li>
<li><a href="#">Скачать</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</body>

Прикрепленные файлы

  • Прикрепленный файл  menu.zip   1.53К   Количество загрузок: 82

 

 

  • 0

#2 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 July 2013 - 12:16

создай фоновый рисунок для боковых элементов с закругленными углами.

а почему first-child и last-child нельзя?
  • 0

#3 zosya

zosya
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

Отправлено 02 July 2013 - 12:22

потому что у меня меню может занимать больше чем одну строку и last-child может находиться где-то по середине строки. а если я вывожу их в wordpress через <?php wp_list_pages('title_li='); ?> как мне определить первый блок на второй строке меню?
  • 0

#4 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 02 July 2013 - 12:32

а причем тут строка? и причем тут посередине?
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
.....
<li>100</li>
<li>101</li>
...
<li>1000</li>
</ul>



в любом случае здесь

li:first-child - элемент <li>1</li>
li:last-child - элемент <li>1000</li>


а занимать меню может хоть миллион строчек, это ведь всего лишь визуально
  • 0

#5 zosya

zosya
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

Отправлено 02 July 2013 - 12:52

мое меню в шаблоне выглядит вот так http://journalism.fr...om/?page_id=733 и, если много пунктов меню, оно растягивается вниз и пункт меню page a тоже должен быть закруглен, как и пункт меню home
  • 0

#6 seolast

seolast
  • Заблокированные
  • 62 сообщений
  • Репутация: 0

Отправлено 22 July 2013 - 17:01

border-radius: 5px;
-moz-border-radius: 5px; Вот пожалуйста: Устанавливается ниже сылки background ......

  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru