Menu of canvas Help

Asked

Viewed 39 times

-1

Eai guys , I have a menu here that when you click an icon it appears. how do p/ when the user enters the page it 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>
    <div class="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

  • window.onload("#classname"); Add this in javascript

1 answer

0

Just call toggleMenu when the page is loaded.

Note: the function init should be executed when the page was loaded as well, depending on the position of its element script, events may not be added to the elements on your page. If the script is declared at the end of the tag body on the page, so it’s okay.

(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);
    })();

})();

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.