如何将垂直菜单转换为手风琴菜单

Question

I'm trying to build a responsive tab menu but I'm trying to go for a accordion like menu (eg the content between the tabs ) when the menu go into the vertical view, but I have no idea how to go about it without losing the responsiveness.

HTML

<h1>Responsive Tabs</h1>

<div class="tabBox">
<ul class="tabs">
<li><a href="#tab1">Test1</a></li>
<li><a href="#tab2">Test2</a></li>
<li><a href="#tab3">Test3</a></li>
</ul>

<div class="tabContainer">
<div id="tab1" class="tabContent">
  Test1
</div>

<div id="tab2" class="tabContent">
  Test2
</div>

<div id="tab3" class="tabContent">
 Test3
</div>    

CSS

    body {
font-family: Arial, sans-serif;
}



 div.tabBox {
width:99.9%;
float:left;
overflow: visible;

}

 div.tabBox h3 {
  padding:20px 0px;
 }


  ul.tabs {
  margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px; 
  width:99.9%;
 }

 ul.tabs li {
 float: left;
 margin: 0;
padding: 0;
height: 32px; 
line-height: 32px; 
margin-bottom: -1px; 
overflow: hidden;
position: relative;
 }

 ul.tabs li a {
 display: block;
 padding: 0 5px;
 outline: none;
 background:none;
 }


  .tabContainer {  
   border-top: none;
   overflow: hidden;
  clear: both;
  float: left;
  width:99.9%;
 min-height:300px;
 margin-bottom:10px;
 }

  .tabContent {
 padding: 20px;
  }

 .tabContent h3 {
 padding:0px;
 }

 /**** TABS STYLES ****/

 div.tabBox h3 {
 }


 ul.tabs {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
}

 ul.tabs li {

  }

  ul.tabs li a {
 background:#eee;
 text-decoration: none;
 font-size: 11px;
 color: #000;
 outline: none;
 border: 1px solid #ccc;
 border-left: none;
 border-top-left-radius:5px;
 -moz-border-top-left-radius:5px;
 -webkit-border-top-left-radius:5px;
 border-top-right-radius:5px;
 -moz-border-top-right-radius:5px;
 -webkit-border-top-right-radius:5px;
 }

  ul.tabs li a:hover {
  background: #eee;
  }

   ul.tabs li.active {
  border-bottom:1px solid #fff;
  }

  ul.tabs li.active a, ul.tabs li.active a:hover  {  
  background: #fff;
  }

 div.tabContainer {
 border-bottom:1px solid #ccc;
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 background:#fff;
  } 

      @media only screen and (max-width: 767px) {

div.tabBox {
    border: 1px solid #ccc;
}

ul.tabs {
height: auto;
display: block;
width:100%;
border-left:0px;
}

ul.tabs li {
    width:100%;
}

ul.tabs li a {
    border-top-left-radius:0px;
    -moz-border-top-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    border-top-right-radius:0px;
    -moz-border-top-right-radius:0px;
    -webkit-border-top-right-radius:0px;    
    border:0px;
}

div.tabContainer {
    border: 0px;
}

 }

here's the fiddle http://jsfiddle.net/Jnewguy/5B5KJ/

Any tips or ideas?

Answer 1

To many different options... it depends how you like to approach this problem.

1) Add more html for the responsive version.

<a href="#tab1">Test1</a>   
<div id="tab1" class="tabContent">
  Test1
</div>
<a href="#tab2">Test2</a>
<div id="tab2" class="tabContent">
  Test2
</div>
<a href="#tab3">Test3</a>
<div id="tab3" class="tabContent">
 Test3
</div>  

Add tab link before each tab and show them only on mobile. You hide the default ones and style the new ones with proper js.

2) You can apply the same practice but using JS cloning the tab links and adding each one before the tabs.

$('.tabs li a').each(function(){
    var $self = $(this);
    var href = $self.attr('href');
    var clone = $self.clone();
    $(clone).insertBefore($(href));
})

3) You can append the content inside of the ul>li structure, but you must move it every time you exit/enter the breakpoint

$('.tabContent').each(function(e){
    var $self = $(this);
    $('.tabs li').eq(e).append($self);
})

And some other options, that I can't think of at the moment...

I don't know why you point him to an accrodion menu questions, since his problem is that he must transform his current vertical to accrodion only in the responsive version...