Compact Menu
Last updated
Was this helpful?
Last updated
Was this helpful?
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>