Click the toggle icon or hover over the left/right sides of your screen to see it in action
$(function() { $('#gx-sidemenu').gxSideMenu({ mode: isMobile.any() ? 'tiny' : 'normal', // normal | tiny interval: 300, // animations' interval direction: 'left', // left | right openOnHover: true, // true | false clickTrigger: true, // true | false followURLs: true, // true | false trigger: ".gx-menu-open.list", // class or id of trigger element startFrom: 60, // start pixel from corner on hover trigger startClosed: true, // menu opens on document load scrolling: true, // menu scrollable (iScroll plugin needed!) urlBase: '/sidemenu/', // document base URL backText: 'Prev | Back', // Back button text onOpen: function() { }, // Open callback onClose: function() { } // Close callback }); });
<div id="gx-sidemenu" style="z-index: 9998"> <div class="gx-sidemenu-inner" id="gx-sidemenu-inner-1"> <div class="scroll"> <ul class="gx-menu"> <li class="home"> <a href="?home"> <span class="icon entypo home"></span> <span class="text">Home</span> </a> </li> <li class="news"> <a href="#news"> <span class="icon entypo newspaper"></span> <span class="text">News / Events</span> </a> <ul> <li> <a href="javascript:"> <span class="icon entypo pencil"></span> <span class="text">New Article</span> </a> <ul> <li> <a href="?article=false"> <span class="icon entypo list"></span> <span class="text">Next level...</span> </a> </li> ... </ul> </li> </ul> </li> ... </ul> </div> </div> <div id="gx-sidemenu-login"> <div class="divider"></div> <h2> <span class="icon entypo user"></span> <span class="text">Welcome, {{UserName}}!</span> </h2> <div class="divider"></div> <a href="?edit=profile" class="login-btn">Edit profile</a> <div class="divider"></div> <a href="?logout" class="login-btn">Log out...</a> <div class="divider"></div> </div> </div>
Ez a Mű a Creative Commons Nevezd meg! - Ne add el! - Így add tovább! 2.5 Magyarország Licenc feltételeinek megfelelően felhasználható.