Bootstrap slide to new page

You want to know how to create a slide-out navigation menu that transitions to a new page when a link is clicked, using Bootstrap.

Here's a simple example to get you started:

HTML:

<!-- Navigation menu -->
<nav id="slide-out" class="nav nav-pills nav-fill">
  <ul>
    <li><a rel="nofollow" target="_blank" href="#home" data-slide-to="0">Home</a></li>
    <li><a rel="nofollow" target="_blank" href="#about" data-slide-to="1">About</a></li>
    <li><a rel="nofollow" target="_blank" href="#contact" data-slide-to="2">Contact</a></li>
  </ul>
</nav>

<!-- Page content -->
<div id="page-content">
  <!-- Home page content -->
  <div id="home">
    <h1>Welcome to Home</h1>
  </div>
  <!-- About page content -->
  <div id="about">
    <h1>About Us</h1>
  </div>
  <!-- Contact page content -->
  <div id="contact">
    <h1>Contact Us</h1>
  </div>
</div>

CSS:

#slide-out {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #333;
  color: #fff;
  padding: 20px;
  transition: transform 0.5s;
}

#slide-out ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#slide-out li {
  margin-bottom: 10px;
}

#slide-out a {
  color: #fff;
  text-decoration: none;
}

#page-content {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}

#page-content div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
}

#home {
  display: block;
}

#about {
  display: none;
}

#contact {
  display: none;
}

JavaScript:

// Get the navigation menu and page content elements
const slideOut = document.getElementById('slide-out');
const pageContent = document.getElementById('page-content');

// Add event listener to navigation links
slideOut.addEventListener('click', (e) => {
  const target = e.target.getAttribute('href');
  const targetDiv = document.getElementById(target);

  // Hide the current page content
  pageContent.querySelector('div').style.display = 'none';

  // Show the target page content
  targetDiv.style.display = 'block';

  // Update the URL
  history.pushState({}, '', target);
});

This code creates a slide-out navigation menu that transitions to a new page when a link is clicked. The navigation menu is fixed to the left side of the screen, and the page content is displayed in the main area of the screen.

When a link is clicked, the JavaScript code hides the current page content and shows the target page content. It also updates the URL using the pushState method.

Note that this is just a basic example, and you may want to customize the styles and behavior to fit your specific needs.