Я хочу змінити вигляд горизонтального списку, щоб вибрати поле в мобільних пристроях - javascript, jquery, html5, css3

Я створив простий список, як показано нижче:

<ul>
<li>All</li>
<li>All</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

Зараз вона виглядає так:

Я хочу, щоб це виглядало як поле вибору в мобільних пристроях

Відповіді:

hello friend,

if you need your <ul> <li> structure as select box in mobile device,so you need to  code this structure twice.

1. as you already write.add class name to hide this in mobile
<ul class="list-desktop-wrap">
<li>All</li>
<li>All</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>



2.<div class="section-mobile-only">
<select>
<option value="All" selected>All</option>
<option value="All">All</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
</select>
</div>
As make this section display none in desktop & and display block in mobile device. if you need to view select box after 768 resolution (i-pad) so make css as
@media (max-width:768px){
.list-desktop-wrap{display:none};
.section-mobile-only{display:block};
}

initally its

.section-mobile-only{display:none};