Mary_RND

Я когда скинула код, не заметила, что стили выпадающего меню не сохранились почему-то. Скинула исправленный код в предыдущем посте =)

У меня не сработало... http://ruki24.ru/servis/ Если наводишь на сайтбар, то открывается меню, но при выводе курсора вправо из области меню, без открытия доп.меню (например при выборе пункта "ремонт и обслуживание"), оно обратно не закрывается. упс код был без стилей на всплывающее меню: https://jsfiddle.net/j2esncc2/3/

Надо было сделать слайд меню, т.е. при наведение на поле появляется меню. Но проблема в том, я указала 100% ширину при hover на блок slide_menu, и соответственно, если когда уходишь с открывшегося меню, оно не уходить. Не могу придумать ничего, кроме этих 100%, так как у некоторых пунктов меню есть всплывающее подменю.. если указываешь ширину меньше, то подменю не видно... Вот сайт для живого примера http://ruki24.ru/servis/ Здесь код https://jsfiddle.net/j2esncc2/1/

Сделала так стили, вроде работает >< .checkbox-list label { width: 120px; float: left; cursor: pointer; } .checkbox-list input { float:left; } .checkbox-list span:before { display:inline-block; position:relative; top:0.25em; left:-2px; content:''; width:24px; height:24px; background-image:url(../images/formelements.png); } input[type="checkbox"] + span:before { background-position: 0 -25px; } input[type="checkbox"]:checked + span:before { background-position: 0 0; }

Так, а как сделать-то в этой структуре, чтобы у меня был свой стиль checkbox? "_" https://jsfiddle.net/u3Lxgxga/9/ - как поменять стили правильно? Я нашла, вот такое решение http://jsfiddle.net/Modder_/5aFaj/ , но почему-то когда делаю локально, не работает Такое чувство, будто js не до конца копирую...

Если я сделаю с данными стилями, то все checkbox будут активны @_@ Вот и спрашиваю, как сделать по другому T_T

Доброго времени суток. Есть checkbox со своим стилем, я находила, как это сделать через id в input и for в label. Можно ли сделать свой checkbox без id, а через class или js? Вот пример моей реализации >.< https://jsfiddle.net/u3Lxgxga/5/

Да! *__* Спасибо ^__^

Не так прочитала ^_^" А можно вопрос такой? http://ruki24.aveas.ru/shop_goods/benzoinstrument/ - вот товары сделаны 50% прозрачностью, и когда наводишь прозрачность уходит Мне сейчас выдали, что надо сделать, чтобы у всех прозрачность была 1, а при наведение на какой-то блок у него 1, а у остальных блоков прозрачность становилась 0,5.... Такое с помощью css вообще сделать можно? О_О

ааа... вот оно как, нужен был еще какая-то обертка >< mouseover - это прокрутка должна быть? Просто вроде ничего не происходит О.о

https://drive.google.com/open?id=0BxhNpLjXhNcKVjhTajdGS1poVVE вот ссылка. Кстати, переставив '.scroll-pane' опять появился глюк, что при первом открытие скрола нету у контента первого таба нету

Вроде сделала, но скрол все равно захватывает заголовок и кнопку подробнее: <div class="tabs vertical"> <ul class="tabs__caption"> <li class="active"><span>Ремонт</span></li> <li><span>Диагностика</span></li> <li><span>Настройка</span></li> </ul> <div class="tabs__content active"> <h4>Ремонт</h4> <div class="text scroll-pane"> Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. </div> <a href="#" class="more">Подробнее</a> </div> <div class="tabs__content"> <h4>Диагностика</h4> <div class="text scroll-pane"> Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. </div> <a href="#" class="more">Подробнее</a> </div> <div class="tabs__content"> <h4>Настройка</h4> <div class="text scroll-pane"> Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. Новое абразивно-отрезное устройство с инновационной и эксклюзивной системой электронного впрыска от STIHL, обеспечивающей превосходное качество работы, меньший расход топлива и значительно более низкий уровень вибрации. Новая система управления двигателем гарантирует легкий запуск без сбоев. Система электронной регулировки подачи воды входит в комплект поставки. </div> <a href="#" class="more">Подробнее</a> </div> </div>

я так поняла, что-то надо поменять в коде для табов? @_@

Спасибо! Только вопрос, при первом наведение для появления блока, у первого таба сразу скролл не появляется, только после того, как перейдешь на второй таб и обратно на первый >.< И вот проблема, мне надо чтобы заголовок "Ремонт бензопил" например и кнопка подробнее, были вне области для скрола... я вроде вытаскиваю за пределы блока, но заголовок и кнопка все равно находятся внутри....

хм... а как это реализовать? >< Новая ссылка на архив https://drive.google.com/open?id=0BxhNpLjXhNcKM2NuY08zVG1va28

Доброго времени суток Я нашла вот такой скрипт преобразования скролла http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html Подключила, но работает он только для контента первого таба, а у последующих он не появляется... Три таба: Ремонт, Диагностика и Настройка. Вот архив верстки, честно пыталась его засунуть на jsfiddle, но запустить табы у меня там не получилось https://drive.google.com/open?id=0BxhNpLjXhNcKbjVPUlJqN2U2a00

Спасибо))) Разобралась) Надо будет все-таки покумекать над этим получше..

Я просто скопировала коды, ничего не меняя. В поле где css написано в настройках scss. Это как-то надо обозначить? template1.css index1.html

Интересно конечно, но при копирование html и css у меня просто большой список.... Что еще нужно кроме html и css?

Так кто-нибудь может сказать как сделать меню так же как на скрине, только не используя display: inline-flex; ? ><

Я ж писала все в начале >< Высота желтого фона и белого, это не важно сейчас, проблема в выделываниях IE11, и Сафари(не совсем обязательно) В IE меню просто не отображает содержимое, а в Сафари списки уходят под друг друга...

https://jsfiddle.net/qt0m52ew/

Ну вот код, просто его еще в сети нет. Не обращайте на высоту белого блока относительно желтого, т.к. без шрифтов =) index.html template.css

Кто-нибудь помогите пожалуйста @_@

Доброго времени суток Проблема забавна. Вот так меню должно выглядеть. Во всех браузерах, не считая белого фона у блока по высоте немного выше желтого, но содержимое выглядит нормально. http://prntscr.com/auhg0r А вот в IE11 и Safari выглядит вот так. http://prntscr.com/auhgv5 - IE11 http://prntscr.com/auhh9f - Safari Если я в убираю дисплей, то в IE11 глюк уходит, но тогда во всех остальных браузерах, в том числе и IE11, меню отображается, как в Safari .menu_dop ul li .menu_dop_wrap { display: inline-flex; } Вот коды меню. html <nav class="menu_dop"> <span class="vertical-text">Ремонт и обслуживание</span> <ul> <li><a href="#">Ремонт бензоинструмента</a> <div class="menu_dop_wrap"> <div class="menu_dop_wrap-ul"> <h4>Бензоинструмент</h4> <ul> <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> <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> <li><a href="#">Генераторы</a></li> <li><a href="#">Воздуходувы</a></li> </div> <div class="menu_dop_wrap-ul"> <h4>Электроинструмент</h4> <ul> <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> <li><a href="#">Шлифмашинки</a></li> </ul> </div> </div> </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> <li><a href="#">Заточка цепи</a></li> </ul> </nav> css /*** Dop menu ***/ .menu_dop ul { margin-left: 45px; } .vertical-text { position: absolute; display: block; color: rgba(29, 35, 40, .4); text-transform: uppercase; font: 11px 'acrommedium', sans-serif; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); letter-spacing:1px } .menu_dop .vertical-text { bottom: 89px; left:-83px; } .menu_dop a{ color: rgba(29, 35, 40, .7); text-decoration: none; transition: 0.1s; } .menu_dop a:hover{ color: rgba(29, 35, 40, 1); } .menu_dop li{ color: rgba(29, 35, 40, .7); font: 13px 'acrommedium', sans-serif; margin-bottom: 6px; list-style: disc; padding-left: 15px; padding-right: 30px; background: url('../images/arrows_submenu.png') no-repeat right 4px; position: relative; } /*menu_dop_wrap*/ .menu_dop ul li .menu_dop_wrap{ display: inline-flex; opacity: ; visibility: visible; position: absolute; left: 275px; top:-178px; height: 260px; padding: 75px 50px; background: #fff; transition: all 0s ease .5s; } .menu_dop ul li:hover .menu_dop_wrap{ opacity: 1; visibility: visible; } .menu_dop_wrap-ul { float: left; height: 280px; width: 100%; overflow: hidden; } .menu_dop ul li .menu_dop_wrap h4{ background: url('../images/line_h4_menu.png') no-repeat 100%; padding-bottom: 45px; margin-bottom: 35px; color: rgba(29, 35, 40, .8); font: 13px 'acrombold', sans-serif; } .menu_dop ul li .menu_dop_wrap ul{ float: left; list-style: none; margin: 50px ; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .menu_dop ul li .menu_dop_wrap ul li{ list-style: none; padding:; margin-bottom: 10px; float: left; width: 200px; background: none; } .menu_dop ul li .menu_dop_wrap ul li a { color: rgba(29, 35, 40, .7); font: 13px 'acrommedium', sans-serif; transition: 0.1s; } .menu_dop ul li .menu_dop_wrap ul li a:hover { color: rgba(29, 35, 40, 1); }