Customize the menu based on the perspective

Greetings and thank you for visiting!

I am reaching out to seek your expertise in resolving a problem that seems straightforward but has been challenging :(

Currently, I am working on developing a website with a large collapsing menu (similar to a sitemap) that is visually appealing but impractical for mobile views. As a solution, I have created an additional menu specifically designed for display on mobile devices and smaller screens.

The summarized code structure looks like this:

<nav class="navbar navbar-light bg-light ">
    <div class="container-fluid ">
        <a class="navbar-brand" href="index.php" id="btnLogo">
            <img src="../images/logo.png" width="130" height="80" class="d-inline-block align-top" alt="logo">
        </a>
        <button class="navbar-toggler navbar-toggler-right float-right" 
           type="button" 
           data-toggle="collapse" 
           data-target="#desktopMenu" 
           aria-controls="desktopMenu"  
           aria-expanded="false">
           <span>MENU</span>
           <span class="navbar-toggler-icon"></span>
        </button>

   <!-- Desktop Menu Section -->
   <div id="desktopMenu" class="collapse navbar-collapse">...</div>

   <!-- Mobile Menu Section -->
   <div id="mobileMenu" class="collapse navbar-collapse">...</div>

My question is: Is there a way to dynamically change the "data-target" and "aria-controls" attributes to switch between "desktopMenu" and "mobileMenu" based on the viewport width?

I am unsure if this approach is optimal. Please feel free to suggest alternative methods if you believe there is a better way to achieve this functionality.

Thank you for your assistance!

javascripthtmlcssbootstrap-4responsive-design

Answer №1

If you're looking to make your page responsive based on the viewport size, there are a couple of approaches you can take. One option is to utilize @media-queries to control the display of elements based on screen dimensions.

By using media queries, you can customize your code to adapt to various screen sizes.

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
#desktopMenu { display:none;} // hide or show elements based on conditions
}

You have the flexibility to set specific width and height parameters as needed.

For more information on media queries, check out this resource.

In addition, you can obtain the current viewport dimensions with the following script:

// Get browser viewport size.
var width = window.innerWidth;
var height = window.innerHeight;

This allows you to dynamically adjust your code based on the viewport values:

if (height >= yourValue) {
document.getElementById('button').setAttribute('data-target', '#desktopMenu'); // modify attributes accordingly
}

I hope this guidance proves useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The v-bind value remains static even as the data in Vue.js updates

I created a function called changeActive that is supposed to update the value of an active boolean. Interestingly, after checking the console log, I observed that the active value changes but for some reason, the updated value is not being passed in the ...

javascriptvue.jsvuejs2vue-componentvue-props

Is it possible to embed a link within the double brackets using AngularJS?

If I have the following code in my HTML: {{text}} Now, let's say that "text" represents an address. Is there a way to make the displayed value of text clickable without directly modifying the HTML file? In other words, can we create a link effect us ...

javascripthtmlangularjs

Utilizing Bootstrap 4 with ASP.NET Core: A Beginner's Guide

Could someone guide me on updating Bootstrap in ASP.NET Core using NuGet? I followed the steps given below: Install-Package bootstrap -Version 4.0.0 The dependencies were added successfully, but how do I incorporate it into my project now? Where can I fi ...

.netasp.net-corenugetbootstrap-4asp.net-core-2.0

Modifying $scope value within ngRepeat

Within a view, I am utilizing an ngRepeat loop where each item has a custom toggle control linked to a $scope variable in the following manner: <a ng-repeat="item in items" ng-click="isOn = !isOn" ng-class="{on: isOn}"> Toggle! </a> Upon c ...

javascriptangularjs

Guide to exporting everything within a div as a PDF using Angular 2

When attempting to convert a div with the id "div1" into a PDF using JSPdf in Angular 2, everything seems to be working fine until I try to export it to PDF. Here is my code snippet: <div class="container" id="div1"> <table> <tr> & ...

javascriptangularjspdf

Getting the ID from an array of objects in AngularJS: A How-To Guide

I need help with extracting the id from an array of objects in AngularJS. It seems like $scope.data.id is returning undefined. Can anyone spot what I may be doing wrong, or suggest a better way to achieve this? Data: [{"_id":"57e540ab352e81329c984aba","n ...

javascriptangularjsarrays

What is the reason for JQuery not generating a fresh div during every loop?

I'm currently facing an issue where jQuery seems to be combining all the image divs and description divs into one container div, rather than creating individual containers for each pair in my for loop. This is causing a disruption in the overall layou ...

javascriptjqueryhtml

Tips for navigating a list of areas in JavaScript

Currently, I am in the process of learning Javascript and I have a query regarding browsing an area list using Javascript. Could someone kindly guide me on whether it is possible to achieve this, and if so, how? Below is the HTML code snippet I am workin ...

javascripthtmlarea

Guide on retrieving information from mongodb with nodejs and expressjs

Check out my code in the file named student.js var mongoose = require('mongoose'); var studentSchema = new mongoose.Schema({ name:{ type: String, required: true }, rollno:{ type: Number, required: tr ...

javascriptnode.jsmongodbexpress

Adding a context menu to a Leaflet map

Could someone provide guidance on how to add a custom context menu to a Leaflet map in Vue 3? I am currently utilizing [email protected], @vue-leaflet/[email protected], and experimenting with [email protected]. Here is a snippet of my code: ...

javascriptvue.jsleafletvuejs3vue-options-api

Ways to restrict user access to internal pages without login in Reactjs

I have been working on a project using Reactjs with the nextjs framework. Currently, I am focusing on implementing a login and logout module. My goal is to redirect any user attempting to access an inner page without being "logged in" to the "index/login ...

javascriptreactjsnext.js

When attempting to deserialize a 2D array in JSON, it unexpectedly returns as a string instead of

I am trying to figure out how to deserialize the JSON string provided below into a two-dimensional array object using JavaScript. Whenever I attempt to use JSON.parse or eval, it ends up getting converted into a string format. Currently, I am utilizing D ...

javascriptjson

submission of form data and automatic redirection to another page

Seeking advice on managing form submissions and page redirection. I have a landing page with a basic form, where users select criteria and are then redirected to page2 displaying tabular data and query information. When submitting the form on Page1, data ...

javascriptphpjquery

How can I show the number of items in my filtered data using AngularJS?

My data array holds objects in JSON format. var users = { 'New':{ {Name:'One'}, {Name:'Two'} }, 'Old':{ {Name:'Three'}, {Name:'Four'} } This piece of code is used to disp ...

javascriptangularjs

How do I utilize ng-repeat in Angular to pass a variable that specifies the number of repetitions?

When working on my app, I encountered a situation where I needed to retrieve elements from a database and display them using ng-reat. Everything was going smoothly until I realized that within this list, there was another set of data that required a separa ...

javascriptangularjsangularjs-ng-repeat

Is there anyone who can clarify the operations happening within this Three.js StereoEffect code?

Is there anyone knowledgeable in stereo rendering who can provide an explanation of how these functions work together to achieve the VR stereo effect? Information on functions like StereoCamera(), setScissor(), setViewPort() in the three.js library seems s ...

javascriptthree.jsvirtual-realitystereoscopy

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...

javascripthtmlfirefoxwebrtcgetusermedia

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

"Successfully tested API request in Postman, however encountering issues when sending request in Node.js using the 'request

Currently, I am tackling a project that involves communicating with an API using nodeJS. It's quite a substantial project, so I'll provide you with a simplified version of my script. When I make a PUT request to the API using Postman, everything ...

javascriptnode.jsapipostman

Optimal approach for managing numerous modals containing map data in Next.js

Hey there, I'm facing an issue while trying to utilize map data in conjunction with modals. Although I have set the state for all modals, when I use an array object within the map data, the modals end up showing duplicated. To provide clarity, let me ...

javascriptreactjsnext.jsstatesetstate