Проблема с закруглением углов у меню

[chiffenok]

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

просто закруглить края у ul с классом b-nav, здесь не проходить. Нужно закруглить у первого div c классом b-nav__wrap-item и у последнегою С последним сложности список может раскрываться и закрываться, т.е нужно закруглить у последнего видимого. Помогите пожалуйста уже по разному и со скриптами, не получаются, чувствую что решение должно быть проще, здесь можно посмотреть верстку http://business-dev22.alleanza.ru , левое меню

<ul class="b-nav b-nav_level1">
	 <li class="b-nav__item">
	 <div class="b-nav__wrap-item"><a href="" class="b-nav__link">Боксы, коробки, тара</a><i class="b-nav__ar"></i></div>
	 <ul class="b-nav b-nav_sub-level2">
	 <li class="b-nav__item"><div class="b-nav__wrap-item"><a href="" class="b-nav__link">Пункт 1 переносится на следую- щую строку</a></div></li>
	 <li class="b-nav__item"><div class="b-nav__wrap-item b-nav__wrap-item_active"><a href="" class="b-nav__link">Пункт 2</a></div>
	 </li>
	 </ul>
	 </li>
....
</ul>

ниже мой скрипт по клику на стрелку,

2-мя этими строками я перезначаю класс который закругляет края, работает почти правильно, если только не закрыть и отрыть последний пункт первого уровня

$('.b-nav__wrap-item').removeClass('bdrs-bottom');

$('.b-nav').find('.b-nav__wrap-item:visible').last().addClass('bdrs-bottom');

$('.b-nav__ar').click(function(){
var that = $(this).parents('.b-nav__item').children('.b-nav_sub-level2');
if($.browser.msie && $.browser.version=='7.0')// исправление косяка в ie7
{
if (that.is(':visible')){
	 that.hide();
}else {
	 that.show();
}
}
else {that.slideToggle(300);
$('.b-nav__wrap-item').removeClass('bdrs-bottom');
$('.b-nav').find('.b-nav__wrap-item:visible').last().addClass('bdrs-bottom');
}
});

еще дело в том что решение должно работать и в ie7, эмуляцию я делала с помощью pie , но это даже не суть главное что бы перезначался класс правильно

[Softlink]

Пока вижу только вариант с картинкой. Для ul задать background: #ddd (bottom-corners.jpg) no-repeat 0 100%;

А вообще, лучше забить на ие и делать через nth\last-child

[chiffenok]

не получится так я думаю, 3 уровень меню уже чем основное , так картинку не поставишь

ну вот если щяс не учитывать ie, всеравно без скриптов я не вижу как тут сделать last-child найдет последний div c классом b-nav__wrap-item но он будет скрыт, нужно то токо на последний видимый, пользователь может открывать и закрывать меню а класс с закругленными углами должен отключатся у текущего последнего и подключатся к тому что будет после клика

[Softlink]

по-моему, там все решит селектор .b-nav__item:last-child div{border-radius: 0 0 10px 10px};

Кроме того, есть еще всякие nth-of-type, not и т.д. Вынесите меню на jsfiddle, попробуем сделать.

[chiffenok]

вот - http://jsfiddle.net/2y9ne/ , там щяс мои пока закругления остались на скриптах, красные квадраты это вместо стрелок которые открывают меню

[Николя223]

там по идее сложного ничего быть не должно... тут меню делал, можете оттуда что-нибудь взять... пример

http://jsfiddle.net/H3Bc2/

по поводу border-radius - соглашусь... чтобы и под ie 7-8 лучше сделать с картинками, только классы переключать...

P.S: всё меню в "Ипотеке", нижнии LI как ссылки работают (мне так нужно было))))

Edited January 9, 2013 by Николя223

[chiffenok]

блин ну у вас же не раскрывается последний пункт 1го уровня, из-за которого и проблема, если бы в последнем пункте не было саб меню которое можно открывать и закрывать то было все просто, вы не вникли в проблему

[Softlink]

Вроде везде работает, без скриптов http://jsfiddle.net/Softlink/2y9ne/1/

[chiffenok]

не совсем, откройте пункт Для развлечения

еще в ie 7 какие то странные отступы

[Softlink]

не совсем, откройте пункт Для развлечения

еще в ie 7 какие то странные отступы

Поправьте ссылку, непонятно, что открыть надо.

upd Понял, не досмотрел немного, поправил http://jsfiddle.net/Softlink/2y9ne/2/ Про ие7 посмотреть надо.

upd upd Собственно, у вас в исходном примере этот же баг в ие.

Edited January 9, 2013 by Softlink

[Николя223]

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

у вас в хроме кнопки в корзину немного не так отображаются...

Edited January 9, 2013 by Николя223

[chiffenok]

да, я видела

спасибо всем)

[chiffenok]

увы и ах, требуют поддержку ie 7-8 , сама не могу сделать

[Николя223]

мда... накодил я...

http://jsfiddle.net/nikolya223/XKtmK/

стоп— ещё одно меню увидел... щас допилю..

показалось .. только css свой подставьте, мой коряво получился

красный цвет - класс с закруглёнными краями

и PIE подключите..

проверил ещё раз в IE7 - работает

добил до конца - вот ваш вариант с картинками справа

http://jsfiddle.net/nikolya223/sDnvx/

Edited January 10, 2013 by Николя223

[chiffenok]

А вы пробовали pie подключить? чет у меня не работают углы в ie 7-8

еще есть такой момент может быть категория открыта если пользователь находится где нить внутри сайта, активный пункт обозначается так .b-nav__wrap-item_active

я открываю эту категорию так :

$('.b-nav__wrap-item_active').parents('.b-nav_sub-level2').show().end().parents('.b-nav__item').siblings().children('.b-nav_sub-level3').hide();

но у вас щяс все свертывается

и еще думается мне что такой скрипт очень сильно скажется на производительности сайта, он и так щяс тормозит, там куча скриптов, как то можно наверно его сократить

я вот думаю что можно сделать Softlink, а для ие подключать скрипт, брать его длинный селектор и вставлять в $(), а before и after с эмулировать на том же jquery

upd: попробовала я свой вариант, чет вообще не вариант по-моему(

Edited January 11, 2013 by chiffenok

[Softlink]

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

[chiffenok]

к сожалению у меня это не получается( еще я не уверена будет работать pie на класс который переключают через jquery

[Николя223]

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

по поводу Pie... если не хочет работать, незнаю есть ли смысл другие способы пробовать

может такой способ использовать (если фоновой картинки нет), только он старый и варварский

рисовать дивами в 1px и через .html() подменять оригинал на эту версию

http://www.phpground...um/post-46.html

upd: не удержался и решил до конца тему развить. за основу взял ваши с Softlink - ом мысли. убрал из css не кроссбраузерные выражения, заменил их на Jquery, убрал ошибку связанную с появлением белых полос в IE7.

остался только вопрос с закруглением в IE7-8

upd2: тормозить не должно, там только условий много

http://jsfiddle.net/nikolya223/MqrkW/

Edited January 12, 2013 by Николя223