Search the Community

Друзья, приветствую и прошу помощи. Подскажите пожалуйста, как сделать полоски меню во всю ширину экрана (оранжевые) на сайте http://diagnostmaster.ru То есть чтобы они фоном выходили за длину в 1110 px. Заранее благодарен.

Здравствуйте! На странице выполнено фиксированное верхнее меню определенной ширины. Каким образом менять ширину меню при прокрутке?

Помогите, люди добрые!! Совсем запутался в решении проблемы... В общем, необходимо, чтобы при наведении на пункт меню фон менялся с черного на белый, а цвет ссылок наоборот, с белого на черный. С родительским пунктом меню всё работает, но с пунктами подменю начинается неразбериха - http://jsfiddle.net/3vfxua8q/ Заранее спасибо!

Приветствую! Я только изучаю bootstrap и в дизайне не силён. У меня такая проблема: Меню .navbar реализовано, как "липкое меню" и при прокрутке, когда прикрепряется к верху, его целостность рушится и подкладывается под карусель.

Всем доброго дня. Проблема следующая: Есть пункт в меню (и соответственно раздел на сайте) - портфолио, которое имеет в себе подпункты "1" "2" "3" "4". На странице решил сделать сортировку. Т.е. можно отобразить все работы, либо работы одного из разделов. Поскольку каждый из этих разделов отображен в выпадающем меню, хотела бы узнать, как сделать переход на каждый из вариантов сортировки. Как выглядит сортитовка: http://tympanus.net/Tutorials/CSS3FilterFunctionality/index3.html В коде это сделано так: <section class="ff-container" style="padding-top: 200px;"> <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" /> <label for="select-type-all" class="ff-label-type-all">All</label> <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" /> <label for="select-type-1" class="ff-label-type-1">Web Design</label> <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" /> <label for="select-type-2" class="ff-label-type-2">Illustration</label> <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" /> <label for="select-type-3" class="ff-label-type-3">Icon Design</label> <div class="clr"></div> <ul class="ff-items"> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/366400-Chameleon"> <span>Chameleon</span> <img src="images/1.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/272575-Tutorials-wip-"> <span>Tutorials (wip)</span> <img src="images/2.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/372566-Flower"> <span>Flower</span> <img src="images/3.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/138484-Symplas-website"> <span>Symplas website</span> <img src="images/4.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-"> <span>TRON: Mobile version</span> <img src="images/5.jpg" /> </a> </li> <li class="ff-item-type-2"> <a href="http://dribbble.com/shots/347197-Cake"> <span>Cake</span> <img src="images/6.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/186199-Tailoring-accessories"> <span>Tailoring accessories</span> <img src="images/7.jpg" /> </a> </li> <li class="ff-item-type-3"> <a href="http://dribbble.com/shots/133859-App-icon"> <span>App icon</span> <img src="images/8.jpg" /> </a> </li> <li class="ff-item-type-1"> <a href="http://dribbble.com/shots/188524-Event-Planning"> <span>Event Planning</span> <img src="images/9.jpg" /> </a> </li> </ul> </section>Пробовала сделать через якоря, ничего не получается, прошу, профы, помогите с задачей(

Доброго времени суток! Возникает проблема, когда я пытаюсь уменьшить окно, мое меню съезжать прям на логотип, каким образом можно это исправить? надо чтобы менюшка переходили на новую строку не съезжая на логотип. Для меню у меня стоит фиксированный размер font-size: 14px. Как можно исправить? Спасибо.

Всем привет! Столкнулся с довольно необычной проблемой, а именно, когда добавляю тег <form> съезжает меню в шапке. Ладно бы если бы они находились в одном блоке, но они в совершенно разных блоках. Может я что-то проглядел, буду благодарен за помощь! На 1-ом фото как должно быть (без тега <form>) На 2-ом как он есть (с тегом <form>) Вот ссылка на код: https://jsfiddle.net/m84s70n2/(он, естественно, без картинок) Вот ссылка на сам файл: https://yadi.sk/d/Ho1JZJAoiPtbP

Здравствуйте! Верстаю макет в учебных целях, взятый отсюда - http://font-family.ru/luchshie-besplatnye-psd-makety-sajtov-dlya-verstki/psd-templates-website-01/, и у меня возникли некоторые проблемы, которые никак не выходит решить. Вот ссылка на мою верстку http://site.cy50484.tmweb.ru/ 1. Как у элемента меню HOME убрать hover? 2. HOME должен быть активен, задала дополнительным классом подложку под него, но она слишком высокая, как сделать так, чтобы она была по размеру как hover у других элементов меню? При выставлении ей высоты, или изменения высоты у элементов меню все сползает вверх. 3. Как сделать элементы меню в hovere чуть ближе к правому краю, а не по центру? 4.Как самостоятельно сделать на слайдере подписи к слайдам, появляющиеся на них в прозрачной рамке (description)? Нужно именно в скрипте работать, и знать его? 5. Слайдер кривой из-за конфликтов ul, т.к. они общие, но тем не менее, выпадающее меню (при наведении на ABOUT, PORTFOLIO) не все "перебирается" из-за слайдера, хотя position:absolute. Что с этим делать? Буду очень благодарна за помощь, всем прочитавшим большое спасибо

Подскажите, для чего горизонтальное меню оборачивать в ul>li, если можно обойтись только дескриптером '<a>'? Только чтобы меню формально было списком? В чем подвох и почему никто так не делает? Привожу ниже мой код и скриншот готового меню. <!DOCTYPE html><title>Test Page</title><meta charset = "utf-8"><link rel = "stylesheet" href = "style.css"><div> <nav> <a href="#">Home</a> <a href="#">Portfolio</a> <a href="#">About</a> <a href="#">Contacts</a> <a href="#">Forum</a> <a href="#">Support</a> <a href="#">Callback</a> </nav> <header></header></div>body { margin: 0; padding: 0; font-family: Arial;}body div { background: #eee; height: 1000px;}nav { display: block; background: #333; height: 34px;}nav a { color: white; display: block; float: left; line-height: 34px; padding: 0px 20px; text-decoration: none; font-size: 12px;}nav a:hover { background: #29b4f9;}header { background: #29b4f9; display:block; height: 150px;} P.S.: Может еще какие-то ошибки в коде есть, или можно написать как-то лучше — буду рад если не промолчите.

Скажите как реализовать вот такую кнопочку для отображения и скрытия меню http://dev.webdesign-master.ru/_wp_html/ или вот http://www.rawnet.com/

Какое значение left:; и top:; выбрать или что то добавить для меню что бы оно имело одно положение на разных мониторах? Пишу в процентах например left:37.7%; top:324%; то в таком случае на мониторе как у меня 1366/768 оно(кнопка или меню) занимает нужное (и нормальное с виду) положение. НО если смотреть на мониторе 1280/1024 то положение кнопки намного ниже чем необходимо и вид какой то "***" что есть вполне логичным так как проценты считал под свой монитор... ЧТО ДЕЛАТЬ? Не знаю как в теме отобразится код меню в теме на форуме... поэтому даю вам ссылку на страничку с "демо" и кодом меню http://mmdd.info/page2.html На страничке одна кнопка - но разницы нет так как меню строится тем же кодом только додаются пункты. На полноценной страничке наполненной контентом кнопку ставлю далеко и так как уже говорил выше на моем мониторе она расположена идеально а на других т*по Вот код: <div id="html5" style="position:relative; overflow:hidden; left:37.7%; top:324%; background-size: cover; z-index:1"><head><title>ПРИСОЕДИНИТЬСЯ</title> <style type="text/css">.navigation3 { list-style: none;}.navigation3 li { float: left; margin-right: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; background-size: cover; font-size: 150%;}.navigation3 li a { display: block; padding: 15px 20px; background: #0db5b5; color: #F5F5F5; text-decoration: none; position: static;}.navigation3 li a:hover { background: #92d3d3; color: #000000;}</style></head><body><ul class="navigation3"> <li><a href="http://mmdd.info/partners">ПРИСОЕДИНИТЬСЯ</a></li></ul><body></body></html></div>

Добрый вечер. Буду благодарен тому кто поможет, сместить меню из верхнего положения шапки в нижнее. Спасибо! http://jsfiddle.net/y8cmbg32/

Добрый вечер! После просмотра очередного сайта, где меню изменялось от ширины экрана, возник вопрос "Как сделать Адаптивное меню?". Допустим, при просмотре с большого экрана можно увидеть во всю длину горизонтальное меню, а при просмотре с маленького экрана горизонтальное меню преобразовывается в раскрывающийся\закрывающийся список. Вопрос: Как такое меню сверстать, какие методы при этом использовать? Пример: Зажав клавишу Ctrl + прокручивая колесико мыши, можно видеть как меню видоизменяется.

Что-то не получается убрать этот промежуток. Съехало все после того, как добавил картинку звездочки в элемент списка. <body> <div class='wrapper'> <header> <img src="images/logo.png"> <div class='right'> <a href="#"><img src="images/search.png"></a> <button type='submit'>LOGIN or REGISTER</button></div> <div class='clearfix'></div> </header> <nav> <ul> <li><a href="/home/">Home</a></li> <li><a href="/products/">Products</a></li> <li><a href="/about/">About</a></li> <li><a href="/pages/">Pages</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contact/">Contact</a></li> </ul> <ul class="tool"> <li> <a href="/wish/"> <div><img src="images/star.png"></div> <div>30</div> </a> </li> <li> <a href="/wish/"> <div><img src="images/card.png"></div> <div>30</div> </a> </li> </ul> </nav> <div class="main-item"> <div class="price">$145.99</div> <h2>Pinck shoes</h2> <h2>2013 Collection</h2> <div class='desc'>Nunc non fermentum nunc. Sed ut ante eget leo tempor consequat sit amet eu orci. Donec dignissim dolor eget..</div> </div> <ul class='action-menu'> <li><a href="/view/"><img src="images/eye.png"></a></li> <li><a href="/wish/"><img src="images/wish.png"></a></li> <li><a href="/share/"><img src="images/share.png"></a></li> <li><a href="/buy/"><img src="images/buy.png"></a></li> </ul> </div></body>body { margin: 0; padding: 0; font-family: Calibri;}header{background-color: black; padding: 0 230px; position: relative;}header>img { padding: 10px 0;}header .right { float: right;}header a{ padding: 15px 20px;}header button { border: none; height: 45px; font-size: 12px; padding: 10px 20px; color:#7e7e7e; background-color: #d3d3d3;}nav { background-color: white;}nav a{ text-decoration: none; color:#242424;}nav ul { margin: 0; margin-left: 230px; padding: 0; display: inline-block;}nav li { list-style-position: inside; font: 10pt 'Arial', sans-serif; display: inline-block; background-color: #d3d3d3; padding:25px; margin-right: -4px; font-weight: bold;}.tool { margin-left: 206px; }.tool>li { display: inline-block; width: 90px; line-height: 10px; text-align: center; vertical-align: middle;}.tool>li:first-child{ line-height: 1px; text-align: center; vertical-align: middle;}.tool>li>a>div { display: inline-block; }

Делаю меню вот с таким эффектом: Т.е когда пункт меню активный под ним должна появляться белая черта. Ширина черты пиксель в пиксель должна совпадать с активным пунктом. Суть в том, что у каждого пункта ширина разная. Я пробовал решить проблему с помощью: - box-shadow, - border-bottom, - :after Но везде свои недочеты. Может что-то не до конца делаю. Посмотрите (у меня там не пиксель в пиксель если что) http://codepen.io/anon/pen/xbYBjL Что можно сделать?

Доброго времени суток! Я новичок в сфере Битрикс и PHP, поэтому общаться со мной на эти темы можно, как с пятилетней дурой . Теперь по теме: был сверстан сайт на Html. В нем есть готовое меню, выглядит оно таким вот образом: <div id="menu"> <div class="active" id="nav"> <ul> <li class="active"> <span class="outer_active"> <span> <a class="active" href="index.html"> Главная <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a href="about.html">О нас<span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a> Информация <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> <ul> <li class="toparrow"></li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="ioyo.html"> Общая информация об управляющей организации </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="opfxd.html"> Показатели финансово-хозяйственной деятельности </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="iovr.html"> Информация о выполняемых работах </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="piyoy.html"> Порядок и условия оказания услуг </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="spkao.html"> Случаи привлечения к административной ответственности </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="iosriy.html"> Информация о стоимости работ и услуг </a> </span> </span> </li> <li class="noback"> <span> <span class="span_nonactive"> <a class="sub" href="iocnkr.html"> Информация о ценах на коммунальные ресурсы </a> </span> </span> </li> <li class="menubottom"></li> </ul> </li> <li> <span class="outer_active"> <span> <a href="passport.html"> Паспортный стол <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a href="payment.html"> Оплата услуг <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a href="pribori.html"> Приборы учета <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a href="http://fkr-mosreg.ru"> Капитальный ремонт <span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> <li> <span class="outer_active"> <span> <a href="contacts.html">Контакты<span class="bottom_text"></span> </a> <span class="outer"></span> </span> </span> </li> </ul> </div> </div>Также есть к нему вот такие стили #nav ul li { margin-left:0px; position: relative;}#nav a { color:#383838; cursor:pointer; display:block; float:left; font-size:14px; font-weight:bold; height:68px; line-height:17px; margin-left:25px; margin-top:0; overflow:hidden; padding-left:0px; padding-right:3px; padding-top:25px; text-decoration:none; text-shadow:1px 1px #ffffff;}#nav a span { display:block; color:#383838; font-weight:normal; font-size:11px;}#nav li li a { margin-left:0px; line-height:35px; margin-top:0px; height: 30px; background: none; font-weight: normal; padding: 0; text-indent: 18px;}#nav li li { text-align: left; width: 400px; float: left; padding: 0; background: none; height:30px; padding-top:0px;}#nav ul li ul li a { font-size:12px; line-height:28px; font-weight: normal; ; width:400px; }#nav ul li a { background: none; } #nav ul li ul li { width:400px; background:transparent url(images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; } #nav ul li ul li:hover { background:transparent url(images/fusion_ddmenumidh.png) repeat-y 0px 0px; } #nav { position:relative; z-index:2; height: 30px;}#nav, #nav ul { list-style: none; padding-top: 0px; padding-right: 0px; padding-bottom: 0; padding-left: 0px;}#nav ul { float:left; padding: 0; margin: 0; margin:-3px 0 0;} #nav ul ul a { display: block; text-decoration: none; width: 400px; text-transform: none;}#nav li { float: left; padding: 0; margin-right:0px; background: none; height: 51px;}#nav li ul { top: 59px; position: absolute; left: -999em; height: auto; width: 400px; border-width: 0; margin: 0; padding: 0; margin-left:16px; z-index: 4;}#nav li ul a { font-weight: bold; color:#FFFFFF;}#nav li ul ul { width:400px; margin: -70px 0 0 227px;}* html #nav li ul ul { margin: -74px 0 0 227px;}#nav li:hover ul ul, #nav li:hover ul ul ul,#nav li:hover ul ul ul ul{ left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ left: 0; position: absolute;}#nav li:hover ul { left: 0; background-position: 0 0;}#nav ul li:hover { background:transparent; color:#000000;}#nav li:hover span a{ color:#ffffff;} #nav ul li:hover ul li span span a{ color:#ffffff;} #nav ul li ul li:hover ul li span span a{ color:#ffffff;} #nav ul li ul li ul li:hover ul li span span a{ color:#ffffff;} #nav ul li ul li:hover span span a{ color:#ffffff;} #nav ul li ul li ul li:hover span span a{ color:#ffffff;} #nav ul li ul li ul li ul li:hover span span a{ color:#ffffff;}#nav ul li.active a { background:transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt; color:#ffffff; text-shadow:1px 1px #000000;} #nav ul li:hover a{ background: transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt; color: #ffffff; text-shadow: 1px 1px 1px #000000; font-family: Tahoma, Geneva, sans-serif; font-size: 14px;} #nav ul li:hover ul li a{ background:transparent; color:#ffffff;} #nav ul li ul li:hover a{ color:#ffffff; width:400px;} #nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active { background:transparent url(images/fusion_mleft.png) no-repeat scroll 0 1pt; height:68px;}#nav ul li span.outer { height:68px; width:12px; float:left;} #nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer { height:68px; width:23px; float:left; background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;} #nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer { height:68px; width:23px;} #nav ul li ul li:hover span.span_active { background:none;}#nav span.span_active, #nav span.span_active:hover { height:53px; width:6px; float:left; background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;}#nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover { height:29px;}.outer_active { display:block; height:32px; float:left;} #nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{ color:#cccccc;} #nav ul li li:hover span{ background:none; color:#FFFFFF;}#nav ul li li span.span_active { background:none;} /* Rounded menu top/bottoms */#nav ul li.toparrow, #nav ul li.toparrow:hover { height:16px; line-height:25px; width:400px; background:transparent url(images/fusion_ddmenutop.png) no-repeat scroll 0 0;} #nav ul li.menubottom, #nav ul li.menubottom:hover { background:transparent url(images/fusion_ddmenubot.png) no-repeat scroll 0 0; height:17px; line-height:25px; width:400px;}Задача такая: нужно интегрировать, или как это правильно называется(не сильна я в терминологии) данное меню в шаблон меню Битрикс. А так, как я не сильна ни в Битриксе, ни в PHP, шаблон template.php Битрикса вызывает у меня тихий ужОс. Огромная просьба, помогите с созданием этого дела, мучаюсь вторую неделю, перерыла все просторы рунета. P.S. Еще раз прошу прощения за тупость.

Необходимо меню позиционировать справа в блоке, а выпадающие пункты должны выпадать влево: песочница (просмотр full screen) ...и при наведении на раздел 3 выпадает список с подразделами, однако пункты раздел 1 и раздел 2 тоже уезжают влево на уровень подразделов. Как не бился не могу исправить... ...помогите, что-то логику ни как не могу понять с этой многоуровневостью.

Добрый день! Делаю сайт на друпал и пока только разбираюсь в нем. Возникла одна проблема. Подскажите пожалуйста каким образом можно вывести список терминов таксономии в виде списка, вместе с названиями нод, которые содержат соответствующие термины. Т. е. : Есть небольшой каталог товаров (нод), каждый из которых относится к одному или нескольким терминам таксономии. И мне нужно вывести в многоуровневое меню все разделы товаров, с их дочерними элементами (термины словаря), а как следующий уровень в этот список нужно добавить названия самих товаров. Например... Таксономия: ЭлектроникаТелефоныПланшетыТовары: Телефон 1Телефон 2Телефон 3Планшет 1Планшет 2 Нужно сделать так: ЭлектроникаТелефоныТелефон 1Телефон 2Телефон 3ПланшетыПланшет 1Планшет 2 Нашел в интернете много уроков и многое перепробовал, получалось выводить термины в виде дерева, получалось выводить ноды относящиеся к термину на странице... А вывести Термины и их ноды в одном списке никак не получается. Подскажите пожалуйста. Заранее спасибо.

Когда наводишь курсор на пункт меню, например "Главная", то все остальные пункты меню смещаются в право. Как сделать, что бы они были неподвижны? http://jsfiddle.net/#&togetherjs=iV0b6oJUzE

Доброго дня всем. Возникла проблема с выпадающим меню на сайте http://izodecor.md , а точнее никак не удается выдвинуть меню вперед. z-index не помогает или я что-то не так делаю (я новичок в этом) хотя сам DIV с меню располагается внутри "злого" DIV-а который и перекрывает меню . Устал биться - перечитал с полсотни постов и так ничего и не понял - прощу помощи. Не сплю уже вторые сутки и мозг просто не выдержит еще даже 10 страниц чтива. Подозреваю, что проблема кроется в "overflow: hidden" но самостоятельно не догоняю, где чего исправить. В общем - HELP!

Как-то встречал статью, как лучше сделать такое меню, но негде не могу ее найти. Может подскажите? Заранее спасибо.

http://jsfiddle.net/WESAu/ В общем не знаю как сделать, что бы при уменьшении окна браузера эти блоки меню не уходили друг под друга, а оставались на месте вне обзора

Смена класов(отдельно) для пунктов меню Вот есть такая структура меню: и есть такой вот скриптик для отображения активной вкладки меню: Вопрос в следующем. Как сделать, чтобы добавление класса происходило индивидуально, а не как сейчас(что к любому активному пункту добавляется класс "activeClass")?

вот весь код http://codepen.io/anon/pen/hcyka Проблема в том, что при выборе пункта, он не остается активным, до выбора следующего. Я смотрел все темы на этом форуме и ничего не нашел для моего случая. Главная загвоздка в том, что блок, где отображается инфа и блок, где пункты меню - не должны быть вместе, а раздельно (т.к. пункты должны быть в меню, которое выезжает сбоку, а контент закреплен отдельно от меню) прошу, сделайте мне кодик) там я так понимаю надо дописать js. А я в js не шарю почти) Всем зарание спасибо огромное.

<div id="menu"> <ul> <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></ul></div> #menu ul { font: 14px arial; display: inline-table; position: relative; margin: 0; padding: 0; width: 100%;}#menu li { float: left; list-style: none; width: 100%; text-align: center; }#menu li a { text-decoration: none; display: block; color: black; background: white; padding: 15px;}#menu li a:hover { color: black; background: #DCDCDC; transition: all .2s ease-in-out;}#menu ul ul {display: none; position: absolute; top: 100%;}#menu ul ul li { float: none; position: relative;}#menu ul li:hover > ul { display: block;}