Меню с круглыми углами

_Tornado_ · December 19, 2010

Подскажите, пожалуйста, как сделать такое меню, целый день мучаюсь.

вот код

  <div id="menu_bottom">
	<span class="right">
			<a href="#"><div class="top"><span>Пункт 1</span></div></a>
			<a href="#"><div><span>Пункт 1</span></div></a>
			<a href="#"><div><span>Пункт 1</span></div></a>
			<a href="#"><div><span>Пункт 1</span></div></a>
			<a href="#"><div><span>Пункт 1</span></div></a>
			<a href="#"><div class="bottom"><span>Пункт 1</span></div></a>
	 </span>
	</div>

#menu_bottom{
	width:175px;
	background:#fae2d3 url(image/menu_border_vert.jpg) left repeat-y;
}

#menu_bottom .right{
	width:175px;
	background:url(image/menu_border_vert.jpg) right repeat-y;
}


#menu_bottom .top{
	background:url(image/menu_top.jpg) no-repeat top;
}

#menu_bottom .bottom{
	background:url(image/menu_bottom.jpg) no-repeat bottom;
}

#menu_bottom div{
	width:100%;
	background:url(image/delimeter_menu.gif) no-repeat;
	padding-bottom:10px;
	padding-top:10px;
}

#menu_bottom a{
	text-decoration:none;
	outline:none;
	color:#000000;
}

#menu_bottom a:hover { 
background:#e66d24; 
color:#FFFFFF; 
}

#menu_bottom a:hover div { 
background:#e66d24; 
color:#FFFFFF;
}

Но справа граница не работает. Помогите, плиз!

_Tornado_ · December 19, 2010

сорри, не тот css код, вот новый

#menu_bottom{
	width:175px;
	background:#fae2d3 url(image/menu_border_vert.jpg)  left repeat-y;
	display:block;
}

#menu_bottom .right{
	width:175px;
	background:url(image/menu_border_vert.jpg) right repeat-y;
}

#menu_bottom .top{
	background:url(image/menu_top.jpg) no-repeat top;
	border-top:none;
}

#menu_bottom a:hover .top{
	background:#e66d24 url(image/menu_top_h.jpg) no-repeat top;
}

#menu_bottom .bottom{
	background:url(image/menu_bottom.jpg) no-repeat bottom;
}

#menu_bottom a:hover .bottom{
	background:#e66d24 url(image/menu_bottom_h.jpg) no-repeat bottom;
}

#menu_bottom div{
	width:100%;
	background:url(image/delimeter_menu.gif) no-repeat;
	padding-bottom:10px;
	padding-top:10px;
	border-top:1px solid #e66d24;
}

#menu_bottom span{
	padding-left:15px;
}

#menu_bottom a{
	text-decoration:none;
	outline:none;
	color:#000000;
}

#menu_bottom a:hover{ 
	background:#e66d24; 
	color:#FFFFFF; 
}

#menu_bottom a:hover div{ 
	background:#e66d24; 
	color:#FFFFFF;
}

но класс right не работает

eVErl@Sting · December 20, 2010

http://www.laminat-shop.ru/price/menu.htm вот

Вот, но это не кроссбраузерный вариант. В Опере, Хроме и Сафари все ок, в Мазиле тэг <li> как ссылка не воспринимается, только на текст навести можно чтобы по ссылке перевести, может как то пофиксить можно, хз, решил не заморачиваться так сильно. В ИЕ округление краев не работает, но можно найти как заставить работать, погугли на эту тему, есть java скрипты которые могут в ИЕ заставить работать округление.

Int · December 20, 2010

border-radius

eVErl@Sting · December 20, 2010

border-radius

Блин вот нету кнопки карму тебе понизить)

border-radius будет работать только в ИЕ 9..поддержка есть только в самых последних версиях браузеров http://htmlbook.ru/css/border-radius

Тем более у меня там border-radius прописан, там 3 правила для разных браузеров идет, сафари, мазилы, оперы и хрома, но чтобы это заработало в ИЕ 8 и ниже нужно будет специальный ява скрипт внедрять который углы округляет или поверх png картинки по углам в ИЕ добавлять..общая проблема фиксов на яве это что они все углы блока округляют, а не по выбору..

Edited December 20, 2010 by eVErl@Sting

Vlad · December 20, 2010

На IE обычно забивают и в нем уголки выглядят обычными квадратными, во всех остальных браузерах работает border-radius.

Int · December 20, 2010

Вот именно. Ещё бы под links верстали. IE - не браузер, точка.

Кстати, люблю когда мне рейтинг понижают, так смешно наблюдать, что для кого-то рейтинг что-то значит.

Edited December 20, 2010 by Int

eVErl@Sting · December 20, 2010

IE - не браузер, точка. смотрите кто это говорит)

Под ИЕ большая часть России на сайты заходит..и чего им написать при загрузке сайта типа ИЕ не браузер, точка, я так решил! Заходите под другим сайтом?

Vlad · December 20, 2010

eVErl@Sting, спокойно, держите себя в руках. Холивары не разводить!

sigma77 · December 20, 2010

border-radius будет работать только в ИЕ 9..поддержка есть только в самых последних версиях браузеров http://htmlbook.ru/css/border-radius

border-radius будет работать не только в ИЕ9, если погуглить и использовать скрипт

В большинстве случаев работают они вполне удовлетворительно.

Int · December 20, 2010

Под ИЕ большая часть России на сайты заходит..

Только если с работы, где злобные админы сами себе враги. Так и нечего на работе по сайтам шастать.

А у меня вот нет ни одного знакомого, кто пользовался бы IE. Даже знакомая фрезеорвщица уже пользовалась FF когда мы познакомились. Видимо, мы в разных Россиях живём.

и чего им написать при загрузке сайта типа ИЕ не браузер, точка, я так решил! Заходите под другим сайтом?

Просто написать "Если тебе шашечки и ехать - смени браузер, если только ехать - оставь как есть."

Под другим сайтом

Edited December 20, 2010 by Int

mishka · December 20, 2010

Ребят, набросайте ктонить код с бордер радиусом, плиз ну очень посмотреть хочется. Думаю вы увидите один не очень приятный сюрприз.

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

http://www.laminat-shop.ru/price/menu.htm вот
Вот, но это не кроссбраузерный вариант. В Опере, Хроме и Сафари все ок, в Мазиле тэг <li> как ссылка не воспринимается, только на текст навести можно чтобы по ссылке перевести, может как то пофиксить можно, хз, решил не заморачиваться так сильно. В ИЕ округление краев не работает, но можно найти как заставить работать, погугли на эту тему, есть java скрипты которые могут в ИЕ заставить работать округление.

<ul>
			<a href="#"><li class="top"><span>Пункт 1</span></li></a>
			<a href="#"><li class="bb"><span>Пункт 1</span></li></a>

			<a href="#"><li class="bb"><span>Пункт 1</span></li></a>
			<a href="#"><li class="bb"><span>Пункт 1</span></li></a>
			<a href="#"><li class="bb"><span>Пункт 1</span></li></a>
			<a href="#"><li class="bottom"><span>Пункт 1</span></li></a>
	 </span>
	</div>

такого я еще и невидел

eVErl@Sting · December 21, 2010

Ты просил меню как на фотке, чего тебе еще надо? только в ИЕ 8 и ниже не пашет и все и еще мелкий баг в мазиле, но тебе сказали что это решаемо округливанием углов png картинками для IE поверх меню

 <a href="#"><li class="bb"><span>Пункт 1</span></li></a>

может это и слегка не правильно, но делалось чтобы весь блок был ссылкой в какое место не навести, а не только текст, если оставить просто текст то приходилось бы мышкой прям на текст наводить, а тут просто на любое место блока и все..

Edited December 21, 2010 by eVErl@Sting

eVErl@Sting · December 21, 2010

Переделал по умному http://www.laminat-shop.ru/price/menu.htm , но то первое решение было же быстрым наброском чтобы направить в нужную сторону. Сейчас все пашет нормально все всех браузерах кроме ИЕ8 и ниже. Для ИЕ сделай отдельный стиль где по углам раскиданы png картинки с фоном на котором меню будет лежать и с вырезанными полукругами..

mishka · December 21, 2010

Ты больше так "в нужную сторону" не направляй

<ul>
			<li class="top"><a href="#"><div><span>Пункт 1</span></div></a></li>
			<li class="bb"><a href="#"><div><span>Пункт 1</span></div></a></li>

			<li class="bb"><a href="#"><div><span>Пункт 1</span></div></a></li>
			<li class="bb"><a href="#"><div><span>Пункт 1</span></div></a></li>
			<li class="bb"><a href="#"><div><span>Пункт 1</span></div></a></li>
			<li class="bottom"><a href="#"><div><span>Пункт 1</span></div></a></li>
	 </span>
	</div>

Да уж. Направил.

Вот мой пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>test</title>
	<style type="text/css">
		.menu {
			padding: 0;
			list-style: none;
		}
		.menu li {
			border: 1px solid #000;
			border-bottom-width: 0;
			/* для ие6-7 чтобы избежать "непонятных" вертикальных отступов */
			width: 100%;
			vertical-align: top;
		}
		.menu li.first-child {
			border-bottom: 0;
			border-radius: 10px 10px 0 0;
			-moz-border-radius: 10px 10px 0 0;
			-webkit-border-radius: 10px 10px 0 0;
		}
		.menu li.last-child {
			border-bottom-width: 1px;
			border-radius: 0 0 10px 10px;
			-moz-border-radius: 0 0 10px 10px;
			-webkit-border-radius: 0 0 10px 10px;
		}
		.menu a {
			display: block;
			padding: 10px;
		}
		.menu li.active,
		.menu li:hover { background: #f00; }
		.menu li.active a,
		.menu li:hover a { color: #000; }
	</style>
</head>
<body>
	<ul class="menu">
		<li class="first-child"><a href="#">link</a></li>
		<li><a href="#">link</a></li>
		<li class="active"><a href="#">link</a></li>
		<li><a href="#">link</a></li>
		<li class="last-child"><a href="#">link</a></li>
	</ul>
</body>
</html>

eVErl@Sting · December 21, 2010

Ну ты лишь упростил код, не чего нового, суть то тажа, что мое меню, что твое, 1 в 1. Я просто не хотел так заморачиваться и я переделывал его код по быстрому, а не писал свой. В любом случае классный у тебя код получился, мне понравилось.

Edited December 21, 2010 by eVErl@Sting

_Tornado_ · December 22, 2010

Переделал по умному http://www.laminat-shop.ru/price/menu.htm , но то первое решение было же быстрым наброском чтобы направить в нужную сторону. Сейчас все пашет нормально все всех браузерах кроме ИЕ8 и ниже. Для ИЕ сделай отдельный стиль где по углам раскиданы png картинки с фоном на котором меню будет лежать и с вырезанными полукругами..

Спасибо большое. А почему картинки должны быть именно в png? или можно в другом формате?

Temiks · December 22, 2010

можно и в другом

Edited December 30, 2010 by Temiks

Sign In

Меню с круглыми углами

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information