What is the best way to create a navigation bar that opens on the same page when clicked?

Question

What is the best way to create a navigation bar that opens on the same page when clicked?

Can someone help me figure out how to create a navbar that, when clicked, opens a small window on the same page like in this example image?

javascript html css

Answer 1

Answer №1

Implement a small window within its own div:

<div id="customWindow"> Content will be displayed upon clicking the navigation bar </div>

Apply the following CSS styles:

#customWindow{
  display: none; 
}

Utilize JavaScript to toggle the element's visibility:

$(document).ready(function(){
  // Update #nav with the actual ID of the navigation element.
  $('#nav').on('click', function(){
    // Toggle visibility of the custom window on click
    $('#customWindow').toggle();
  });
});

Answer 2

Implement a small window within its own div:

<div id="customWindow"> Content will be displayed upon clicking the navigation bar </div>

Apply the following CSS styles:

#customWindow{
  display: none; 
}

Utilize JavaScript to toggle the element's visibility:

$(document).ready(function(){
  // Update #nav with the actual ID of the navigation element.
  $('#nav').on('click', function(){
    // Toggle visibility of the custom window on click
    $('#customWindow').toggle();
  });
});

Answer 3

Answer №2

Here is an example of how to create a custom Navbar. In the provided code snippet, there is a fixed element that updates its content based on which navigation element is clicked.

    $('#myNav').find('li a').click(function (e) {
        $('li.active').removeClass('active');
        $(this).parent('li').addClass('active');
        $('#main').html($(this).html());
    });

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #567;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ccc;
}

.active {
    background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
  <li class="active"><a href="javascript:void(0);">Home</a></li>
  <li><a href="javascript:void(0);">Service</a></li>
</ul>
<div id="main">
  Home
</div>

Use this example to easily create your own customized navbar.

Answer 4

Here is an example of how to create a custom Navbar. In the provided code snippet, there is a fixed element that updates its content based on which navigation element is clicked.

    $('#myNav').find('li a').click(function (e) {
        $('li.active').removeClass('active');
        $(this).parent('li').addClass('active');
        $('#main').html($(this).html());
    });

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #567;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ccc;
}

.active {
    background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
  <li class="active"><a href="javascript:void(0);">Home</a></li>
  <li><a href="javascript:void(0);">Service</a></li>
</ul>
<div id="main">
  Home
</div>

Use this example to easily create your own customized navbar.

What is the best way to create a navigation bar that opens on the same page when clicked?

Answer №1

Answer №2

Similar questions

The element selector for the <code> tag is not recognized in SCSS

Tips for looping through nested JSON data in Google Sheets

Unable to locate index.html file in Docker container while dockerizing React application

The console log is displaying 'undefined' when trying to access Node.js fs

When jQuery inserts JavaScript into the DOM, it does not automatically execute the code

Phrases are truncated in the initial line of each ion-item within the ion-list

How can we show a varying number of textfields based on user selection using hooks and updating values dynamically through onChange events?

Tips for expanding the maximum width of a container using bootstrap4

Got a not-a-number (NaN) value for the `children` prop in a

Strategies for accessing elements within a #shadow-root

The dynamic combination of jCarousel, jQuery Accordion, and fade in effects

Access a JSON value in the Google Sheets script editor and retrieve the data

Compiling this HTML template in dev mode with Vue is agonizingly slow

Is there a workaround to prevent me from using overflow: scroll when I addEventListener("touchmove", preventBehavior, false)?

Struggling to establish a default value for an AngularJS select dropdown

I'm looking to extract various data from a SQLite table using the URL with ExpressJS. What's the best way to achieve

Define unique positions for multiple shapes and then combine these shapes

Working on asynchronous processing of Highland stream fragments

What steps can you take to resolve the issue of FirebaseError: When collection() is expected to be a CollectionReference, DocumentReference, or FirebaseFirestore?

Dynamic text input and selection menu with AJAX (PHP and JavaScript)