Table Of Content

Javascript Menubar Tutorial

View more Tutorials:

1- window.menubar

The  window.menubar property returns a  Menubar object representing 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 trend of modern browsers is to make the Viewport window as wide as possible, therefore, they remove other components like Statusbar, or made Menubar smaller.
Illustration of the menu bar of the Firefox 1.0 browser.
Menu bar has 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: