1

I am new to development, so please excuse my lack of knowledge. I am attempting to create a one-page website with multiple pages inside. There is a main page, index.html, that is navigated through sections, but the problem is that when I go into one of the multiple pages, I am unable to return to the index.html. Should I use a href "www.mydomain.com/index.html" to return, or is there another method??

     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


 <nav class="navbar navbar-expand-md navbar-light bg-light">
          <div class="container-fluid text-center">
            <a class="navbar-brand" href="https://mink.agency/"><img class="logo" src="./images/logo.png" alt=""></a>
            <button class="navbar-toggler first-button animated-icon1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span><span></span><span></span>
            </button>
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                  <a class="nav-link " aria-current="page" href="#about">about us.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#work">our work.</a>
                </li>       
                <li class="nav-item">
                  <a class="nav-link" href="#team">the team.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#our-clients">our clients.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#connect">let's connect!</a>
                </li>    
              </ul>       
            </div>
           </div>
        </nav>
        
       <section class="bg-success" id="about">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section id="work">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section id="team">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section class="bg-warning" id="ourclients">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section class="bg-danger" id="connect">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
        
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  • 1
    You can use only "/" in href like this `home` it'll redirect to the root or index.html in your case. – Saikat Roy Feb 01 '22 at 11:38
  • The sections are not different pages, they are just sections of the same page. If you want to link to the top of the page you can use `href="#top"`. – Noam Feb 01 '22 at 11:46

1 Answers1

0

I did.. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Also you could use JavaScript code to generate the whole nav bar.

For example:

Javascript code:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
VAIBHAV NIRMAL
  • 194
  • 2
  • 13