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

Can microdata be concealed using CSS without any problems?

What is the purpose of passing functions down to components in React?

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Invoking a function in JavaScript from within the same file

Managing varied PHP submissions using a single 'isset' declaration

Is there a way to hide a paragraph or div using javascript?

What is the best way to organize a column in a table to prevent the display of duplicate values in React?

Run a Python function in Django without any feedback

Using $state.go within an Ionic application with ion-nav-view may cause unexpected behavior

What is the process for layering one image on top of another in HTML?

What are the steps to create a horizontal submenu in WordPress?

What is the most efficient method for adding each unique unordered list element with a specific class to the nearest parent article tag

Disabling a button until a selection is made in a combobox using Angular

What is the best way to incorporate child nodes when selecting dynamically generated elements through JavaScript?

Exploring Django's view field for efficient data rendering

Determine the dynamic height of content in a TypeScript file

Expanding Drop-Down Feature in CodeIgniter: How to Create Nested Dropdown Menus

Is there a way for me to access the "ViewBag" value from the Controller in a JavaScript file following an Ajax response?

Adding a button in Node and Mongoose for updating data: A step-by-step guide

How can we dynamically navigate to the next line within the Material UI DataGrid component when space is limited?