-
Similar Content
-
By Etaro
Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.
-
By Sve
Всем привет :)
Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
Выходит, как на второй, меню спадает вниз.
Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
Код кидаю:
*{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }
-
By Рома
Доброго дня!
Есть многоуровневое меню (картинка 1)
Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.
Вот код в этом положении
.cs-menu-container .dropdown, ul.type-category li .sub-cate { position: absolute; top: auto; left: 0; z-index: 1000; float: none; min-width: 230px; padding: 0; margin: 0; border: 1px solid #cccccc; border-top:2px solid #c04a62; background: #fff; Что я делаю:
меняю значение left: на -200px;
В итоге получаю нужное мне расположение (картинка 2)
Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
-
By garmoni
Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
<nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }
-
By d0ublezer0
Собственно, вопрос в заголовке.
Хочется добротное адаптивное меню, складывающееся в гамбургер. Нравится поведение http://mmenu.frebsite.nl/ с выплывающими уровнями в мобильной версии, но оно устроено так, что растянуто по всей высоте, как в приложении. А в десктопном варианте оно должно именно "выпадать". например, как на https://www.ulmart.ru/catalog/mobile_charger
Поделитесь советами из опыта пожалуйста?
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
Aiky
Доброго времени суток! Я новичок в сфере Битрикс и PHP, поэтому общаться со мной на эти темы можно, как с пятилетней дурой
.
Теперь по теме: был сверстан сайт на Html. В нем есть готовое меню, выглядит оно таким вот образом:
Также есть к нему вот такие стили
#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. Еще раз прошу прощения за тупость.
Link to comment
Share on other sites
4 answers to this question
Recommended Posts
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.