Поиск по сайту

Результаты поиска по тегам 'сайт'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)
  • Draft

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 58 результатов

  1. Всем привет! Вопрос по #svg ! Нужно поделить екран на 4 треугольника(как на картинке, ссылка на гугл диск с картинками и сами картинки снизу). В этих треугольниках должна быть картинка и пару строк контента, ну и наведение работать должно. Пробовал крутить блоки, но посмотрев, что адаптивность умирает — решил пойти через свг, но так как не шарю в viewBox и point`ах застрял((. Если у вас есть другие варианты решения, с радостью жду! Заранее спасибо! ССЫЛКА НА ПАПКУ С КАРТИНКОЙ: drive.google.com/...OB17Nn6PExYTluN0lVcm1xOW8 а также ФАЙЛЫ САЙТА: drive.google.com/...OB17Nn6PExTUdFODNXYzRNOTA ——————————————HTML————————————————— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body> <div class="svg_1"> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> <p class="ffggtt">ывмвыывп<p> <svg class="svgshka_2" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg class="svgshka" version="1.1" width="50%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#492121" points="0,100 50,0 100,100"/> </svg> <svg version="1.1" width="100%" height="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" > <polygon fill="#9E2929" points="0,100 50,0 100,100"/> </svg> </div> </body> </html> —————————————-CSS——————————————— * { height: 100%; margin: 0; padding: 0; } .svg_1 { width: 100%; height: 100%; box-sizing: content-box; } .svg_1 svg:first-child { width: 100%; height: 50%; display: block; transform: rotate(180deg); } .svg_1 polygon:hover { fill: #C53737; } .svg_1 svg { width: 100%; height: 50%; display: block; } .ffggtt { position: absolute; z-index: 9999; left: 50%; }
  2. https://proverka1.000webhostapp.com/ На пк сайт отлично работает, а на сервере не запускает css файлы : wp-content/plugins/fullpage172/fullpage/nav/section/filled-circles.css@ver=2.9.2 ; Перерыл весь интернет и не нашел ответа.Помогите )
  3. Как называется сайт, который позволяет любому человеку зарегистрироваться на нём и создать пост с объявлением об определённом событии? Сайт листинг, или портал, или как-то ещё? Если более подробно, то при регистрации юзер получит свою страничку и возможность создавать посты, которые будут отображаться в общей ленте новостей. Может это соцсеть? Хочу сделать такой сайт на WP. Заранее спасибо.
  4. Добрый день! У меня есть сайт где продаем различные строительные материалы. Сейчас там таблицы с перечнем услуг и примерными ценами и как правило клиенты звонят что-бы уточнить что-то, найти. Это очень отнимает времени. Решили как-то автоматизировать дело, чтобы все расчеты, выбор материалов, комплектующие клиент смог выбрать и ему тут же отобразилась нужная цена. У фрилансеров поспрашивал, выходит очень дорого и много делать. Может есть ли какие-нибудь вообще сервисы онлайн для создания калькуляторов или расчетов. Чтобы я мог пусть и не самостоятельно, с чей нибудь помощью на первое время, попробовать создать то что мне нужно?
  5. У меня вот такой вопрос: я в данный момент создаю свой портфолио, небольшой, но, вроде как, красивый, без излишеств сайт на несколько страниц. Вопрос вот в чем: ssi я в данный момент юзать не могу (проблемы со стороны хоста, возможно решат в ближайшее время), можно ли делать банально несколько html и вязать гиперссылками? для начинающего разработчика пойдет? или обязательно нужно абы-как подключать ssi, либо подобные скрипты?
  6. Я столкнулся с такой проблемой, что мне нужно сделать на сайте таймер который будет выполнять функцию даже если на сайте не сидит ни одного человека. Я не знаю как это сделать и через кокой язык. Кто знает, помогите.
  7. Ищу верстальщика для создания дизайна и вёрстки сайта.Подробности по почте или в вк.
  8. Разработка сайта недорого

    Разработка сайта недорого) internet-marketing.dp.ua/uslugi/sozdanie-sayta/
  9. Всем привет. Есть калькулятор по ссылке http://billprof.ru/stoimost.html. Нужно его сделать покрасивее, динамичнее, и сделать вывод результата кнопкой. Подскажите что не так? Я написал CSS-стиль, подгружаю скрипт jquery для подсчета, и подгружаю скрипт для обработки полей select. Но почему то не считает результат. Помогите люди добрые, нужно что бы считал результат, и выводил нажатием по кнопке;(( index.htm style.css generic.css jquery-1.11.3.js jquery.animateNumber.min.js select.js
  10. Привет! Есть готовые psd макеты лендингов. Если кто-нибудь готов сверстать сайт для портфолио бесплатно или же за символическую оплату, пиши мне в ВК - https://vk.com/gamletgalstyan. Или можешь в WhatsApp написать +7(919)032-72-32, ну или уж в телеграмме меня можешь найти - @gamletov1ch Спасибо!)
  11. Работа с аудио в js

    Как сделать так, чтобы при включении аудио на сайте, уже включённое ранее аудио останавливалось? Они просто проигрываются вместе!
  12. Добрый день! Полагаю, что мой вопрос совсем "детский", но прошу помощи, мне в силу возраста самой сложно разбираться в верстке. Буду очень признательна за помощь! Собственно проблема: через скрапбук я скопировала сайт, в файле index.html возникла необходимость поменять форму заказа, чтобы при заказе данные приходили ко мне на почту. Нашла order-section в файле, но непонятно, как именно вносить правки, в поле action стоит значение action="http://vip.fly-bra.com/order" Как сделать так, чтобы во внешнем виде формы не поменялось ничего (в т.ч. и таймер, "зашитый" внутрь нее), кроме, собственно, адреса отправки данных... Спасибо заранее! P.S.: прикрепляю сам index.html, форма находится на строках 330-387. Сайт, с которого производилась копия - http://vip.fly-bra.com/ index.html
  13. Просьба оценить сайт фотографа https://proskuryakova.com.ua/ и дать оценку по улучшениям которые могут повлиять на увеличение конверсии.
  14. Привет Всем! Ищу профессионалов своего дела, требуется создание хорошего продажного Сайта. Прошу писать smarttechnologytlt@yandex.ru
  15. Помогите создать сайт - меню - вот: 1. искусство маникюра 2. галерея 3. наши контакты 4.форум 5. чат 5. прайс лист Катинки все вышлю на почту, нужен ваш почтовый ящик. Фон сайта черный- космическое небо черный с белыми точками http://stardustgame.ru. Похоже на сайт http://hobby-farm.ru - там чат с музыкой сделайте также. Название - галактическая кошка.
  16. Доброго времени суток, форумчане. По дипломному проекту мне задали создание сайта, на котором можно будет распространять платные курсы, которые ведёт моё образовательное учреждение. Нужны: регистрация, вход само собой, сама продажа курсов с автоматической записью людей в группы, в каждой группе определённое количество человек, а так же нужно будет через этот сайт следить за посещаемостью (вообще не понимаю зачем) курсов. Курсы оффлайновые, то есть группа людей в соответствии со своим расписанием будут приходить в образовательное учреждение в установленное время и обучаться. Дело в том, что создание сайтов мы изучали на 2 курсе ровно 2 недели. Чутка выучили html и совсем плохо css. Ищу совета в том, с чего мне начинать, что мне понадобится, какая cms для этого будет лучше и нужна ли она будет вообще.. Ну вы поняли, ищу любого совета. Заранее благодарю.
  17. Доброго времени суток. Нахожусь на начальном этапе карьеры веб-разработчика, поэтому готов сверстать ваш psd макет за символическую цену. Использую bootstrap, поэтому адаптивная верстка не проблема. Связаться со мной можно по почте: rbzone402@gmail.com
  18. Могу сверстать ваш сайт любой сложности за сутки и очень дешево. E-mail: loject2015@gmail.com Skype: loject VK: http://vk.com/loject
  19. Как сделать так, чтобы при включении аудио на сайте, уже включённое ранее аудио останавливалось, вместо проигрывания дальше вместе.
  20. Всем привет! Надо сверстать небольшой проект. По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету. Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно). https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
  21. Здравствуйте. Предлагаю свои услуги по верстке PSD макетов в HTML5/CSS3 с использованием несложных скриптов jQuery на основе bootstrap. Чистый, структурированный код. Внедрение различных jQuery плагинов и скриптов. Цена для каждого проекта индивидуальна и зависит от сложности макета и необходимого функционала. По цене со мной всегда можно договориться. Оплата: - WebMoney Интересует долгосрочное сотрудничество. Контакты: email: 3dben@mail.ru Skype: скидываю в л/с Примеры верстки:
  22. Приветствую всех. Прошу оценить сайт, в первую очередь, по таким меркам: 1) удобосмотрибельность-удобочитаемость; 2) доступность меню (заметил, что многие кликают на шрифт-иконки на "главной", хотя они не содержат ссылок... и как сделать из них ссылки?); 3) как загружается, быстро ли? 4) не присутствуют ли косяки при просмотре на мобильных устройствах? 5) что посоветуете, для оптимизации (только конкретно, как в армии); 6) смена заставок на "главной" - сойдёт? или имеет смысл выбрать одну, без использования прокрутки? 7) что Вы, лично, сделали бы для улучшения; 8) не забудьте отметить положительные моменты ( это улучшит Вашу карму и морально поддержит создателя (сайта, имеется ввиду); Скажу честно и в качестве предупреждения: знаниями в области HTML обладаю в минимальном количестве, а знания CSS были утеряны в новогодние дни 1997 года. Сайт создан на основе шаблона MAZEL. Создавался сайт на коленке, в гараже, без электричества и отопления, при свете фонарика, исключительно в брезентовых рукавицах. СЛОВА И КАРТИНКИ Да! чуть не забыл... С новым Годом вас! Желаю вам добра, радости, достатка!
  23. Нашел готовый шаблон сайта, сайт простой, (шапка, боковое меню слева, около 15 пунктов, в центре блоки с инфой, справа и снизу реклама, но это к делу не относится.) С В папке с сайтом только index.html и редактировать могу только его, т.е основную страницу, так же там картинки+css, но в это можно не лезть, вся суть в страницах. Кто поможет разобраться и скажет, как отредактировать каждую страницу? На хостинге, когда заливаю этот шаблон работают все страницы, но как их редактировать мне не понятно. Помощь оплачу. (Лучше указывайте сразу цену за работу)
  24. Дорогие форумчане! Я начинающий фрилансер, хочу предложить Вам свои услуги по верстке лендингов (одностраничников). По этому цена на верстку не превышает 1000 руб. Проверяю на правильное отображение лендинга во всех браузерах. Верстаю в редакторе SublimeText с различными плагинами для ускорения процесса, так что верстка не будет долгой)). Сжимаю картинки и оптимизирую скорость загрузки странички. Верстка блочная без лишнего кода, как обычно бывает в различных билдерах. Если заинтересовало мое предложение напишите на почту super.verstka@gmail.com или в мою группу ВК https://vk.com/super.verstka
  25. Доброго времени суток. Ни как не получается прикрутить готовое боковое меню к сайту, первая проблема это не отоброжает текст когда закидываешь на локальный хост... стоит apache, php... локальные хосты работают отлично. когда запускаешь index.html из папки все работает на удивление... Мои подозрения пали на js, в этом я полный ноль, да и в html не очень силен... поэтому прошу помощи у панимающих людей которым не жалко своего времени на такого пацана как я... P.S. когда то вы же и сами были такими, а во круг и подсказать не кому, а разобраться очень хочется... спасибо за понимание... вот index.html <!DOCTYPE html> <head> <meta charset="UTF-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <!-- menu styles --> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr-custom.js"></script> <script src="js/main.js"></script> <script src="js/classie.js"></script> </head> <body> <!-- Main container --> <button class="action action--open" aria-label="Open Menu"><span class="icon icon--menu"></span></button> <nav id="ml-menu" class="menu"> <button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button> <div class="menu__wrap"> <ul data-menu="main" class="menu__level"> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk & Drinks</a></li> </ul> <!-- Submenu 1 --> <ul data-menu="submenu-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li> <li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li> <li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li> <li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li> <li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li> </ul> <!-- Submenu 1-1 --> <ul data-menu="submenu-1-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Fair Trade Roots</a></li> <li class="menu__item"><a class="menu__link" href="#">Dried Veggies</a></li> <li class="menu__item"><a class="menu__link" href="#">Our Brand</a></li> <li class="menu__item"><a class="menu__link" href="#">Homemade</a></li> </ul> <!-- Submenu 2 --> <ul data-menu="submenu-2" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Citrus Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Berries</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li> <li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Melons</a></li> </ul> <!-- Submenu 2-1 --> <ul data-menu="submenu-2-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Exotic Mixes</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Pick</a></li> <li class="menu__item"><a class="menu__link" href="#">Vitamin Boosters</a></li> </ul> <!-- Submenu 3 --> <ul data-menu="submenu-3" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Buckwheat</a></li> <li class="menu__item"><a class="menu__link" href="#">Millet</a></li> <li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li> <li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">Promo Packs</a></li> </ul> <!-- Submenu 3-1 --> <ul data-menu="submenu-3-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Starter Kit</a></li> <li class="menu__item"><a class="menu__link" href="#">The Essential 8</a></li> <li class="menu__item"><a class="menu__link" href="#">Bolivian Secrets</a></li> <li class="menu__item"><a class="menu__link" href="#">Flour Packs</a></li> </ul> <!-- Submenu 4 --> <ul data-menu="submenu-4" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li> </ul> <!-- Submenu 4-1 --> <ul data-menu="submenu-4-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Nut Mylk Packs</a></li> <li class="menu__item"><a class="menu__link" href="#">Amino Acid Heaven</a></li> <li class="menu__item"><a class="menu__link" href="#">Allergy Free</a></li> </ul> </div> </nav> <script> (function() { var menuEl = document.getElementById('ml-menu'), mlmenu = new MLMenu(menuEl, { breadcrumbsCtrl : true, // show breadcrumbs initialBreadcrumb : 'all', // initial breadcrumb text backCtrl : false, // show back button itemsDelayInterval : 60, // delay between each menu item sliding animation onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item]) }); // mobile menu toggle var openMenuCtrl = document.querySelector('.action--open'), closeMenuCtrl = document.querySelector('.action--close'); openMenuCtrl.addEventListener('click', openMenu); closeMenuCtrl.addEventListener('click', closeMenu); function openMenu() { classie.add(menuEl, 'menu--open'); } function closeMenu() { classie.remove(menuEl, 'menu--open'); } // simulate grid content loading var gridWrapper = document.querySelector('.content'); function loadDummyData(ev, itemName) { ev.preventDefault(); closeMenu(); gridWrapper.innerHTML = ''; classie.add(gridWrapper, 'content--loading'); setTimeout(function() { classie.remove(gridWrapper, 'content--loading'); gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>'; }, 700); } })(); </script> </body> </html> вот к нему СSS: /* Icons (made with Icomoon.io) */ @font-face { font-family: 'feather'; font-weight: normal; font-style: normal; src: url('../fonts/feather/feather.eot?1gafuo'); src: url('../fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../fonts/feather/feather.woff2?1gafuo') format('woff2'), url('../fonts/feather/feather.ttf?1gafuo') format('truetype'), url('../fonts/feather/feather.woff?1gafuo') format('woff'), url('../fonts/feather/feather.svg?1gafuo#feather') format('svg'); } .icon { font-family: 'feather'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; } .icon--arrow-left:before { content: '\e901'; } .icon--menu:before { content: '\e903'; } .icon--cross:before { content: '\e117'; } /* Menu styles */ .menu { position: fixed; top: 0px; left: 0; width: 300px; height: calc(100vh - 120px); background: #1c1d22; } .menu__wrap { position: absolute; top: 3.5em; bottom: 0; overflow: hidden; width: 100%; } .menu__level { position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; overflow-y: scroll; width: calc(100% + 50px); height: 100%; margin: 0; padding: 0; list-style-type: none; } .menu__level--current { visibility: visible; } .menu__item { display: block; width: calc(100% - 50px); } .menu__link { font-weight: 600; position: relative; display: block; padding: 1em 2.5em 1em 1.5em; color: #bdbdbd; -webkit-transition: color 0.1s; transition: color 0.1s; } .menu__link[data-submenu]::after { content: '\e904'; font-family: 'feather'; position: absolute; right: 0; padding: 0.25em 1.25em; color: #2a2b30; } .menu__link:hover, .menu__link[data-submenu]:hover::after { color: #5c5edc; } .menu__link--current::before { content: '\00B7'; font-size: 1.5em; line-height: 0; position: absolute; top: 50%; left: 0.5em; height: 4px; color: #5c5edc; } [class^=animate-], [class*= animate-] { visibility: visible; } .animate-outToRight .menu__item { -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate-outToLeft .menu__item { -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate-inFromLeft .menu__item { -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate-inFromRight .menu__item { -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .menu__breadcrumbs { font-size: 0.65em; line-height: 1; position: relative; padding: 2.5em 3.75em 1.5em 2.5em; } .menu__breadcrumbs a { font-weight: bold; display: inline-block; cursor: pointer; vertical-align: middle; letter-spacing: 1px; text-transform: uppercase; color: #5c5edc; } .menu__breadcrumbs a:last-child { pointer-events: none; } .menu__breadcrumbs a:hover { color: #8182e0; } .menu__breadcrumbs a:not(:last-child)::after { content: '\e902'; font-family: 'feather'; display: inline-block; padding: 0 0.5em; color: #33353e; } .menu__breadcrumbs a:not(:last-child):hover::after { color: #33353e; } .menu__back { font-size: 1.05em; position: absolute; z-index: 100; top: 0; right: 2.25em; margin: 0; padding: 1.365em 0.65em 0 0; cursor: pointer; color: #2a2b30; border: none; background: none; } .menu__back--hidden { pointer-events: none; opacity: 0; } .menu__back:hover, .menu__back:focus { color: #fff; outline: none; } /* Open and close buttons */ .action { position: absolute; display: block; margin: 0; padding: 0; cursor: pointer; border: none; background: none; } .action:focus { outline: none; } .action--open { font-size: 1.5em; top: 1em; left: 1em; display: none; color: #fff; position: fixed; z-index: 1000; } .action--close { font-size: 1.1em; top: 1.25em; right: 1em; display: none; color: #45464e; } @media screen and (max-width: 40em) { .action--open, .action--close { display: block; } .menu { z-index: 1000; top: 0; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .menu--open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } а это дополнительные скрипты: /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2015, Codrops * http://www.codrops.com */ ;(function(window) { 'use strict'; var support = { animations : Modernizr.cssanimations }, animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], onEndAnimation = function( el, callback ) { var onEndCallbackFn = function( ev ) { if( support.animations ) { if( ev.target != this ) return; this.removeEventListener( animEndEventName, onEndCallbackFn ); } if( callback && typeof callback === 'function' ) { callback.call(); } }; if( support.animations ) { el.addEventListener( animEndEventName, onEndCallbackFn ); } else { onEndCallbackFn(); } }; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function MLMenu(el, options) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); // the menus (<ul>´s) this.menus = [].slice.call(this.el.querySelectorAll('.menu__level')); // index of current menu this.current = 0; this._init(); } MLMenu.prototype.options = { // show breadcrumbs breadcrumbsCtrl : true, // initial breadcrumb text initialBreadcrumb : 'all', // show back button backCtrl : true, // delay between each menu item sliding animation itemsDelayInterval : 60, // direction direction : 'r2l', // callback: item that doesn´t have a submenu gets clicked // onItemClick([event], [inner HTML of the clicked item]) onItemClick : function(ev, itemName) { return false; } }; MLMenu.prototype._init = function() { // iterate the existing menus and create an array of menus, more specifically an array of objects where each one holds the info of each menu element and its menu items this.menusArr = []; var self = this; this.menus.forEach(function(menuEl, pos) { var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll('.menu__item'))}; self.menusArr.push(menu); // set current menu class if( pos === self.current ) { classie.add(menuEl, 'menu__level--current'); } }); // create back button if( this.options.backCtrl ) { this.backCtrl = document.createElement('button'); this.backCtrl.className = 'menu__back menu__back--hidden'; this.backCtrl.setAttribute('aria-label', 'Go back'); this.backCtrl.innerHTML = '<span class="icon icon--arrow-left"></span>'; this.el.insertBefore(this.backCtrl, this.el.firstChild); } // create breadcrumbs if( self.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl = document.createElement('nav'); this.breadcrumbsCtrl.className = 'menu__breadcrumbs'; this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild); // add initial breadcrumb this._addBreadcrumb(0); } // event binding this._initEvents(); }; MLMenu.prototype._initEvents = function() { var self = this; for(var i = 0, len = this.menusArr.length; i < len; ++i) { this.menusArr.menuItems.forEach(function(item, pos) { item.querySelector('a').addEventListener('click', function(ev) { var submenu = ev.target.getAttribute('data-submenu'), itemName = ev.target.innerHTML, subMenuEl = self.el.querySelector('ul[data-menu=' + submenu + ']'); // check if there's a sub menu for this item if( submenu && subMenuEl ) { ev.preventDefault(); // open it self._openSubMenu(subMenuEl, pos, itemName); } else { // add class current var currentlink = self.el.querySelector('.menu__link--current'); if( currentlink ) { classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current'); } classie.add(ev.target, 'menu__link--current'); // callback self.options.onItemClick(ev, itemName); } }); }); } // back navigation if( this.options.backCtrl ) { this.backCtrl.addEventListener('click', function() { self._back(); }); } }; MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) { if( this.isAnimating ) { return false; } this.isAnimating = true; // save "parent" menu index for back navigation this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current; // save "parent" menu´s name this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName; // current menu slides out this._menuOut(clickPosition); // next menu (submenu) slides in this._menuIn(subMenuEl, clickPosition); }; MLMenu.prototype._back = function() { if( this.isAnimating ) { return false; } this.isAnimating = true; // current menu slides out this._menuOut(); // next menu (previous menu) slides in var backMenu = this.menusArr[this.menusArr[this.current].backIdx].menuEl; this._menuIn(backMenu); // remove last breadcrumb if( this.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild); } }; MLMenu.prototype._menuOut = function(clickPosition) { // the current menu var self = this, currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false; // slide out current menu items - first, set the delays for the items this.menusArr[this.current].menuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; }); // animation class if( this.options.direction === 'r2l' ) { classie.add(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } else { classie.add(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } }; MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) { var self = this, // the current menu currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false, // index of the nextMenuEl nextMenuIdx = this.menus.indexOf(nextMenuEl), nextMenuItems = this.menusArr[nextMenuIdx].menuItems, nextMenuItemsTotal = nextMenuItems.length; // slide in next menu items - first, set the delays for the items nextMenuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; // we need to reset the classes once the last item animates in // the "last item" is the farthest from the clicked item // let's calculate the index of the farthest item var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0; if( pos === farthestIdx ) { onEndAnimation(item, function() { // reset classes if( self.options.direction === 'r2l' ) { classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } classie.remove(currentMenu, 'menu__level--current'); classie.add(nextMenuEl, 'menu__level--current'); //reset current self.current = nextMenuIdx; // control back button and breadcrumbs navigation elements if( !isBackNavigation ) { // show back button if( self.options.backCtrl ) { classie.remove(self.backCtrl, 'menu__back--hidden'); } // add breadcrumb self._addBreadcrumb(nextMenuIdx); } else if( self.current === 0 && self.options.backCtrl ) { // hide back button classie.add(self.backCtrl, 'menu__back--hidden'); } // we can navigate again.. self.isAnimating = false; }); } }); // animation class if( this.options.direction === 'r2l' ) { classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } }; MLMenu.prototype._addBreadcrumb = function(idx) { if( !this.options.breadcrumbsCtrl ) { return false; } var bc = document.createElement('a'); bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb; this.breadcrumbsCtrl.appendChild(bc); var self = this; bc.addEventListener('click', function(ev) { ev.preventDefault(); // do nothing if this breadcrumb is the last one in the list of breadcrumbs if( !bc.nextSibling || self.isAnimating ) { return false; } self.isAnimating = true; // current menu slides out self._menuOut(); // next menu slides in var nextMenu = self.menusArr[idx].menuEl; self._menuIn(nextMenu); // remove breadcrumbs that are ahead var siblingNode; while (siblingNode = bc.nextSibling) { self.breadcrumbsCtrl.removeChild(siblingNode); } }); }; window.MLMenu = MLMenu; })(window); /*! * classie v1.0.1 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false, module: false */ ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else if ( typeof exports === 'object' ) { // CommonJS module.exports = classie; } else { // browser global window.classie = classie; } })( window ); /*! modernizr 3.2.0 (Custom Build) | MIT * * http://modernizr.com/download/?-cssanimations-prefixed !*/ !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e,a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function s(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e,n){return!!~(""+e).indexOf(n)}function f(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var o;for(var i in e)if(ein n)return t===!1?e:(o=n[e],r(o,"function")?l(o,t||n) );return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=f(x?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,a,l,u="modernizr",p=f("div"),c=d();if(parseInt(r,10))for(;r--;)a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);return i=f("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild©),s=t(p,e),c.fake?(c.parentNode.removeChild©,w.style.overflow=l,w.offsetHeight) .parentNode.removeChild(p),!!s}function m(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(p(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+p(n[o])+":"+r+")");return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,o,i){function l(){p&&(delete z.style,delete z.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var u=m(e,o);if(!r(u,"undefined"))return u}for(var p,d,c,v,h,y=["modernizr","tspan"];!z.style;)p=!0,z.modElem=f(y.shift()),z.style=z.modElem.style;for(c=e.length,d=0;c>d;d++)if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{z.style[v]=o}catch(g){}if(z.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes,f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e) -1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T<Modernizr._q.length;T++)Modernizr._q[T]();e.Modernizr=Modernizr}(window,document); без этих скриптов текст тоже не отоброжается в меню...