Меню на сайт html css java, html, css, java.
Меню на сайт html css java, меню html, меню css, меню java, меню для сайта, меню показать/скрыть, открыть/закрыть, меню с категориями, меню с подкатегориями.
В данной статье мы поделимся с Вами как сделать меню на сайт, кнопка html, к данной теме можно отнести открывающиеся и закрывающийся div, а также как сделать спойлер или появление блока при нажатии, код кнопки и многое другое, мы по пунктам рассмотрим как можно создать меню раскрывающее категории, а те в свою очередь следующие пункты меню.
Начнем мы с самого простого, внизу мы видим надпись btn1, цифру 1 и знак + и так расберем что это и зачем:
btn1 - первые три буквы это название нашего стиля css, цифра после букв необходима если вы желаете использовать несколько стилей css, для разных кнопок свой стиль css.
1 - это место где будет располагаться текст нашей кнопки меню или иной кнопки html.
+ - этот символ можно установить сразу после + - надписи на кнопке, но ставить его вовсе не обязательно.
На данном месте может находится любой символ или текст который необходимо менять на другой при клике и повторном клике на кнопку меню html.
Данный блок мы рассмотрели, осталось понять что такое Hide1 - это наш java код который заставляет изменятся надпись или символ после "Текст" после которого мы видим показать
<div><input class="btn1" type="button" value="1 + " onclick="Hide1(this)" />
<span style="display:none">
(здесь мы вставим категории или иной блок) </span></div>
java код:
<script> function Hide1(a){var b = a.parentNode.getElementsByTagName('span')[0].style;
if(a.value == 'Текст показать ')
{a.value = 'Текст скрыть ';b.display = '';}else
{a.value = 'Текст показать ';b.display = 'none';}}
</script></div>
Весь этот скрипт выглядит так:
<div class="widget-inner">
<div><input class="btn1" style="margin-top: 20px;height:30px" type="button" value="Текст показать " onclick="Hide1(this)" />
<span style="display:none">
</span></div>
<script> function Hide1(a){var b = a.parentNode.getElementsByTagName('span')[0].style;
if(a.value == 'Текст показать ')
{a.value = 'Текст скрыть ';b.display = '';}else
{a.value = 'Текст показать ';b.display = 'none';}}
</script></div>
Теперь нам нужно преобразить наши кнопки java, зададим им стиль css и поведение при нажатии или наведении на них курсора.
<style>
.btn1 { //Задание общего стиля для кнопки
height:30px; (это высота нашей кнопки html)
width: 190px; (ширина кнопки меню html)
border-color:#039bde #0d74b7 #0d74b7 #039bde;
border-style:solid;
border-width:1px;
background:#0f91ec;
cursor:pointer;
}
.btn1:hover { //Стиль кнопки при новедении на него курсора
border-color:#00acec #039bde #039bde #00acec;
border-style:solid;
border-width:1px;
background:#00aef0;
}
.btn1:focus { //Стиль кнопки, когда она в фокусе
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
.btn1:active { //Стиль кнопки при нажатии
background:#ff0000;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
</style>
Соединим весь наш код, вставляем стиль между первой и второй строками:
<div class="widget-inner">
<style>
.btn001 { //Задание общего стиля для кнопки
height:30px; (это высота нашей кнопки html)
width: 190px; (ширина кнопки меню html)
border-color:#039bde #0d74b7 #0d74b7 #039bde;
border-style:solid;
border-width:1px;
background:#0f91ec;
cursor:pointer;
}
.btn001:hover { //Стиль кнопки при новедении на него курсора
border-color:#00acec #039bde #039bde #00acec;
border-style:solid;
border-width:1px;
background:#00aef0;
}
.btn001:focus { //Стиль кнопки, когда она в фокусе
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
.btn001:active { //Стиль кнопки при нажатии
background:#ff0000;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
</style>
<div><input class="btn001" style="margin-top: 20px;height:30px" type="button" value="Текст показать " onclick="Hide001(this)" />
<span style="display:none">
</span></div>
<script> function Hide001(a){var b = a.parentNode.getElementsByTagName('span')[0].style;
if(a.value == 'Текст показать ')
{a.value = 'Текст скрыть ';b.display = '';}else
{a.value = 'Текст показать ';b.display = 'none';}}
</script></div>
Теперь между <span style="display:none"> и </span> вставим наши кнопки:
<form>
<input class="btn003" onclick="javascript:window.location='https://'" style="font-size: 16; height: 30px;" type="button"
value="Текст" />
</form>
Сдесь, между этими строками располагается сама кнопка,таких блокав как этот можно вставлять подряд сколько угодно - <form> / </form> Далее мы видим https:// - это ссылка на страницу или сайт, дальше все как и ранее, стиль css и текст в кнопке меню html. вставим в общий код сразу несколько таких кнопок и дадим им стиль.
<style>
.btn003 { //Задание общего стиля для кнопки
height:30px; (это высота нашей кнопки html)
width: 190px; (ширина кнопки меню html)
margin-left: 20px; (отступ слева)
margin-top: 5px; (отступ сверху)
border-color:#039bde #0d74b7 #0d74b7 #039bde;
border-style:solid;
border-width:1px;
background:#0f91ec;
cursor:pointer;
}
.btn003:hover { //Стиль кнопки при новедении на него курсора
border-color:#00acec #039bde #039bde #00acec;
border-style:solid;
border-width:1px;
background:#00aef0;
}
.btn003:focus { //Стиль кнопки, когда она в фокусе
background:#ddd;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
.btn003:active { //Стиль кнопки при нажатии
background:#ff0000;
border-color:#ddd #333 #333 #ddd;
border-style:solid;
border-width:1px;
}
</style>
Вот что получится:
Спасибо, супер)
ОтветитьУдалить