File "ex01.php"

Full Path: /home/analogde/www/MDPH/Work/ex01.php
File size: 5.21 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!-- 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>