Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

Question

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

I am looking to create a responsive tab design that drops down like the example shown below:

Desktop/Large Screen View https://i.stack.imgur.com/hiCYz.png

Mobile View https://i.stack.imgur.com/gRxLv.png

I have written some code for this, but I am unsure if it can be achieved using just CSS or if it requires JavaScript/jQuery.

<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">...</div>
        <div class="recUploadContent">...</div>
        <div class="galleryContent">...</div>
</div>

Below is my CSS code:

#popularUpload,
#recentUpload,
#gallery {
    display: none;
}

.popularUpload {
    /* Styles here */
}
/* More CSS styles */

.galleryContentLeft {
    /* Styles here */
}

If you have any suggestions on how to improve or edit my code, please feel free to provide them. You can view the complete code on JSFiddle here.

javascript jquery html css

Answer 1

Answer №1

If you want to create a tabbed interface using Bootstrap, you can refer to this link: http://getbootstrap.com/javascript/#tabs. This involves using JavaScript and jQuery, which you can then customize with CSS.

UPDATE 1

To ensure that your tabs are responsive without relying on the previous solution, you can still utilize Bootstrap's grid system (e.g., col-md-3 col-sm-4 col-xs-12). This way, when viewed on smaller screens, each tab menu item will take up the entire width. You can learn more about this by checking out https://getbootstrap.com/examples/grid/.

UPDATE 2

Another effective solution I recommend is implementing this approach: . Feel free to explore the demo provided here:

UPDATE 3

Lastly, if you prefer a dropdown menu option, consider trying this solution: https://jsfiddle.net/Alteyss/wypp0hz8/. In this case, I've included some CSS code snippets to control how the tabs behave at different screen sizes.

div#tabsBlock > ul.nav-tabs > li.dropdown {
    display: none;
}

@media screen and (max-width: 500px) {
    div#tabsBlock > ul.nav-tabs > li.lg {
        display: none;
    }
    div#tabsBlock > ul.nav-tabs > li.dropdown {
        display: block;
    }
}

I've specified a limit of 500px for the dropdown to appear and other tabs to hide. Feel free to further customize it according to your website's design preferences in CSS ;)

(You can also explore the "With pills" version here: https://jsfiddle.net/Alteyss/wypp0hz8/5/)

Answer 2

If you want to create a tabbed interface using Bootstrap, you can refer to this link: http://getbootstrap.com/javascript/#tabs. This involves using JavaScript and jQuery, which you can then customize with CSS.

UPDATE 1

To ensure that your tabs are responsive without relying on the previous solution, you can still utilize Bootstrap's grid system (e.g., col-md-3 col-sm-4 col-xs-12). This way, when viewed on smaller screens, each tab menu item will take up the entire width. You can learn more about this by checking out https://getbootstrap.com/examples/grid/.

UPDATE 2

Another effective solution I recommend is implementing this approach: . Feel free to explore the demo provided here:

UPDATE 3

Lastly, if you prefer a dropdown menu option, consider trying this solution: https://jsfiddle.net/Alteyss/wypp0hz8/. In this case, I've included some CSS code snippets to control how the tabs behave at different screen sizes.

div#tabsBlock > ul.nav-tabs > li.dropdown {
    display: none;
}

@media screen and (max-width: 500px) {
    div#tabsBlock > ul.nav-tabs > li.lg {
        display: none;
    }
    div#tabsBlock > ul.nav-tabs > li.dropdown {
        display: block;
    }
}

I've specified a limit of 500px for the dropdown to appear and other tabs to hide. Feel free to further customize it according to your website's design preferences in CSS ;)

(You can also explore the "With pills" version here: https://jsfiddle.net/Alteyss/wypp0hz8/5/)

Answer 3

Answer №2

In my opinion, a potential solution for your issue could be to hide the tabs that are not selected and give all of them a width of 100%. You can then assign a class to control their display, which can be easily toggled using jQuery.

I have provided an example in the snippet below. The next step would be to manage the active tab to display its label when selected and use a caret to toggle the class instead of the label.

To apply this only to the mobile version, you can add it within a media query.

$(function(){
 $('.popularUpload').on('click', function(){
  $('.recentUpload').toggleClass('shown');
  $('.gallery').toggleClass('shown');
 });
});

#popularUpload,
#recentUpload,
#gallery {
display: none;
}

.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
display: none;
width: 100%;
text-align: center;
float: left;
}

.popularUpload.shown{
    display: block;
}

.recentUpload {
    display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}

.recentUpload.shown{
    display: block;
}

.gallery {
    display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
}

.gallery.shown {
    display: block;
}

.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}

#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}

#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
    display: block;
transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
    display: none;
background: #0b0f17;
height: 299px;
    width: 100%;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload shown">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">popular content</div>
        <div class="recUploadContent">recent content</div>
        <div class="galleryContent">gallery content</div>
</div>

Answer 4

In my opinion, a potential solution for your issue could be to hide the tabs that are not selected and give all of them a width of 100%. You can then assign a class to control their display, which can be easily toggled using jQuery.

I have provided an example in the snippet below. The next step would be to manage the active tab to display its label when selected and use a caret to toggle the class instead of the label.

To apply this only to the mobile version, you can add it within a media query.

$(function(){
 $('.popularUpload').on('click', function(){
  $('.recentUpload').toggleClass('shown');
  $('.gallery').toggleClass('shown');
 });
});

#popularUpload,
#recentUpload,
#gallery {
display: none;
}

.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
display: none;
width: 100%;
text-align: center;
float: left;
}

.popularUpload.shown{
    display: block;
}

.recentUpload {
    display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}

.recentUpload.shown{
    display: block;
}

.gallery {
    display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
}

.gallery.shown {
    display: block;
}

.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}

#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}

#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
    display: block;
transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
    display: none;
background: #0b0f17;
height: 299px;
    width: 100%;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload shown">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">popular content</div>
        <div class="recUploadContent">recent content</div>
        <div class="galleryContent">gallery content</div>
</div>

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

Answer №1

UPDATE 1

UPDATE 2

UPDATE 3

Answer №2

Similar questions

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Having trouble with sending information to the PHP server, unable to determine the root cause

Continuously monitor the condition in my function

Error with YouTube API in Internet Explorer 8: Video not found

Navigating the world of updating problems with Express.js

The animation feature in AngularJS when integrated with the easy pie chart appears to be malfunctioning

How to convert jQuery data into JSON format

Tips on transforming a JSON file into a response for my personal server

Trigger form submission with validation using jQuery

How can an array of file paths be transformed into a tree structure?

Choose all or none of the items from the list with a single click - v-list-item-group

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

The loading of the module from was hindered due to an invalid MIME type restriction

Converting multi-dimensional array into a structured table format

Strategies for improving the efficiency of HTML and styles in a generated document

Incorporating the unshift method in JavaScript: A Step-by-

Adjustable width (100%) and set height for SVG

Issue with material table not showing data

In search of a new object value to update