Почти тристо строк и оно даже приблизительно не обладает тем функционалом, что есть у элемента <select>!
рони, почему так? Дублировать код два раза... и к тому же оно плохо доступное!
Для этого есть HTML-элемент <select> к которому можно применять стили...
<style>
select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 22px 3px 5px;
margin: 0;
font: inherit;
outline: none;
line-height: 1.2;
-webkit-appearance: none;
border-radius: 6px;
background: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="10px" height="10px" viewBox="0 0 12 10" \
stroke="%23bbb" stroke-width="1.3" stroke-linecap="round" \
stroke-linejoin="round" fill="none"\
>\
<polyline points="2 4 5 7 8 4"></polyline>\
</svg>') no-repeat right center / 20px 20px white;
}
select::-moz-focus-inner {
border: 0;
}
select:focus {
box-shadow: 0 0 3px 1px #ccc;
}
select:hover {
background-color: #eee;
}
</style>
<select>
<option>Ширина ботинка</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="ee">EE</option>
</select>
<select>
<option>Лезвие</option>
<option value="11,5">11,5</option>
<option value="12">12</option>
<option value="12,5">12,5</option>
<option value="13">13</option>
<option value="13,5">13,5</option>
<option value="14">14</option>
<option value="14,5">14,5</option>
<option value="15">15</option>
<option value="15,5">15,5</option>
</select>
Цитата:
Сообщение от Трудяга
Очень сложная для меня задача( может кто то объяснит как и что делать с этим)
|
Вы можете удалить ненужные классы! Вот пример выпадающего меню... (также есть поддержка узких экранов и вложенности любого уровня!)
<nav tabindex="0">
<ul>
<li>
<a href="#1">Dropdown menu item</a>
<ul>
<li><a href="#11">Dropdown item 1</a></li>
<li><a href="#12">Dropdown item 2</a></li>
</ul>
</li>
<li><a href="#2">Menu item</a></li>
<li>
<a href="#3">Dropdown menu item 2</a>
<ul>
<li><a href="#31">Second Dropdown item 1</a></li>
<li><a href="#32">Second Dropdown item 2</a></li>
</ul>
</li>
</ul>
</nav>
<style>
@import url("https://fonts.googleapis.com/css?family=Russo+One&subset=cyrillic");
nav {
font-family: "Russo One", sans-serif;
}
nav li {
position: relative;
list-style: none;
}
nav ul {
padding: 0;
margin: 0;
background: linear-gradient(45deg, #888, #aaa);
text-shadow: 0 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .7);
}
nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
nav li ul {
display: none;
position: absolute;
margin: -5px 0 0 5px;
box-shadow:
0 .1em 1em rgba(0, 0, 0, 0.3),
inset 0 0 1px rgba(255, 255, 255, 0.5)
;
}
nav li > ul > li > ul {
left: 100%;
top: 0;
margin: 5px 0 0 -5px;
}
nav ul {
border-radius: 5px;
}
nav li:focus-within > ul {
display: block;
display: flow-root;
z-index: 1;
}
nav li a, nav > ul:before {
color: white;
text-decoration: none;
display: block;
padding: 1em;
border-radius: 5px;
white-space: nowrap;
}
nav li a:focus {
background: rgba(0, 0, 0, .5);
color: white;
}
@media (max-width: 840px) {
nav > ul:before {
content: "☰";
}
nav > ul {
flex-direction: column;
display: inline-block;
}
nav:focus-within > ul {
display: block;
}
nav li {
flex: 1;
display: none;
}
nav:focus-within li {
display: block;
}
nav li ul,
nav li > ul > li > ul {
position: static;
margin: 10px;
}
nav > ul:before,
nav li a {
white-space: normal;
text-align: center;
}
}
</style>
Структура меню однородная, вы без проблем можете переставлять пункты меню...