o7planning

Javascript Menubar Tutorial with Examples

View more Tutorials:

Websites to learn foreign languages for free:
Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- window.menubar

The window.menubar property returns a Menubar object representing the menu bar on browser. However, you can hardly interact with Menubar through Javascript because it has very few APIs for you.

window.menubar

// Or simple:

menubar
The tendency of modern browsers is to make the Viewport window as wide as possible, therefore, they remove other components like Statusbar, or made Menubar smaller.
The illustration of the menu bar of the Firefox 1.0 browser.
Menu bar is shrunk in the modern Firefox version.
menubar.visible
The menubar.visible property returns true if menu bar is displayed on browser. On the contrary, it returns false.
Note: For modern browsers, you can set new values for menubar.visible. If you do it on purpose, it doesn't work.
menubar-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Menubar</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>menubar.visible</h3>

    <br/><br/>
    <button onclick="alert(menubar.visible)">
        alert(menubar.visible)
    </button>

</body>
</html>
Example, use window.open(..) to open a new window without menu bar.
open-new-window-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Menubar</title>
    <meta charset="UTF-8">
    <script>

        function openNewWindow()  {
           var winFeature = 'menubar=no,resizable=yes';

           // Open a New Windows.
           window.open('some-page.html','MyWinName',winFeature);
        }
    </script>
</head>
<body>
    <h3>Menubar</h3>

    <button onclick="openNewWindow()">
      Open a New Window without menubar
    </button>

</body>
</html>
some-page.html

<!DOCTYPE html>
<html>
<head>
    <title>Some Page</title>
    <meta charset="UTF-8">
</head>
<body onload="alert('menubar.visible? ' + menubar.visible)">
    <h3>Some Page</h3>

    <p>1</p>
    <p>1 2</p>
    <p>1 2 3</p>
</body>
</html>

 

View more Tutorials: