CSS水平展开和折叠图标菜单

时间：2018-01-08 21:36:54

标签： html css

这是一个非常简单的水平菜单，在点击主图标时展开和折叠：LANGUAGE图标有三个选项，SOCIAL图标有四个。 单击LANGUAGE将展开其图标并将SOCIAL移至左侧。 我希望得到Javascript中的内容＆＃34; toogle＆＃34;：如果LANGUAGE图标被展开，它们会在点击“社交”图标时崩溃，反之亦然。

＆＃13;
＆＃13; 
.lang {display: none;}
.social {display: none;}

.lang:checked ~ .UK {left: 0.2rem;}
.lang:checked ~ .ES {left: 0.23rem;}
.lang:checked ~ .FR {left: 0.23rem;}
.lang:checked ~ .sharing {left: 0.6rem;}

.social:checked ~ .FCBK {left: 0.12rem;}
.social:checked ~ .TWITTER {left: 0.24rem;}
.social:checked ~ .GPLUS {left: 0.48rem;}
.social:checked ~ .MAIL {left: 0.60rem;}

.link_general {
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.share {
background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png);
background-repeat:no-repeat;
width: 2.5rem;
height: 2.5rem;
display:inline-block;
position:relative;
bottom: 0; 
right:0;
background-size: contain;
cursor:pointer;
z-index: 10;
}

.lang {background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png);}

.UK, .ES, .FR, .FCBK, .TWITTER, .GPLUS, .MAIL {
display:block;
text-indent:-625rem;
width:2.5rem;
height:2.5rem;
background-repeat:no-repeat;
background-size:contain;
cursor: pointer;
padding: 0 0.5rem 0 0;
}

.FCBK {
background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png);
}

.TWITTER {
background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png);
}

.GPLUS {
background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png);
}

.MAIL {
background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png);
}	


.UK {background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png);
background-color: #F3E4FF;
border-radius: 2rem;}

.ES {background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png);background-color: #F3E4FF;
border-radius: 2rem;}

.FR {background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png);background-color: #F3E4FF;
border-radius: 2rem;}

.sharing, .FCBK, .TWITTER, .GPLUS, .MAIL, .ETSY {
display: inline-block;
}

.FCBK {left: -2.75rem;}
.TWITTER {left:-5.5rem;}
.GPLUS {left:-8.25rem;}
.MAIL {left:-11rem;}
.sharing {left: -7rem;}

.UK {left: -2.8rem;}
.ES {left:-5.5rem;}
.FR {left:-8.3rem;}
＆＃13; 
<div>

Language:

<input type="checkbox" id="lang_id" class="lang">
<label for="lang_id" class="share lang"></label>

<div class="UK link_general" style="display: inline-block; padding:0;" href="">
</div>
<div class="ES link_general" style="display: inline-block; padding:0;" href="">
</div>
<div class="FR link_general" style="display: inline-block; padding:0;" href="">
</div>
</input>
<div class="sharing link_general" style="display: inline-block; padding:0;" href="">
Share on:
<input type="checkbox" id="social_id" class="social">
	  <label for="social_id" class="share"></label>

<a class="FCBK link_general" style="display: inline-block; padding:0;" href=""
   title="Share on Facebook">
</a>
   
<a class="TWITTER link_general" style="display:inline-block; padding:0;"
    href=""
    title="Share on Twitter">
</a>   
<a class="GPLUS link_general" style="display:inline-block; padding:0;"
    href="">
</a>

<a class="MAIL link_general" style="display:inline-block; padding:0;" 
    href="" title="Send by mail">
</a>
</input>
</div></div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

您只需取消选中该复选框即可。你只需使用：

document.getElementById('lang_id').checked = false;
document.getElementById('social_id').checked = false;

＆＃13;
＆＃13; 
.lang {display: none;}
.social {display: none;}

.lang:checked ~ .UK {left: 0.2rem;}
.lang:checked ~ .ES {left: 0.23rem;}
.lang:checked ~ .FR {left: 0.23rem;}
.lang:checked ~ .sharing {left: 0.6rem;}

.social:checked ~ .FCBK {left: 0.12rem;}
.social:checked ~ .TWITTER {left: 0.24rem;}
.social:checked ~ .GPLUS {left: 0.48rem;}
.social:checked ~ .MAIL {left: 0.60rem;}

.link_general {
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.share {
background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png);
background-repeat:no-repeat;
width: 2.5rem;
height: 2.5rem;
display:inline-block;
position:relative;
bottom: 0; 
right:0;
background-size: contain;
cursor:pointer;
z-index: 10;
}

.lang {background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png);}

.UK, .ES, .FR, .FCBK, .TWITTER, .GPLUS, .MAIL {
display:block;
text-indent:-625rem;
width:2.5rem;
height:2.5rem;
background-repeat:no-repeat;
background-size:contain;
cursor: pointer;
padding: 0 0.5rem 0 0;
}

.FCBK {
background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png);
}

.TWITTER {
background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png);
}

.GPLUS {
background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png);
}

.MAIL {
background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png);
}	


.UK {background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png);
background-color: #F3E4FF;
border-radius: 2rem;}

.ES {background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png);background-color: #F3E4FF;
border-radius: 2rem;}

.FR {background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png);background-color: #F3E4FF;
border-radius: 2rem;}

.sharing, .FCBK, .TWITTER, .GPLUS, .MAIL, .ETSY {
display: inline-block;
}

.FCBK {left: -2.75rem;}
.TWITTER {left:-5.5rem;}
.GPLUS {left:-8.25rem;}
.MAIL {left:-11rem;}
.sharing {left: -7rem;}

.UK {left: -2.8rem;}
.ES {left:-5.5rem;}
.FR {left:-8.3rem;}
＆＃13; 
Language:

<input type="checkbox" id="lang_id" class="lang">
<label for="lang_id" class="share lang" onclick="if(document.getElementById('lang_id').value) document.getElementById('social_id').checked = false;"></label>

<div class="UK link_general" style="display: inline-block; padding:0;" href="">
</div>
<div class="ES link_general" style="display: inline-block; padding:0;" href="">
</div>
<div class="FR link_general" style="display: inline-block; padding:0;" href="">
</div>
</input>
<div class="sharing link_general" style="display: inline-block; padding:0;" href="">
Share on:
<input type="checkbox" id="social_id" class="social">
	  <label for="social_id" class="share" onclick="if(document.getElementById('social_id').value) document.getElementById('lang_id').checked = false;"></label>

<a class="FCBK link_general" style="display: inline-block; padding:0;" href=""
   title="Share on Facebook">
</a>
   
<a class="TWITTER link_general" style="display:inline-block; padding:0;"
    href=""
    title="Share on Twitter">
</a>   
<a class="GPLUS link_general" style="display:inline-block; padding:0;"
    href="">
</a>

<a class="MAIL link_general" style="display:inline-block; padding:0;" 
    href="" title="Send by mail">
</a>
</input>
</div></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

只需将type="checkbox"更改为type="radio"并设置属性name。

.lang {
  display: none;
}

.social {
  display: none;
}

.lang:checked~.UK {
  left: 0.2rem;
}

.lang:checked~.ES {
  left: 0.23rem;
}

.lang:checked~.FR {
  left: 0.23rem;
}

.lang:checked~.sharing {
  left: 0.6rem;
}

.social:checked~.FCBK {
  left: 0.12rem;
}

.social:checked~.TWITTER {
  left: 0.24rem;
}

.social:checked~.GPLUS {
  left: 0.48rem;
}

.social:checked~.MAIL {
  left: 0.60rem;
}

.link_general {
  position: relative;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.share {
  background-image: url(https://www.tymetro.com.tw/tymetro-new/_images/all/share-icon.png);
  background-repeat: no-repeat;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  position: relative;
  bottom: 0;
  right: 0;
  background-size: contain;
  cursor: pointer;
  z-index: 10;
}

.lang {
  background-image: url(http://www.aah.co.uk/wcsstore7.00.00.542/CelesioB2BStorefrontAssetStore/images/touch-icon-60px.png);
}

.UK,
.ES,
.FR,
.FCBK,
.TWITTER,
.GPLUS,
.MAIL {
  display: block;
  text-indent: -625rem;
  width: 2.5rem;
  height: 2.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  padding: 0 0.5rem 0 0;
}

.FCBK {
  background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/fb.png);
}

.TWITTER {
  background-image: url(http://www.kauffman.org/images/Kauffman_org/icon-twitter-blue.png);
}

.GPLUS {
  background-image: url(http://bookfairsfiles.scholastic.com/dotcom/social/footer/google+.png);
}

.MAIL {
  background-image: url(http://aealvalade.edu.pt/images/fich/botoes/icon-mail.png);
}

.UK {
  background-image: url(http://www.bigcheesebadges.com/images/united_kingdom_great_british_union_jack_flag.png);
  background-color: #F3E4FF;
  border-radius: 2rem;
}

.ES {
  background-image: url(http://www.bigcheesebadges.com/images/spain_spanish_flag.png);
  background-color: #F3E4FF;
  border-radius: 2rem;
}

.FR {
  background-image: url(http://www.bigcheesebadges.com/images/france_french_flag.png);
  background-color: #F3E4FF;
  border-radius: 2rem;
}

.sharing,
.FCBK,
.TWITTER,
.GPLUS,
.MAIL,
.ETSY {
  display: inline-block;
}

.FCBK {
  left: -2.75rem;
}

.TWITTER {
  left: -5.5rem;
}

.GPLUS {
  left: -8.25rem;
}

.MAIL {
  left: -11rem;
}

.sharing {
  left: -7rem;
}

.UK {
  left: -2.8rem;
}

.ES {
  left: -5.5rem;
}

.FR {
  left: -8.3rem;
}
<div>

  Language:

  <input type="radio" id="lang_id" class="lang" name="radio">
  <label for="lang_id" class="share lang"></label>

  <div class="UK link_general" style="display: inline-block; padding:0;" href="">
  </div>
  <div class="ES link_general" style="display: inline-block; padding:0;" href="">
  </div>
  <div class="FR link_general" style="display: inline-block; padding:0;" href="">
  </div>
  </input>
  <div class="sharing link_general" style="display: inline-block; padding:0;" href="">
    Share on:
    <input type="radio" id="social_id" class="social" name="radio">
    <label for="social_id" class="share"></label>

    <a class="FCBK link_general" style="display: inline-block; padding:0;" href="" title="Share on Facebook">
    </a>

    <a class="TWITTER link_general" style="display:inline-block; padding:0;" href="" title="Share on Twitter">
    </a>
    <a class="GPLUS link_general" style="display:inline-block; padding:0;" href="">
    </a>

    <a class="MAIL link_general" style="display:inline-block; padding:0;" href="" title="Send by mail">
    </a>
    </input>
  </div>
</div>

相关问题
最新问题