Sergey Frolov
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Sergey Frolov
-
Доброго времени суток. Ни как не получается прикрутить готовое боковое меню к сайту, первая проблема это не отоброжает текст когда закидываешь на локальный хост... стоит 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); без этих скриптов текст тоже не отоброжается в меню...
-
Как найти наставника(гуру, учителья, сэнсэя) по вёрстке?
Sergey Frolov replied to klierik's question in HTML Coding
Доброго времени суток. Я так понимаю ни кто не скачает тот архив и не поможет понять проблему да? -
Как найти наставника(гуру, учителья, сэнсэя) по вёрстке?
Sergey Frolov replied to klierik's question in HTML Coding
Доброго времени суток. Решил я освоить html и css, установил дебиан апачь и пшп на свой компьютер долго возился чтоб заработало пару локальных хостов, но все таки добился. Теперь стоит задача получить основы html и css, скачиваю готовые решения пытаюсь с ними разобраться, переделать, вроде начинало получаться как столкнулся с проблемой на мой взгляд не решаемой... провел кучу времени в гугле, не помогло)) Оглашу суть проблемы, может кто поможет из добрых людей... скачал я боковое меню готовое вот отсюда http://tympanus.net/codrops/2015/11/17/multi-level-menu/ распаковал, запускаю index.html все работает отлично... переношу на локальный хост, не работает зараза хоть тресни... сил уже нет... сижу до 4 утра наверное больше недели, пытаюсь понять... ПОМОГИТЕ ПОЖАЛУЙСТА... а не то я скоро комп разобью)