Jump to content
  • 0

Помогите прикрутить готовое боковое меню к странице

Sergey Frolov

Asked by Sergey Frolov,

 Share

Question

Sergey Frolov Explorer

Sergey Frolov

Posted
Posted

Доброго времени суток.

 

Ни как не получается прикрутить готовое боковое меню к сайту, первая проблема это не отоброжает текст когда закидываешь на локальный хост... стоит 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) :o);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) :P.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);

 

 

без этих скриптов текст тоже не отоброжается в меню...

 

 

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • zeiger2
      Смена background-image при работе с псевдоклассом hover
      By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • Reergar
      Помогите найти
      By Reergar
      Добрый день, облазил много сайтов но ничего подобного пока что не нашел. Мне хотя бы ссылку на какой то источник, где я могу найти как настроить именно такую систему.
      Меня интересует: есть два пользователя и владелец сайта(я). Один из владельцев пополняет  своей банковской картой(или платежной системой свой личный  счет на моем сайте. За эти деньги он может купить   что то у другого пользователя. Но при этой транзакции берется комиссия (которая идет на мой счет).
      Результат. Первый пользователь, оплатил покупку у другого, второй получил сумму после вычета комиссии. Я получил комиссию.
    • Reergar
      wget -r -k -l 7 -p -E -nc http://site.com/
      By Reergar
      Подскажите, можно ли через такую команду скачать не весь сайт, а указать которые не нужно(или еще какой способ). При скачивании сайта на котором тысячи аккаунтов и каждый что то пишет и выставляет(в моем случае книги) делает НЕРЕАЛЬНОЕ для скачивания количество фалов. А мне к примеру нужно пару книг всего-то , да и пользователи мне не нужны...  Есть какой то выход? 
    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept