QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Sidebar for Phonegap App

Sidebar for Phonegap App

sidebar

Sidebars were first implemented by mobile apps. But now even websites are using slidebars for their menu or anything else. Phonegap apps also use sidebar. In this post I will show a simple way to create a slidebar.


View Demo


Implementing Menu Sidebar

<!doctype html>
<html style="padding: 0px; margin: 0px">
    <head>
        <title>Sidebar</title>
    </head>
    <body style="padding: 0px; margin: 0px;">
        <img class="toggle" src="icon-mobile.png" onclick="toggle_sidebar()" style="position: fixed; right: 10px; top: 10px" />
        <div id="sidebar" style="position: fixed; display: inline-block; top: 0px; height: 100%; width: 200px; left: -200px; background-color: black; transition: all 0.5s ease-in-out;">
            sda
        </div>
    </body>
    <script>
        function toggle_sidebar()
        {
            var sidebar = document.getElementById("sidebar");
           
            console.log(sidebar.style.left);
           
            if(sidebar.style.left == "-200px")
            {
                sidebar.style.left = "0px";
            }
            else
            {
                sidebar.style.left = "-200px";
            }
        }
    </script>
</html>

May 28, 2014Narayan Prusty
Overview Of Redis ArchitectureDatabase Design For Storing Chat Messages
Comments: 2
  1. mark
    4 years ago

    Hey,
    I’ve implemented this successfully, however I notice that when the slider slides out, it is underneath other contents of the page, such as buttons. How can I make this overlay items on top?

    Thanks

    ReplyCancel
    • alex
      4 years ago

      try to use z-index:9999; Work for me.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 2 Comments Cordova, Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Customizing Right Click Menu in HTML Page
  • Creating Triangles And Circles Using CSS
  • Overview of WordPress Admin Menu API
  • Twitter Login in Intel XDK APP using ngCordovaOauth
  • Debugging Intel XDK APPs
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license