如何讓CSS下拉菜單出現/點擊更改

我有一個網頁，主頁div爲1000px×1000px。在主格內，頂部有一個有四個部分的橫杆，每個部分佔據四分之一的空間。每個部分都有一些文字[用h2標籤包裹]，在1/4部分的中間水平/垂直居中，每個部分必須生成一個下拉菜單。如何讓CSS下拉菜單出現/點擊更改

對於下拉菜單[必須在移動設備和桌面上都可以使用]，我借用了使用複選框[檢查make下拉菜單可見，取消選中不可見]的想法，但它無法正常工作。該複選框很小，如果它不可見，則幾乎不可能知道在哪裏點擊來檢查/取消選中。我想要下拉菜單出現，如果用戶在1/4節區域點擊/輕按任何地方。

1/4部分的水平行下拉菜單如下：

^請注意，他們不實際工作。

HTML代碼：

<div id="Media_Choices"> 
    <div id="Video" class="media_choice"> <h2>Video▼</h2> </div> 
    <div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div> 
    <div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div> 
    <div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div> 
</div>

CSS：

#Media_Choices { 
    width: 100%; 
    max-height:40px; 
    min-height:40px; 
} 
.media_choice { 
    display: inline; 
    float: left; 
    width: 24.5%; 
    max-height: 38px; 
    min-height: 38px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 38px;  /* the same as your div height */ 
} 
#Video { 
} 
#Pictures { 
} 
#Audio { 
} 
#Stories { 
}

額外的信用，如果你能得到▼向下箭頭變成一個▲每當下拉菜單下來，然後回覆當菜單啓動時，變成▼向下的箭頭。你不需要使用基於複選框的技術[我知道有一個懸停選項]，但任何跨平臺的工作都很好。

僅供參考，複選框被origionally使用下面的代碼[從另一個問題採取]實現，但複製粘貼此解決方案，改變盒內的文字不夠好：

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/> 
<div class="dropdownbox"> 
    <label for="dropdownbox1">Open dropdown</label> 
    <ul class="dropdown"> 
     <li>...</li><li>etc</li> 
    </ul> 
</div> 
with CSS: 

.dropdowninput, .dropdown {display:none;} 
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}

來源

2015-12-15 Michael Lafayette

你有一個可行的菜單？ –

你說你在使用複選框，但是你的代碼沒有反映出來。請顯示嘗試使用複選框，以便我們可以看到你出錯的地方。 – allicarn

這個問題要麼過於寬泛，要麼基於觀點，要麼需要討論，所以是堆棧溢出的主題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

如果我正確地理解了你，你想創建一個響應下拉菜單，並且當菜單出現/消失時你想要箭頭改變，如果是這種情況，一種方法是將事件監聽器附加到菜單項顯示/隱藏子菜單點擊，使用CSS和JavaScript你可以做到以下幾點：

.media_choice > h2:after { 
    display: inline-block; 
    content: '▼'; 
} 
.media_choice.dropped > h2:after { 
    content: '▲'; 
} 
.media_choice > ul { 
    display: none; 
} 
.media_choice.dropped > ul { 
    display: block; 
}

個

使用JavaScript添加事件偵聽器：

$(document).ready (function() 
{ 
    $('.media_choice').on ('click', function() 
    { 
     $(this).toggleClass ('dropped'); 
    }); 
});

JSFiddle

來源

2015-12-15 17:55:34 razzak

這完全是我想要它做的。我需要做的就是驗證這個例子在Android瀏覽器上運行[chrome並且內置在瀏覽器中]，你的解決方案是完美的。謝謝。 –

@MichaelLafayette你可以做不同的動畫，使它看起來更漂亮https://jsfiddle.net/link2twenty/jb6bwajh/ –

這是使用複選框，並沒有JS。

nav { 
 
    width: 80%; 
 
    margin: 20px auto; 
 
} 
 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    overflow: none; 
 
    /* to contain the floats */ 
 
} 
 
nav li { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 25%; 
 
    float: left; 
 
    position: relative; 
 
    white-space: nowrap; 
 
} 
 
nav input { 
 
    display: none; 
 
} 
 
nav label { 
 
    display: block; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
nav label:hover { 
 
    background: #ccc; 
 
} 
 
nav a { 
 
    display: block; 
 
    padding: 10px; 
 
} 
 
nav a:hover { 
 
    background: #ccc; 
 
} 
 
nav label:after { 
 
    content: '▼'; 
 
    font-size: 10px; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    background: #fff; 
 
    width: 100%; 
 
} 
 
nav ul ul li { 
 
    width: 100%; 
 
    float: none; 
 
} 
 
nav input:checked ~ ul { 
 
    display: block; 
 
} 
 
nav input:checked ~ label:after { 
 
    content: '▲'; 
 
}

<!-- http://codepen.io/allicarn/pen/gPPmZZ --> 
 
<nav> 
 
    <ul> 
 
    <li> 
 
     <input type="checkbox" id="navitem1" name="navinputs" /> 
 
     <label for="navitem1">Menu Item #1</label> 
 
     <ul> 
 
     <li><a href="#">Sub Menu Item #1a</a></li> 
 
     <li><a href="#">Sub Menu Item #1b</a></li> 
 
     <li><a href="#">Sub Menu Item #1c</a></li> 
 
     <li><a href="#">Sub Menu Item #1d</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" id="navitem2" name="navinputs" /> 
 
     <label for="navitem2">Menu Item #2</label> 
 
     <ul> 
 
     <li><a href="#">Sub Menu Item #2a</a></li> 
 
     <li><a href="#">Sub Menu Item #2b</a></li> 
 
     <li><a href="#">Sub Menu Item #2c</a></li> 
 
     <li><a href="#">Sub Menu Item #2d</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" id="navitem3" name="navinputs" /> 
 
     <label for="navitem3">Menu Item #3</label> 
 
     <ul> 
 
     <li><a href="#">Sub Menu Item #3a</a></li> 
 
     <li><a href="#">Sub Menu Item #3b</a></li> 
 
     <li><a href="#">Sub Menu Item #3c</a></li> 
 
     <li><a href="#">Sub Menu Item #3d</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <input type="checkbox" id="navitem4" name="navinputs" /> 
 
     <label for="navitem4">Menu Item #4</label> 
 
     <ul> 
 
     <li><a href="#">Sub Menu Item #4a</a></li> 
 
     <li><a href="#">Sub Menu Item #4b</a></li> 
 
     <li><a href="#">Sub Menu Item #4c</a></li> 
 
     <li><a href="#">Sub Menu Item #4d</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2015-12-15 19:31:48 allicarn

如何讓CSS下拉菜單出現/點擊更改

回答

相關問題