带子菜单的选项卡式内容

时间:2016-07-21 04:33:42

标签: jquery html css

希望我能正确解释这个问题。如果我的术语错了,我道歉。基本上,我正在尝试创建垂直选项卡式内容,这不是问题。这将是美国50个州和加拿大10个省的垂直清单。点击或悬停(我可以去任何一种方式,但更喜欢悬停动作)的州/省我想要一个子菜单出现,它将列出"选项"为该州/省。我找到了类似于我在这里找到的东西:http://codepen.io/anon/pen/QEmERX但是,当点击子菜单项时,我希望它们也只是内容而不是指向另一个页面的链接,如果这有意义的话。如果这不是正确的术语,我再次道歉。在坚果壳中,我希望使用子菜单生成垂直选项卡式内容,子菜单也是内容面板而不是链接。任何帮助将不胜感激。

CSS

    .tg  {
border-collapse:collapse;
border-spacing:0;
border-color:#aaa;
border-width:1px;
border-style:solid;
}
.tg td{
font-family:paladins;
font-size:28px;
padding:10px 15px;
border-style:solid;
border-width:0px;
overflow:hidden;
word-break:normal;
border-color:#aaa;
color:#333;
background-color:#fff;
}
.tg th{
font-family:paladins;
font-size:18px;
font-weight:normal;
padding:10px 15px;
border-style:solid;
border-width:0px;
overflow:hidden;
word-break:normal;
border-color:#696969;
color:#696969;
background-color:#fff;
}
.tg .tg-yw4l{
vertical-align:top;
}
h1 {
  color: #696969;
  font-family: 'paladins';
  margin:14px;
  width: 80%;
}

.tabordion {
  color: #ffffff;
  display: block;
  font-family: paladins;
  font-size: 12px;
  margin: auto;
  position: relative;
  width: 100%;
}

.tabordion input[name="sections"] {
  left: -9999px;
  position: absolute;
  top: -9999px;
}

.tabordion section {
  display: block;
}

.tabordion section label {
  background: #696969;
  border:1px solid #fff;
  cursor: pointer;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px 17px;
  position: relative;
  width: 180px;
  z-index:100;
}

.tabordion section article {
  display: none;
  left: 230px;
  min-width: 300px;
  padding: 0 0 0 21px;
  position: absolute;  
  top: 0;
}

.tabordion section article:after {
  background-color: #ff6600;
  bottom: 0;
  content: "";
  display: block;
  left:-229px;
  position: absolute;
  top: 0;
  width: 220px;
  z-index:1;
}

.tabordion input[name="sections"]:checked + label { 
  background: #696969;
  color: #fff;
}

.tabordion input[name="sections"]:checked ~ article {
  display: block;
}


@media (max-width: 533px) {

  h1 {
    width: 100%;
  }

  .tabordion {
    width: 100%;
  }

  .tabordion section label {
    font-size: 12px;
    width: 160px;
  }  

 .tabordion section article {
    left: 200px;
    min-width: 270px;
  } 

  .tabordion section article:after {
    background-color: #ccc;
    bottom: 0;
    content: "";
    display: block;
    left:-199px;
    position: absolute;
    top: 0;
    width: 200px;

  }  

}


@media (max-width: 768px) {
  h1 {
    width: 96%;
  }

  .tabordion {
    width: 96%;
  }
}


@media (min-width: 1366px) {
  h1 {
    width: 70%;
  }

  .tabordion {
    width: 70%;
  }
}

HTML

<h1>US AND CANADIAN ASSOCATIONS</h1>
<div class="tabordion">
  <section id="section1">
    <input type="radio" name="sections" id="option1" checked>
    <label for="option1">ALABAMA</label>
    <article>
     <table class="tg">
    <tbody>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/Tier1Elite_zpsyxfxo2xc.png" title="Alaska All Stars - Anchorage, AK" /></a></th>
            <th style="text-align: left"><a href="" title="Alaska All Stars - Anchorage, AK"><span style="color: #696969">TIER 1 ELITE HOCKEY</span></a></th>
            <th><a href="mailto:akallstar_ice@hotmail.com" target="_top"><img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" /></a></th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Anaheim Jr. Ducks - Ananheim, CA" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AnaheimJrDucksLogo2_zpscvlvog14.png" title="Anaheim Jr. Ducks - Anaheim, CA" /></a></th>
            <th style="text-align: left"><a href="">ANAHEIM JR. DUCKS</a></th>
            <th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
        </tr>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Belle Tire - Taylor, MI" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/BelleTireLogo2_zps2gmbaf1a.png" title="Belle Tire - Taylor, MI" /></a></th>
            <th style="text-align: left"><a href="">BELLE TIRE</a></th>
            <th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
        </tr>
</tbody>
</table> 
    </article>
  </section>
  <section id="section2">
    <input type="radio" name="sections" id="option2">
    <label for="option2">ALASKA</label>
     <article>
        <table class="tg">
    <tbody>
                <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="ASHA - Alaska" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/ASHA1_zpszceufh7t.jpg" title="ASHA - Alaska" /></a></th>
            <th style="text-align: left"><a href="" title="ASHA - Alaska"><span style="color: #696969">ALASKA STATE HOCKEY ASSOCIATION</span></a></th>
            <th><a href="mailto:darrylthompson@akdltlaw.com" target="_top"><img alt="Contact ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact ASHA" /></a></th>
            <th><a href="" target="_blank"><img alt="Like ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like ASHA" /></a></th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Team%20Logos/AlaskaAllStarsLogo_zpszqtsgye2.png" title="Alaska All Stars - Anchorage, AK" /></a></th>
            <th style="text-align: left"><a href="" title="Alaska All Stars - Anchorage, AK"><span style="color: #696969">ALASKA ALL STARS</span></a></th>
            <th><a href="mailto:akallstar_ice@hotmail.com" target="_top"><img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" /></a></th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AlaskaBlueDevilsLogo_zpsldn65akh.png"
 height="80" alt="Alaska Blue Devils - Eagle River, AK" title="Alaska Blue Devils - Eagle River, AK"/></a></th>
            <th style="text-align: left"><a href="" title="Alaska Blue Devils - Eagle River, AK">ALASKA BLUE DEVILS</a></th>
            <th><a href="mailto:mlaflamme@gci.net" target="_top"><img alt="Contact Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska Blue Devils" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska Blue Devils" /></a></th>
                       <th></th>
                       <th></th>
        </tr>
</tbody>
</table>
      </article>

  </section>
  <section id="section3">
    <input type="radio" name="sections" id="option3">
    <label for="option3">ARIZONA</label>
    <article>
     <table>
    <tbody>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Airdrie Lightning - Airdrie, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AirdrieLightningLogo_zpsciougcnu.png" title="Airdrie Lightning - Airdrie, AB" /></a></th>
            <th style="text-align: left"><a href="">AIRDRIE LIGHTNING</a></th>
            <th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
        </tr>
        <tr>
            <th class="tg-yw4l"><a href="" target="_blank"><img alt="Calgary Buffaloes - Calgary, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/CalgaryBuffaloesLogo_zpsbinsmcud.png" title="Calgary Buffaloes - Calgary, AB" /></a></th>
            <th style="text-align: left"><a href="">CALGARY BUFFALOES</a></th>
            <th><a href="mailto:" target="_blank"><img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" /></a></th>
            <th><a href="" target="_blank"><img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" /></a></th>
        </tr>
</tbody>
</table> 
    </article>
  </section>
  <section id="section4">
    <input type="radio" name="sections" id="option4">
    <label for="option4">ARKANSAS</label>
    <article>

    </article>
  </section>
</div>

0 个答案:

没有答案