如何獲取滑動導航面板的按鈕元素以便使用HTML和CSS進行旋轉？

基本上，我有一個html頁面，當你點擊正方形時，我已經設置了一個滑動面板。點擊它時如何讓方塊旋轉180度？我只能設置按鈕觸發div滑動或按鈕旋轉，但不能同時進行。我注意到它與我如何放置輸入標籤有關。如果它在標籤內，按鈕旋轉但對面板沒有影響。如果它在標籤外面，按下正方形將觸發側面板。一直在這一天，但似乎無法弄清楚。理想情況下，我本來希望得到替代方的箭頭，但我不知道從哪裏開始...如何獲取滑動導航面板的按鈕元素以便使用HTML和CSS進行旋轉？

-sliding格： https://codepen.io/yung_terminal/pen/oWrZZj

HTML：

<div class="main-wrap"> 
<input id="slide-sidebar" type="checkbox" role="button" /> 
<label for="slide-sidebar"> 
<div class="tab"></div> 
</label> 

<div class="content"> 

</div> 
</div>

CSS：

.sidebar { 
background-color: white; 
width: 300px; 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
} 
#navpan { 
position: absolute; 
right: 120px; 
bottom: 740px; 
} 
.sidebar li{ 
color: black; 
font-weight: bold; 
font-size: 25px; 
text-decoration: none; 
list-style: none; 
} 
.content { 
background-color: red; 
position: absolute; 
top: 0; 
left: 190px; 
right: 0; 
bottom: 0; 
-moz-transition: left 0.5s ease; 
transition: left 0.5s ease; 
} 

input[type=checkbox] { 
display: none; 
} 

input:checked ~ .content{ 
left: 0; 
} 

input:checked ~ label { 
left: 0; 
} 

label { 
z-index: 2; 
position: absolute; 
top: 50%; 
left: 190px; 
background-color: 0; 
font-size:60px; 
-moz-transition: left 0.5s ease; 
transition: left 0.5s ease; 
} 

.tab { 
width: 100px; 
height: 100px; 
background-color: white; 
transition: all 0.75s 0.25s; 
transform: rotate(0); 
} 

#slide-sidebar:checked + .tab{ 
transform: rotate(180deg); 
}

來源

2017-05-30 yung_terminal

我更新了你的代碼。請檢查一下。 DEMO。我在該框中添加了onclick函數，並創建了rotated類。使用CSS，我用90degree旋轉那個盒子。

$(document).ready(function() { 
 
    $('#rotate').click(function(){ 
 
    $(this).toggleClass('rotated'); 
 
}); 
 
});

.rotated { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sidebar { 
 
    background-color: white; 
 
    width: 300px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
#navpan { 
 
    position: absolute; 
 
    right: 120px; 
 
    bottom: 740px; 
 
} 
 
.sidebar li{ 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
.content { 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 190px; 
 
    right: 0; 
 
    bottom: 0; 
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
} 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
input:checked ~ .content{ 
 
    left: 0; 
 
} 
 
input:checked ~ label { 
 
    left: 0; 
 
} 
 
label { 
 
    z-index: 2; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 190px; 
 
    background-color: 0; 
 
    font-size:60px; 
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
} 
 
.tab { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: white; 
 
    transition: all 0.75s 0.25s; 
 
} 
 
#slide-sidebar:checked + .tab{ 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-wrap"> 
 
     <input id="slide-sidebar" type="checkbox" role="button" /> 
 
     <label for="slide-sidebar"> 
 
     <div class="tab" id="rotate"></div> 
 
     </label> 
 
    <div class="content"> 
 
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1> 
 
    </div> 
 
</div>

來源

2017-05-30 06:34:58 acmsohail

請附上你已經改變了什麼的說明。這將清楚說明爲什麼您的解決方案能夠正常工作，而OP則不能。 –

@JonP更新了我的答案。 :) – acmsohail

現在你應該注意到你已經介紹了OP沒有要求的兩件事情，javascript **和** jquery。如果可能的話，OP是一個CSS/HTML唯一選項。 –

你接近，但也不能令人信服。

你需要改變：#slide-sidebar:checked + .tab

爲：#slide-sidebar:checked + label>.tab

在你最初的選擇，你期待.tab是checkbox的兄弟。 label是.tab是label的孩子的兄弟姐妹。

.rotated { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sidebar { 
 
    background-color: white; 
 
    width: 300px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
#navpan { 
 
    position: absolute; 
 
    right: 120px; 
 
    bottom: 740px; 
 
} 
 
.sidebar li{ 
 
    color: black; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    list-style: none; 
 
} 
 
.content { 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 190px; 
 
    right: 0; 
 
    bottom: 0; 
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
} 
 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
input:checked ~ .content{ 
 
    left: 0; 
 
} 
 
input:checked ~ label { 
 
    left: 0; 
 
} 
 
label { 
 
    z-index: 2; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 190px; 
 
    background-color: 0; 
 
    font-size:60px; 
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
} 
 
.tab { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: white; 
 
    transition: all 0.75s 0.25s; 
 
} 
 
#slide-sidebar:checked + label>.tab{ 
 
    transform: rotate(180deg); 
 
}

<div class="main-wrap"> 
 
     <input id="slide-sidebar" type="checkbox" role="button" /> 
 
     <label for="slide-sidebar"> 
 
     <div class="tab" id="rotate"></div> 
 
     </label> 
 
    <div class="content"> 
 
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1> 
 
    </div> 
 
</div>

來源

2017-05-30 07:07:49

+表示立即兄弟，這.tab不是但label包裹.tab是。因此，改變

#slide-sidebar:checked + .tab{ 
    transform: rotate(180deg); 
}

到

#slide-sidebar:checked + label .tab{ 
    transform: rotate(180deg); 
}

來源

2017-05-30 09:05:03

如何獲取滑動導航面板的按鈕元素以便使用HTML和CSS進行旋轉？

回答

相關問題