/ / Responsive Website - formularz formularza rozwijanego - zurb-foundation, zurb-foundation-5

Responsive Website - formularz rozwijalnej listy rozwijanej - zurb-foundation, zurb-foundation-5

Mam problem z formularzem na liście rozwijanej w fundacji 5.

Zasadniczo przypisuję pole wejściowe i przycisk do rozwijanego menu, które działa poprawnie.

Ale ponieważ nie mogę zobaczyć przycisku Wstecz tak jak mogę na pierwszym liście rozwijanym, nie widzę żadnych powodów. Gdy podstawowy kod jest replikacją.

Po wyświetleniu drugiego menu rozwijanego i powrocie do menu, aby wyświetlić menu rozwijane, pole wprowadzania i przycisk są widoczne ...

Kod źródłowy poniżej:

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>

Odpowiedzi:

0 dla odpowiedzi № 1

Zarządzane do naprawienia w końcu. Okazuje się, że opcja menu rozwijanego nie jest potrzebna.

Kod jak poniżej:

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>

Mogą istnieć lepsze sposoby na to (np. Usunąć pusty wiersz z "& nspb"), ale mam problemy z kolorami tła, a to ma być tylko strona demonstracyjna.