how to make responsive tabs to drop down in mobile view

Question

I want to make my responsive tabs to drop down like this

Desktop/Large Screen View

Mobile View

This is what code i have and I don't know if this is can be done using CSS only or need 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>

And here is my CSS code.

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

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

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

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

.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 {
    visibility: visible;
    transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
    visibility: hidden;
    background: #0b0f17;
    position: absolute;
    margin-top: 54px;
    height: 299px;
}

.popUploadContentLeft,
.recUploadContentLeft,
.galleryContentLeft {
    float: left;
    width: 46.4%;
    margin-left: 2.5%;
    margin-top: 19px;
}

Or if you can suggest and edit my code, that will be better. Here is my JSFiddle https://jsfiddle.net/8druLycp/

You definetely need jQuery/JavaScript coding for that. Make a fiddle with your code, including the jQuery code. — Ionut Necula, Nov 23 '15 at 08:17
@NenadVracar yes but how to make it responsive like my images I uploaded? — nyjn24, Nov 23 '15 at 08:28

Alteyss · Answer 1 · 2015-11-23T13:36:58.697

2

You can use Bootstrap tabs : http://getbootstrap.com/javascript/#tabs. (Using javascript and jQuery), then personnalize it with CSS ?

EDIT 1

To make it responsive without using the solution above, still use Boostrap with its system of grid (e.g. col-md-3 col-sm-4 col-xs-12). So when it will be a small screen, each part of your tabs menu will take the full width. Check it out https://getbootstrap.com/examples/grid/

EDIT 2

An other solution and all I can suggest you for now and that works is to applicate this : http://tabcollapse.okendoken.com. See the demo : http://tabcollapse.okendoken.com/example/example.html

EDIT 3

Finally, here is a solution with the dropdown menu : https://jsfiddle.net/Alteyss/wypp0hz8/ :

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 set a limit (500px that you can change) so when it's under 500px width, the dropdown appears and the other tabs disappear. Then, you can personnalize it as you want in css in your web site ;)

(With pills : https://jsfiddle.net/Alteyss/wypp0hz8/5/)

edited Nov 23 '15 at 13:36

answered Nov 23 '15 at 08:20

Alteyss

513
3
17

Yeah but i want to make it drop down for mobile view like if i clicked the arrow down; popular, upload and gallery will drop down then i can choose if what tab I want to be activated and content displayed sir – nyjn24 Nov 23 '15 at 08:36
Edited my post again dr. You can use it while you don't have exactly what you want (dropdown) – Alteyss Nov 23 '15 at 08:51
That is a normal accordion Sir. I want to make the tabs become drop down in mobile view – nyjn24 Nov 23 '15 at 08:58
Ok you really want that. I will help you, see you soon. – Alteyss Nov 23 '15 at 09:03
I appreciated your effort – nyjn24 Nov 23 '15 at 09:04
@nyljn Please see my edited post ;) Hope I helped. – Alteyss Nov 23 '15 at 11:38
Ok almost there sir, you think its possible to remove the "Dropdown" and make it "selected tabs" like for example if you click the "profile", profile tab will show. – nyjn24 Nov 23 '15 at 12:32
What about this sir ? https://jsfiddle.net/Alteyss/wypp0hz8/2/ – Alteyss Nov 23 '15 at 12:56
Did you have the solution ? – Alteyss Nov 24 '15 at 07:47

Adrian Menendez · Answer 2 · 2015-11-23T09:34:46.900

I think a possible solution to you is to hide not selected tabs and give all of them a 100% width. Then you can add a class to control its display, this class can be toggled with very simple jQuery.

I show you an example on the snnipet. The only thing left is to control the active tab to show its label when is selected and use a caret to control the class toggle instead of the label.

To apply this to the mobile version only, just add it with 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>

this is awesome sir! but i want that jQuery run only in less than 640px width, you think you can edit it? — nyjn24, Nov 23 '15 at 12:26
There are a lot of ways to do that. I'll give you some links that discuss that and a stackoverflow question that explore it too. [William.com](http://www.wiliam.com.au/wiliam-blog/jquery-and-css-media-queries), [FourFront](https://www.fourfront.us/blog/jquery-window-width-and-media-queries) and [StackOverflow](http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query) — Adrian Menendez, Nov 23 '15 at 16:44

how to make responsive tabs to drop down in mobile view

2 Answers2

EDIT 1

EDIT 2

EDIT 3

Linked