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

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

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

Опции

zosya

Topic Starter сообщение

2.7.2013, 13:05; Ответить: zosya

Сообщение #1

Группа: User
Сообщений: 3
Регистрация: 3.7.2013
Поблагодарили: 0 раз
Репутация:

Здравствуйте. Помогите, пожалуйста. у меня есть меню с закругленными углами, в котором при нажатии на блок меняется фон и должны закругляться боковые блоки как и в меню. Как их можно закруглить, если свойства 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 килобайт ) Кол-во скачиваний: 91

Ответить с цитированием данного сообщения

isvetlichniy isvetlichniy 2.7.2013, 13:16; Сообщений: 622 Поблагодарили: 0 раз Репутация: 93 Просмотр профиля	2.7.2013, 13:16; Ответить: isvetlichniy Сообщение #2
Завсегдатай Группа: User Сообщений: 622 Регистрация: 28.11.2012 Поблагодарили: 0 раз Репутация: 93	создай фоновый рисунок для боковых элементов с закругленными углами. а почему first-child и last-child нельзя?

zosya Topic Starter zosyaTopic Starter 2.7.2013, 13:22; Сообщений: 3 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 2.7.2013, 13:22; Ответить: zosya Сообщение #3
0 Группа: User Сообщений: 3 Регистрация: 3.7.2013 Поблагодарили: 0 раз Репутация: 0	потому что у меня меню может занимать больше чем одну строку и last-child может находиться где-то по середине строки. а если я вывожу их в wordpress через <?php wp_list_pages('title_li='); ?> как мне определить первый блок на второй строке меню?

isvetlichniy isvetlichniy 2.7.2013, 13:32; Сообщений: 622 Поблагодарили: 0 раз Репутация: 93 Просмотр профиля	2.7.2013, 13:32; Ответить: isvetlichniy Сообщение #4
Завсегдатай Группа: User Сообщений: 622 Регистрация: 28.11.2012 Поблагодарили: 0 раз Репутация: 93	а причем тут строка? и причем тут посередине? <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> а занимать меню может хоть миллион строчек, это ведь всего лишь визуально

zosya Topic Starter zosyaTopic Starter 2.7.2013, 13:52; Сообщений: 3 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 2.7.2013, 13:52; Ответить: zosya Сообщение #5
0 Группа: User Сообщений: 3 Регистрация: 3.7.2013 Поблагодарили: 0 раз Репутация: 0	мое меню в шаблоне выглядит вот так http://journalism.freevar.com/?page_id=733 и, если много пунктов меню, оно растягивается вниз и пункт меню page a тоже должен быть закруглен, как и пункт меню home

seolast

22.7.2013, 18:01; Ответить: seolast

Сообщение #6

Частый гость

Группа: User
Сообщений: 54
Регистрация: 15.8.2013
Поблагодарили: 0 раз
Репутация:

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Rebex.io – Ваша инновационная платформа для обмена криптовалюты!	3	Rebex	870	Сегодня, 20:50 автор: Rebex
Посоветуйте массажер для спины и шеи	10	Boymaster	887	Сегодня, 18:02 автор: Boymaster
Обучение Email Рассылкам + Софт Для Автоматизации (100к в сутки с сервера)	10	zennoboss	4652	Сегодня, 5:20 автор: Skyworker
Какой % отказов нормален для сайта?	14	Aloof	3380	Вчера, 13:50 автор: Vmir
Люблю творить! Статьи для вас Копирайтинг- моя жизнь!	312	Zoya83	190713	Вчера, 7:51 автор: DimonX

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 24.4.2024, 21:34

Дизайн