Compact Menu

The design for the Compact Menu is shown below:

It has the following Structure:

<html>
   <head>
        <title> </title>
   </head>
<body>
     <header class="header">
        <nav class="navbar navbar-static-top">
                <a href="index.html" class="logo navbar-brand float-left text-white text-center">
                        <!--It contains logo-->
                </a>
        <div class="navbar-btn float-left sidebar-toggle">
             <div>
                   <div class="bar1 first"></div>
                   <div class="bar2 second"></div>
                   <div class="bar3 third"></div>
             </div>
        </div>
        <div class="top_right_nav">
             <div class="float-left">
                  <!--It contains Header Left side sections-->
             </div>
        </div>
        </nav>
     </header>
     <!-- start of wrapper -->
     <div class="wrapper">
     <!-- Start Left side menu -->
        <div class="left_aside">

             <!-- sidebar: style can be found in sidebar-->
                 <div class="sidebar">

                     <!--user profile section-->
                     <div class="user_section">
                     <!--user profile content-->
                 </div>
             <!--user profile section-->


             <!--Start Left menu links-->

                 <div id="menu" role="navigation">
                     <ul class="navigation">
                         <li class="menu-dropdown">
                            <a href="#" class="dropdown_head">
                                <i class="menu_icon ti-home text-primary"></i>
                                <p class="mm-text ">
                                    <!--category -->
                                </p>
                            </a>
                            <ul class="sub_menu">
                                <li>
                                    <a href="../pathto/..">
                                        <i class="ti-angle-double-right"></i> 
                                        <!-- page link -->
                                    </a>
                                </li>
                                <li>
                                    <a href="../pathto/..">
                                        <i class="ti-angle-double-right"></i> 
                                        <!-- page link -->
                                    </a>
                                </li>
                            </ul>
                         </li>
                         ....
                         ....
                         ....
                         ....
                         ....
                     </ul>
                 </div>

             <!--End Left menu links-->

        </div>
        <!-- sidebar: style can be found in sidebar-->


     <!-- End of Left side menu -->
     <!-- Start of right Content -->

        <div class="right-aside view-port-height">

               <!--Start of Content Header (Page header) -->

               <div class="content-header container-fluid bg-white">
                     <!-- It contains page Header -->
                </div>

              <!--End of Content Header (Page header) -->


               <!--Start of Main content -->

                <div class="content">

                     <!--page content --!>

                </div>
               <!-- End of Main content --!>

         </div>

       <!-- End of right Content -->

</div>
<!--End of wrapper-->

<!--start of footer-->

<footer>
    <div class="bg-white container-fluid">
        <div class="row">
            <div class="col-lg-12 text-center">
                 <!-- It contains Footer content -->
            </div>
        </div>
    </div>

</footer>

<!--end of footer-->

</body>
</html>

results matching ""

    No results matching ""