Guide to transforming a vertical tabbed content panel into a responsive collapsible using media queries and jQuery

I am in the process of creating a new content navigation design that incorporates vertically stacked tabs to toggle hidden panels adjacent to the tabs. Unfortunately, this layout seems to encounter issues at narrower screen widths.

Check out my work on Fiddle: http://jsfiddle.net/jrotton/xCeX8/1/

While it is somewhat responsive, I face challenges when dealing with 12 tabs with varying label lengths ranging from "Nursing" to "Architecture, Design, and Construction." This causes problems when the screen size decreases to around 500px or less.

One approach could be:

.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }

This solution does work, but isn't optimal for an extensive number of tabs. Instead, I am considering hiding the tab menu and transforming the panels into collapsibles with clickable h2 headings. Making sure the design is accessible for screen readers is also crucial, although I haven't tackled that aspect yet.

If you have any suggestions on how to tackle this issue, I would greatly appreciate it. Thank you in advance!

Answer №1

Check out some cool off-canvas layouts here!

Here are a few ideas...

In addition, I suggest that with your current setup, floating the menu to the right on the mobile version may not be effective. For mobile sizes, consider making the navigation items 100% width and placing them above the content or in another "slide panel".

Jquery Mobile offers some handy, common design patterns pre-built:

Explore jQuery Mobile here!

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

I'm encountering an issue with numbers that contain comma decimal separators

My current script is designed to calculate the amount of water saved by a shower column. However, I have encountered issues with its functionality in Firefox and Edge when switching between using "," and "." for values interchangeably. I have attempted va ...

When using the transition mode "out-in" in Vue, the returned ref element may be undefined

Encountering an issue where when mode="out-in" is used in a <transition mode="out-in">, a ref'd element returns undefined during the `updated` lifecycle. Strangely, it works fine without the `mode="out-in"` attribute. Any suggestions on how to ...

SSI stands for Server Side Includes, a feature that allows

I have multiple versions of the same HTML page, each with only one hidden variable that is different. This variable is crucial for tracking purposes. Now, I am exploring options to rewrite this by incorporating a HTML file with a hidden variable. Here is ...

Challenges with ASP.NET MVC controller actions and jQuery AJAX requests

I've been attempting to pass JsonResult into my jQuery AJAX function using the following code: $.ajax({ contentType: 'application/json, charset=utf-8', type: "POST", url: "/Controller/TestJson", cache: ...

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

How can you showcase the content of an object within an array?

I am currently working on a project component that involves retrieving and logging data. However, I am facing an issue with accessing objects within my array of clients to display them properly in my table. Here is the script I am using: <script> ex ...

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected

One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...

What is the best way to reference an Angular constant within a Gulp configuration file?

Is it possible to retrieve an Angular constant within a Gulp file? For example: angular.module('app').constant('env', { url: 'http://localhost:1337/' }); What is the method for accessing this constant inside a function ...

The search results fail to show the required information

I am trying to retrieve data from an API based on a search query. When the user enters the name of the film they are looking for and hits enter to submit the form, the matching films should be displayed on the screen. However, my console is showing errors ...

What is the method for adjusting the width of a v-card based on its height?

I have a changing number of v-cards that are displayed based on their quantity. My goal is to maintain an aspect ratio of 16/9, but only adjust the width. To achieve this, I believe I need to make the width dependent on the height, although I am unsure ho ...

Enhanced Search and Replace Techniques in HTML using jQuery and JavaScript

Although I have some experience with jQuery and Javascript, I am by no means an expert. I have been struggling to find a way to achieve my goal using minimal resources. Maybe you can assist me: This is what I am trying to accomplish: I would like to use ...

Transforming a css class around Hashtag(#) content and At(@) content

I need a jQuery method to identify all hashtags(#) and mentions(@) in the text, and then wrap them with a specific CSS class. The wrapping class should surround any content starting with "#" or "@" and ending before any white space characters. There may b ...

Understanding the reading of Java Class List in Vue Js

As a beginner in Front-end development, I am trying to figure out how I can use Vue.js to read a Java class List. Specifically, I have a Java class that includes a list of fruits and I want to be able to display this list on the UI using Vue.js: public c ...

The counter unexpectedly increments by 2 instead of 1

I'm attempting to create a counter that increases by one each time according to the code snippet below: var imnum = 0; (function changeImage() { ++imnum; $( ".slider" ).fadeOut(5000, function() { $('#home-slider-im').attr("s ...

Searching for a specific set of rows within an array? Look no further than jQuery and JavaScript

I'm struggling to find the right title for my project, but I'm doing my best to capture its essence. I am in the process of developing a calculator that compares values within multiple arrays. Each data item in my array consists of 34 rows, wit ...

Struggling to align an element in HTML when used in columns?

<div class="row"> <div class="col-lg-3 " style="border: groove;"> <p class="circle col-xs-1 center-block">01</p> <h3>trending courses</h3> ...

A guide on updating URLs that are not enclosed within an anchor tag using JavaScript

In my current scenario, I am dealing with text that includes URL links presented in two different formats. www.stackoverflow.com <a href="http://www.stackoverflow.com">Stack over flow</a> My objective is to create a straightforward function ...

What is the best way to limit the dimension of uploaded images to a specific height and width?

function validateImageDimensions(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploadForm + img').remove(); var img = $('<img> ...

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...