Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
MDPH
/
Work
:
ex01.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!-- https://www.geeksforgeeks.org/how-to-use-top-navigation-with-left-navigation-bar-using-bootstrap/ --> <!DOCTYPE html> <html> <head> <title>Topnav with sidebar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <!-- Import jquery cdn --> <script src= "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <!-- Import popper.js cdn --> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity= "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <!-- Import javascript cdn --> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"> </script> <!-- CSS stylesheet --> <style type="text/css"> html, body { height: 100%; } #green { height: 100%; background: green; text-align: center; color: black; padding: 15px; } /* sidebar */ .sidebar { background-color: var(--white-color); /*width: 260px;*/ position: fixed; top: 0; left: 0; height: 100%; padding: 80px 20px; z-index: 100; overflow-y: scroll; box-shadow: 0 0 1px var(--grey-color-light); transition: all 0.5s ease; } </style> </head> <body> <!-- h-100 takes the full height of the body--> <div class="container-fluid h-100"> <!-- h-100 takes the full height of the container--> <div class="row h-100"> <div class="col-2" id="green"> <?php //include("sidebar.html"); ?> <nav class="sidebar"> <li class="item"> <div href="#" class="nav_link submenu_item"> <span class="navlink_icon"> <i class="bx bx-home-alt"></i> </span> <span class="navlink">Home</span> <i class="bx bx-chevron-right arrow-left"></i> </div> <ul class="menu_items submenu"> <a href="#" class="nav_link sublink">Nav Sub Link</a> <a href="#" class="nav_link sublink">Nav Sub Link</a> <!-- <a href="#" class="nav_link sublink">Nav Sub Link</a> <a href="#" class="nav_link sublink">Nav Sub Link</a> --> </ul> </li> </nav> <h4>Sidebar</h4> <!-- Navigation links in sidebar--> <a href="#">Link 1</a><br /> <br /> <a href="#">Link 2</a><br /> <br /> <a href="#">Link 3</a><br /> <br /> <a href="#">Link 4</a><br /> <br /> </div> <div class="col-10" style="padding: 0;"> <!-- Top navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-primary"> <a class="navbar-brand" href="#">Navbar</a> <!-- Hamburger button that toggles the navbar--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- navbar links --> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#"> Home </a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Price</a> <a class="nav-item nav-link" href="#">About</a> </div> </div> </nav> <!-- Contains the main content of the webpage--> <p style="padding: 15px; text-align: justify;"> Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. </p> </div> </div> </div> </body> </html>