Jump to content
  • 0

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

_Tornado_

Asked by _Tornado_,

 Share

Question

_Tornado_ Explorer

_Tornado_

Posted
Posted

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

Em3fJRw.jpg

вот код

  <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;
}

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

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
_Tornado_ Explorer

_Tornado_

Posted
  • Author
Posted

сорри, не тот 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 не работает

Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted (edited)
border-radius :)

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

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

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

Edited by eVErl@Sting
Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted (edited)

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

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

Edited by Int
Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

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

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

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

Link to comment
Share on other sites
  • 0
Int Explorer

Int

Posted
Posted (edited)
Под ИЕ большая часть России на сайты заходит..
Только если с работы, где злобные админы сами себе враги. Так и нечего на работе по сайтам шастать.

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

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

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

Edited by Int
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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

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

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>

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

Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted (edited)

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

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

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

Edited by eVErl@Sting
Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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

<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>

Link to comment
Share on other sites
  • 0
eVErl@Sting Explorer

eVErl@Sting

Posted
Posted (edited)

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

Edited by eVErl@Sting
Link to comment
Share on other sites
  • 0
_Tornado_ Explorer

_Tornado_

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept