/ / Problema del modulo Dropdown sito reattivo - zurb-foundation, zurb-foundation-5

Problema relativo al modulo Dropdown sito reattivo - zurb-foundation, zurb-foundation-5

Sto avendo un po 'di problemi con un modulo su un menu a discesa nel framework di base 5.

Fondamentalmente sto assegnando un campo di input e un pulsante a un menu a discesa, che funziona bene.

Ma visto che non riesco a vedere prima un pulsante Indietro come posso sul primo menu a discesa, non vedo alcun motivo per cui. Quando il codice di base è una replica.

Dopo aver visualizzato il secondo menu a discesa e tornare al menu per visualizzare il menu a discesa, il campo di immissione e il pulsante sono visibili ...

Codice sorgente qui sotto:

CSS:

      .has-form-small {

top: 0rem;
left: 0rem;
min-width: 15rem; }
@media only screen and (max-width: 40em) {
.has-form {
min-width: 10rem;
top: 0 rem; }
.has-form .button {
height: 3rem; } }
</style>

HTML: Dropdown 1:

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>
</section>

Dropdown 2:

    <section class="top-bar-section">
<!-- Right Nav Section-->
<strong class="show-for-small-only">
<ul class="right">
<li class="has-dropdown">
<a href="#">Dropdown2</a>
<ul class="dropdown">
<li class="has-form-small">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</strong>
</section>

risposte:

0 per risposta № 1

Gestito per risolvere alla fine. Si scopre che l'opzione di menu a discesa non è necessaria.

Codice come di seguito:

CSS:

    <style>
.has-form-small {
color: darkslategray;
position: absolute;
top: 0rem;
left: 0rem;
min-width: 26rem;
min-height: 2.7rem;}
@media only screen {
.has-form-small {
color: darkslategray;
min-width: 26rem;
min-height: 2.7rem;
top: 0rem; }
.has-form-small .button {
color: darkslategray;
width:  10rem;}}
</style>

HTML:

<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<strong class="hide-for-small-only">
<li class="has-form">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</strong>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a>&nbsp</a></li>
<li>
<strong class="show-for-small-only">
<li class="has-form-small">
<div class="large-12 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</li>
</strong>
</li>
</ul>



<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>

<!-- Left Nav Section -->
<ul class="left">

</ul>
</section>
</nav>

Potrebbero esserci modi migliori per farlo (ad esempio rimuovere la riga vuota con "& nspb") ma stavo riscontrando problemi con i colori di sfondo, e questo dovrebbe essere solo un sito demo.