Framework7 - Hide Navbar Automatically

Description

The navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required. It is useful only whenever you use the through-type layout. You need to add no-navbar class to the loaded page and put an empty navbar.

Example

The following example hides the navbar automatically when you click on the link −

Create file navbar_hide_auto_about.html

navbar_hide_auto_about.html

<div class = "navbar">
   <div class = "navbar-inner"></div>
</div>

<div data-page = "about" class = "page no-navbar">
   <div class = "page-content">
      <div class = "content-block">
         <p> <a href = "#" class = "back button">Go Back</a></p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
            Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
            sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
            dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
            dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
            eu consectetur. Sed posuere a orci id imperdiet.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
            Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
            sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
            dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
            dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
            eu consectetur. Sed posuere a orci id imperdiet.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
            Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
            sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
            dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
            dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
            eu consectetur. Sed posuere a orci id imperdiet.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
            Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
            sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
            dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
            dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
            eu consectetur. Sed posuere a orci id imperdiet.</p>
      </div>
   </div>
</div>

navbar_hide_auto.html

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Navbar View Methods</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main navbar-through">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">Center Part</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only"> <i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages">
               <div data-page = "home" class = "page">
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "navbar_hide_auto_about.html" class = "button">About</a></p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit  amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                     </div>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         
         var mainView = myApp.addView('.view-main', {
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code as navbar_hide_auto.html file in your server root folder.
Open this HTML file as http://localhost/navbar_hide_auto.html and the output is displayed as shown below.
When you run the code, you can hide or show the navbar automatically whenever navbar is not required.

framework7_navbars.htm