html — Выпадающие меню по клику (без JS)
Вопрос задан
Изменён 5 лет 3 месяца назад
Просмотрен 2k раз
Здравствуйте,
Мне нужно сделать выпадающие меню по клику использую только HTML/CSS. В принципе, я его создал, но есть проблема в том что я не использую id, а без него не получилось.
Вопрос: Как сделать такой вариант меню без использования id?
Спасибо!
Код HTML:
<nav>
<label for="checkbox"><img src="http://placehold.it/59x59" alt="Icon of menu"></label>
<input type="checkbox">
<ul>
<li><a href="#">Страница</a></li>
<li><a href="#">Страница</a></li>
<li><a href="#">Страница</a></li>
</ul>
</nav>
- html
- css
- меню
1
label {cursor: pointer;}
ul {list-style: none;}
.
list {display: none;}
.checkbox {display: none;}
.checkbox:checked ~ .list {
display: block;
}
list {display: none;}
.checkbox {display: none;}
.checkbox:checked ~ .list {
display: block;
}<nav>
<label><img src="http://placehold.it/59x59" alt="Icon of menu">
<input type="checkbox">
<ul>
<li><a href="#">Страница</a></li>
<li><a href="#">Страница</a></li>
<li><a href="#">Страница</a></li>
</ul>
</label>
</nav>не самий лутший вариант но я думаю подойдет
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам
, располагающихся после заголовка . При этом и
должны иметь общего родителя, так что если
вставить внутрь , то стили применяться уже не будут.
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Переход при выборе пункта из выпадающего списка
Опубликовано Автор: Николай Короткин
Давайте научимся создавать выпадающие списки с возможность включать в них активные ссылки. Таким образом, выбрав необходимый пункт, посетитель вашего сайта сможет перейти по ссылке, ассоциированной с этим пунктом.
Нижеприведенный способ отлично подходит для создания элемента навигации по сайту или же как способ выбора альтернативной языковой/географической версии сайта.
В начале вставим в код страницы скрипт, написанный на языке JavaScript, который будет отвечать за переход.
<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.
Далее вставляем сам код выпадающего списка.
<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)"
value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):
onChange=»имя_функции(document.
имя_формы.имя_списка)»
В нашем случае onChange=»linklist(document.menu.sel)»
Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).
В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).
Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:
<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>А в коде списка меняем событие OnChange на OnClick
<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)"
value="http://www. redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form> 
redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.
И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».
Posted in HTML/xHTML.
Выпадающее меню для ссылки? — HTML и CSS — Форумы SitePoint
Stomme_poes
#5
Ладно, может это форма поиска.
Если они переходят на сайт для варианта А… они могут выбрать его в раскрывающемся списке, и он отправит их на страницу с <Вариант А>. Надеюсь, это прояснит ситуацию, но я считаю, что мне все равно понадобится java.
Если вариант А является URL-адресом, то это все равно гиперссылка. Большинство веб-сайтов разбиты на разные страницы, представляющие разные разделы.
s/java/javascript/g, но в целом это никогда не должно быть необходимым для базовой функциональности сайта… HTTP и HTML делают все необходимое, за исключением динамических обновлений страниц, которые сами по себе являются не чем иным, как улучшением, которое вы можете добавить к уже работающему Настройка HTTP-HTML в любом случае (Hijax, наложение ajax/Javascript поверх рабочей формы).
В любом случае, если предположить, что это форма поиска:
Лично мне нравится PRG, потому что она сохраняет функциональность кнопки «Назад».
Ваша форма является POST-запросом к вашему серверному сценарию и отправляет два значения.
Работа бэкэнд-скрипта на самом деле может заключаться не в том, чтобы построить URL-адрес из параметров/значений, если это поиск… возможно, ему придется передать эти значения вашей поисковой функции, я не знаю, что вы настроили. Кстати, я не вижу опции «ничего» в вашем выборе. Это означает, что люди всегда будут отправлять два варианта. Если нужно использовать значение по умолчанию, присвойте ему атрибут selected=»selected». В противном случае создайте другой параметр, установите его первым и присвойте ему то, что ваш скрипт знает как нулевое значение.
В любом случае, независимо от того, что должен делать ваш скрипт, он отправит обратно URL в браузер в качестве ответа, как если бы браузер выполнил GET. Это означает, что если пользователь нажмет кнопку «Назад», то попадет на исходную страницу (и если вы не используете сеансы для хранения того, что они выбрали, то это будет зависеть от браузера, останутся ли выбранные значения выбранными). в виде).
Вот пример вашего HTML