CODEWITHSUNDEEP
htmlcss
hrhsii
hrhsii

Reputation: 157

Keep selected tab highlighted in menu using CSS

Due to new eBay rules coming into effect in June 2017, all listings are not allowed active content.

I have created a tab menu using html and CSS. I need to keep the selected tab highlighted using non active and preferably responsive CSS and HTML.

Usually I would use J.S to change an active ID which CSS can manipulate.

What I have so far:

#menb {
  cursor: pointer;
  width: 150px;
  display: inline-block;
  background-color: #BC2400;
  color: white;
  font-weight:bold;  
  text-align: center;
  transition: .25s ease;
  border: none;
  padding: 10px;
  border-radius: 12px 12px 0 0;
}

#menu_area a {
    color: #ffffff;
    text-decoration: none;      
}    

#menu_area a:hover {
    color: #ffbf01;
    text-decoration: none;       
}

#menu_area a:active {
    text-decoration: none;    
    color: #ffbf01;
}      
      
.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
    display: none;
}
.tab-folder > :last-child, .tab-folder > .tab-content:target {
    display: block;
}

#postage {
    font-family:verdana, arial, sans-serif;
    text-align:center;
    text-justify: distribute;
    color:red;
    font-size:12px;
}

#button {
    display: inline;
    text-decoration: none;    
    border: 1px solid #B7B7B7; 
    background: #F7F7F7 url(http://www.electrohero.com/ebay/images/tabbut.gif) repeat-x 0 0;    
    background-color:#FFF;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px;
    width: 130px;
    font-weight:bold;
    color: #f5f5f5;
    /*margin: 0 auto;*/  
    margin-right:8px; /*distance between buttons*/    
    padding: 4px 4px 4px 4px; 
    font-family: Verdana,Arial,Helvetica,sans-serif;     
    font-size: 12px;
    text-align: center;       
}

#button a:link a:visited a:hover {
    text-decoration: none;
    color: #f5f5f5; 
    font-weight:bold;       
}​
<!DOCTYPE html>
<html>
<head>  
  <link href="simple.css" rel="stylesheet" type="text/css" /> 
</head>
  
<body style="margin:0px">  

  <p>Some text....</p>   
    
  <br /><br /> 
                                                
  <div id="menu_area">
      <button id="menb"><a href="#tab1">Menu 1</a></button>
      <button id="menb"><a href="#tab2">Menu 2</a></button>
      <button id="menb"><a href="#tab3">Menu 3</a></button>
      <button id="menb"><a href="#tab4">Menu 4</a></button>
  </div>      
  <div class="tab-folder">
    <div id="tab2" class="tab-content">
    <p>Menu 2</p>
    </div>                             

    <div id="tab3" class="tab-content">
    <p>Menu 3</p>
    </div>  <!-- end view3 -->    

    <div id="tab4" class="tab-content"> <!-- tab - What's sent -->                         
    <p>Menu 4</p>
    </div>  <!-- end tab 4 -->    

    <div id="tab1" class="tab-content"> <!-- tab - Compatible Devices -->                                 
    <p>Menu 1</p>                                                                                       
    </div> <!-- end view1 --> 
  </div>   <!-- end tab-folder -->
    
  </body> 
</html>​

Upvotes: 1

Views: 3276

Answers (1)

SVSchmidt
SVSchmidt

Reputation: 6527

When I get you right, you need to track an active state without JavaScript? This is indeed possible by abusing radio buttons. Look at the following code.

Basically, I changed the structure a bit and introduces labels with a for-attribute as well as a <input type="radio" ... /> for each tab. Radio buttons which share the same name are restricted to only one active one at a time. The label has the ID of each radio button (tab1_active etc.) as for attribute which activates the input when clicked. Two things are important: I had to remove the <a> since it was only possible to click the label or the a (which resulted in the correct button highlighted OR the correct section active). Secondly, the radio buttons must be at the same level as the menu and the tab container to allow proper css selector usage. The rest is selector hacking like input#tab1_active:checked ~ #menu_area .tab1-btn (read: For an input with id tab1_active which is checked look for preceeding elements with an id of menu_area and select each child with a class of tab1-btn...).

.button {
  cursor: pointer;
  box-sizing: border-box;
  padding-top: 10px;
  width: 150px;
  display: inline-block;
  background-color: #BC2400;
  color: white;
  font-weight:bold;  
  text-align: center;
  transition: .25s ease;
  border: none;
  border-radius: 12px 12px 0 0;
}

#menu_area .button {
    color: #ffffff;
    text-decoration: none;   
    height: 45px;
}    

#menu_area .button:hover {
    color: #ffbf01;
    text-decoration: none;       
}

#menu_area .button:active {
    text-decoration: none;    
    color: #ffbf01;
}          

#postage {
    font-family:verdana, arial, sans-serif;
    text-align:center;
    text-justify: distribute;
    color:red;
    font-size:12px;
}

#button {
    display: inline-block;
    text-decoration: none;    
    border: 1px solid #B7B7B7; 
    background: #F7F7F7 url(http://www.electrohero.com/ebay/images/tabbut.gif) repeat-x 0 0;    
    background-color:#FFF;
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px;
    width: 130px;
    font-weight:bold;
    color: #f5f5f5;
    /*margin: 0 auto;*/  
    margin-right:8px; /*distance between buttons*/    
    font-family: Verdana,Arial,Helvetica,sans-serif;     
    font-size: 12px;
    text-align: center;     
    padding: 4px;
}

label {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  width: 120px;
}

input[type="radio"] {
  display: none;
}

.tab-folder .tab-content {
  display: none;
}

input#tab1_active:checked ~ #menu_area .tab1-btn {
  color: #ffbf01!important;
}

input#tab1_active:checked ~ .tab-folder #tab1 {
  display: block;
}

input#tab2_active:checked ~ #menu_area .tab2-btn {
  color: #ffbf01!important;
}

input#tab2_active:checked ~ .tab-folder #tab2 {
  display: block;
}

input#tab3_active:checked ~ #menu_area .tab3-btn {
  color: #ffbf01!important;
}

input#tab3_active:checked ~ .tab-folder #tab3 {
  display: block;
}

input#tab4_active:checked ~ #menu_area .tab4-btn {
  color: #ffbf01!important;
}

input#tab4_active:checked ~ .tab-folder #tab4 {
  display: block;
}
<!DOCTYPE html>
<html>
<head>  
  <link href="simple.css" rel="stylesheet" type="text/css" /> 
</head>
  
<body style="margin:0px">  

  <p>Some text....</p>   
    
  <br /><br /> 
  
  <input type="radio" name="active-menu" id="tab1_active" checked>
  <input type="radio" name="active-menu" id="tab2_active">
  <input type="radio" name="active-menu" id="tab3_active">
  <input type="radio" name="active-menu" id="tab4_active">
 
  <div id="menu_area">   
      
        <label for="tab1_active">
              <div class="button menb tab1-btn">Menu 1</div>    
        </label> 
      
        <label for="tab2_active">
          <div class="button menb tab2-btn">Menu 2</div>
        </label>
            
        <label for="tab3_active">
          <div class="button menb tab3-btn">Menu 3</div>
        </label>   
        
        <label for="tab4_active">
         <div class="button menb tab4-btn"> Menu 4</div> 
        </label>
               
  </div>      
  <div class="tab-folder">
    <div id="tab2" class="tab-content">
    <p>Menu 2</p>
    </div>                             

    <div id="tab3" class="tab-content">
    <p>Menu 3</p>
    </div>  <!-- end view3 -->    

    <div id="tab4" class="tab-content"> <!-- tab - What's sent -->                         
    <p>Menu 4</p>
    </div>  <!-- end tab 4 -->    

    <div id="tab1" class="tab-content"> <!-- tab - Compatible Devices -->                                 
    <p>Menu 1</p>                                                                                       
    </div> <!-- end view1 --> 
  </div>   <!-- end tab-folder -->
    
  </body> 
</html>​

Upvotes: 2

Related Questions