ブートストラップなしでモバイル上でnavbarドロップダウンリストを作成する方法

Question

私の目標は、モバイルで#myDropdown div divフルサイズをクリックしたときに表示されるドロップダウンリストを作成することですが、これまでに試したことはありません働いた。私はブートストラップを使用していません（私もそうすることはできません）。

/* DROPDOWN */ 
 

 
#navbar_reservas { 
 
    height: 70px; 
 
} 
 

 
#reservas_left { 
 
    float: left; 
 
    width: 49%; 
 
} 
 

 
#reservas_right { 
 
    float: left; 
 
    width: 49%; 
 
} 
 

 
#inner_reservas_left { 
 
    float: right; 
 
} 
 

 
#inner_reservas_right { 
 
    float: left; 
 
} 
 

 
#totalprice { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
#navbar_reservas .dropbtn, 
 
#navbar_reservas #dudas { 
 
    font-family: "Quicksand", sans-serif; 
 
} 
 

 
#drop4 { 
 
    display: none; 
 
} 
 

 
#drop5 { 
 
    display: none; 
 
} 
 

 
#drop6 { 
 
    display: none; 
 
} 
 

 
.dropdown_reservas .dropbtn { 
 
    height: 80px; 
 
} 
 

 
.dropdown-content_reservas { 
 
    position: fixed; 
 
    color: #333; 
 
} 
 

 
.dropbtn { 
 
    margin-left: 50px; 
 
} 
 

 
#myDropdown { 
 
    text-align: left; 
 
    padding: 1%; 
 
    padding-right: 3%; 
 
    font-family: "Quicksand", sans-serif; 
 
    margin-top: 0; 
 
    list-style-type: none; 
 
} 
 

 
#myDropdown li { 
 
    list-style-type: none; 
 
}

<div id="navbar_reservas"> 
 
    <div id="reservas_left"> 
 
    <div class="nav-item_reservas" id="inner_reservas_left"> 
 
     <a id="dudas" href="tel:555555555"> 
 
        ¿Dudas? 
 
        <br />555 555 555 
 
       </a> 
 
    </div> 
 
    </div> 
 
    <div id="reservas_right"> 
 
    <div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right"> 
 
     <div class="dropbtn"> 
 
     TOTAL 
 
     <br /><span id="totalprice">0,00€</span> 
 
     <i class="material-icons">arrow_drop_down</i> 
 
     </div> 
 
     <div class="dropdown-content_reservas" id="myDropdown"> 
 
     <ul id="dropul" class="unoul"> 
 
      <li id="drop1"></li> 
 
      <li id="drop2"></li> 
 
      <li id="drop3"></li> 
 
      <li id="drop4"></li> 
 
      <li id="drop5"></li> 
 
      <li id="drop6"></li> 
 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

私が追加した場合：

@media (max-width: 760px){ 
    #myDropdown{ 
     width:100%; 
    } 
    #reservas_right { 
     width:100%; 
    } 
} 

を私が欲しいとドロップダウンdivが全幅になるんが、もちろん、今#myDropdownのdivが下の新しい行に落ちますので、divはもう中央揃えされていませんが、私が望むものではない2つの全幅の行にあります。私は2つのdivを中心にして1行しか持っていないが、それは親divの49％divを維持しながらドロップダウンリストを全幅にする方法を知らない。モバイルでのみこれを実行してください！それは私が知っている複雑に聞こえる。皆さん、私が何を意味するのか理解できると願っています！

Answer 1

基本的に私は、コンテナの外のdivを移動した

function divhide() { 
if (document.getElementById('myDropdown').style.display == 'block') { 
document.getElementById('myDropdown').style.display = 'none';} 
else { 
document.getElementById('myDropdown').style.display = 'block';} 
} 

ドロップダウンメニューを表示し、非表示にするには、HTML

<div id="navbar_reservas"> 
<div id="reservas_left"> 
<div class="nav-item_reservas" id="inner_reservas_left"> 
    <a id="dudas" href="tel:555555555"> 
       ¿Dudas? 
       <br />555 555 555 
      </a> 
</div> 
</div> 
<div id="reservas_right"> 
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right"> 
    <div class="dropbtn" onclick="divhide()"> 
    TOTAL 
    <br /><span id="totalprice">0,00€</span> 
    <i class="material-icons">arrow_drop_down</i> 
    </div> 
</div> 
</div> 
<div class="dropdown-content_reservas" id="myDropdown"> 
<ul id="dropul" class="unoul"> 
    <li id="drop1">1</li> 
    <li id="drop2">2</li> 
    <li id="drop3">3</li> 
    <li id="drop4">4</li> 
    <li id="drop5">5</li> 
    <li id="drop6">6</li> 
</ul> 

</div> 

</div> 

CSS

/* DROPDOWN */ 

#navbar_reservas { 
height: 70px; 
} 

#reservas_left { 
float: left; 
width: 49%; 
margin-bottom: 1%; 
} 

#reservas_right { 
float: left; 
width: 49%; 
margin-bottom: 1%; 
} 

#inner_reservas_left { 
float: right; 
} 

#inner_reservas_right { 
float: left; 
} 

#totalprice { 
font-size: 20px; 
font-weight: bold; 
} 

#navbar_reservas .dropbtn, 
#navbar_reservas #dudas { 
font-family: "Quicksand", sans-serif; 
} 

#drop4 { 
display: none; 
} 

#drop5 { 
display: none; 
} 

#drop6 { 
display: none; 
} 

.dropdown_reservas .dropbtn { 
height: 80px; 
} 

.dropdown-content_reservas { 
position: fixed; 
color: #333; 
} 

.dropbtn { 
margin-left: 50px; 
} 

#myDropdown { 
text-align: left; 
padding: 1%; 
padding-right: 3%; 
font-family: "Quicksand", sans-serif; 
margin-top: 2%; 
list-style-type: none; 
display: none; 
float: right; 
width: 49%; 
margin-left: 51%; 
} 

#myDropdown li { 
list-style-type: none; 
} 

@media (max-width: 760px) { 
#myDropdown { 
width: 100%; 
overflow: auto; 
display: none; 
margin-left: 0%; 
} 
} 

JavaScriptとデスクトップ版のデスクトップCSSをコピーし、モバイル版の新しいCSSを作成しました。すべての画面に表示されるプライマリディスプレイは同じ行にありますが、ライトボックスで何かをしたい場合を除いて、ドロップダウンリストは別の行になければなりませんでした。 JavaScriptは、ドロップダウンメニューをアクティブにする基本的な実装としてのみ存在します。これはあなたのための基本的な答えであり、最終的にはあなたが望むものではないかもしれません。