Menu of canvas Help

Question

Menu of canvas Help

Navigation

#1 by (0 votes)

-1

Hey guys, I have a menu here that when clicking on an icon it appears. how do I do when the user enters the page he already displays the menu?

Grateful: D

Index -> 
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Off-Canvas Menu Effects - Side Slide</title>
    <meta name="description" content="Modern effects and styles for off-canvas navigation with CSS transitions and SVG animations using Snap.svg" />
    <meta name="keywords" content="sidebar, off-canvas, menu, navigation, effect, inspiration, css transition, SVG, morphing, animation" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/menu_sideslide.css" />
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><divclass="container">
        <div class="menu-wrap">
            <nav class="menu">
             <a href="#"><span><?php echo $nome; ?></span></a>
                <div class="icon-list">
                    <a href="#"><i class="fa fa-money"></i><span> <?php echo $saldo; ?></span></a>
                    <hr size='2'>
                    <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Extratos</span></a>
                    <a href="#"><i class="fa fa-times-circle"></i><span>Rede Credenciada</span></a>
                    <a href="sair.php"><i class="fa fa-sign-out"></i><span>Sair</span></a>
                </div>
            </nav>
            <button class="close-button" id="close-button">Close Menu</button>
        </div>
        <button class="menu-button" id="open-button">Open Menu</button>
        <div class="content-wrap">
            <div class="content">
                <iframe id="klaus" width="100%" height="100%" frameborder="0" src="https://cartao3.algorix.com/Ciclum/Atend/LoginCliente.aspx"scrolling="yes"  /></iframe>
            </div>
        </div><!-- /content-wrap -->
    </div><!-- /container -->
    <script src="js/classie.js"></script>
    <script src="js/main.js"></script>
</body>

JS's

(function() {
    var bodyEl = document.body,
        content = document.querySelector( '.content-wrap' ),
        openbtn = document.getElementById( 'open-button' ),
        closebtn = document.getElementById( 'close-button' ),
        isOpen = false;
    function init() {
        initEvents();
    }
    function initEvents() {
        openbtn.addEventListener( 'click', toggleMenu );
        if( closebtn ) {
            closebtn.addEventListener( 'click', toggleMenu );
        }

        // close the menu element if the target it´s not the menu element or one of its descendants..
        content.addEventListener( 'click', function(ev) {
            var target = ev.target;
            if( isOpen && target !== openbtn ) {
                toggleMenu();
        }
    } );
}

function toggleMenu() {
    if( isOpen ) {
        classie.remove( bodyEl, 'show-menu' );
    }
    else {
        classie.add( bodyEl, 'show-menu' );
    }
    isOpen = !isOpen;
}

init();

})();

php javascript

asked by anonymous 05.08.2016 / 15:50

1 answer

Redirect page through the link entered in the url Doubt with decimal numbers asp.net mvc

score 0 · Answer 1

Just call toggleMenu when the page loads.

Note: The init function should be executed when the page loads as well, depending on the position of its script element, events may not be added to the elements on your page. If script is declared at the end of the body tag on the page, then everything is fine.

(function() {

    var r = (window["requestAnimationFrame"] ||
             window["webkitRequestAnimationFrame"] ||
             window["mozRequestAnimationFrame"] ||
             window["msRequestAnimationFrame"] ||
             function(b) { setTimeout(b, 16) });

    (function c() {
        // Checa se a página foi carregada
        if(document["readyState"] === "complete")
            // Faz qualquer coisa...
            init(), toggleMenu();
        // Se não, então checa novamente
        else r(c);
    })();

})();