Интересное меню, состоящее из кнопок
Предлагаем Вам воспользоваться простым скриптом, который позволит Вам создать свое собственное меню, состоящее из одних только кнопок Button. Данное меню отличается тем, что его можно прокручивать как вверх, так и вниз!
Для наглядного примера работы предлагаемого скрипта обратите внимание на меню из кнопок, располагающееся чуть ниже:
Для реализации продемонстрированного прокручивающегося меню, состоящего из одних только кнопок, понадобится добавить между тегами <head> и </head> стиль, который будет применен к блоку кнопок и отвечать за выделение кнопки, находящейся под курсором мышки в данный момент:
<style type="text/css">
#form_menu input { font-weight: bold; width: 200px; }
#form_menu input:hover { border: 2px solid #0000CC; cursor: pointer; }
</style>Далее необходимо будет поместить в начало Вашей странички JavaScript код, который будет прокручивать меню при нажатии на кнопки со стрелочками:
<script type="text/javascript">
var visible_button = 1;
var URLs = new Array(7); {
URLs[1] = "index.php"
URLs[2] = "news.php"
URLs[3] = "script.php"
URLs[4] = "useful_site.php"
URLs[5] = "trick.php"
URLs[6] = "forum/index.php"
URLs[7] = "support.php"
}
var Link = new Array(7); {
Link[1] = "На главную"
Link[2] = "Новости"
Link[3] = "Скрипты"
Link[4] = "Онлайн-сервисы"
Link[5] = "Хитрости"
Link[6] = "Форум"
Link[7] = "Обратная связь" }
function move(step) {
visible_button += step;
if (visible_button > 0) {
if (visible_button < 4) { update() }
else visible_button -= step;
}
else visible_button -= step;
}
function go(number_button) {
cap = URLs[visible_button + number_button];
window.location.href = cap;
}
function update() {
for (i=0; i<5; ++i) {
document.getElementById("form_menu").elements[i+1].value = Link[visible_button+i];
}
}
</script>В том месте Вашей странички, где планируется разместить такое меню, необходимо добавить вот такой небольшой код, описывающий кнопки:
<form id="form_menu" style="text-align: center;>
<input type="button" value="∧" onClick="move(-1);"><br>
<input type="button" value="0" onClick="go(0);"><br>
<input type="button" value="1" onClick="go(1);"><br>
<input type="button" value="2" onClick="go(2);"><br>
<input type="button" value="3" onClick="go(3);"><br>
<input type="button" value="4" onClick="go(4);"><br>
<input type="button" value="∨" onClick="move(1);">
</form>После того, как Вы добавили скрипт на свою страничку и определились с местом для вывода меню, необходимо запустить скрипт, который будет менять название кнопок и соответствующие им ссылки для перехода при прокручивании. Делается это так:
<script type="text/javascript">
update();
</script>Если Вы все сделали правильно, то в результате у Вас должно получиться точно такое же прокручивающееся меню, состоящее из кнопок Button, как в примере, показанном выше.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.