Выдвижное меню для сайта
Предлагаем Вам воспользоваться JavaScript кодом, который позволит Вам реализовать выдвижное меню сайта. При необходимости, меню сайта можно как выдвинуть, так и задвинуть при помощи мышки.
Плюсы подобного скрипта заключаются в том, что если меню сайта достаточно большое, то нет необходимости постоянно показывать пользователю сайта все его пункты. Достаточно сделать постоянно видимыми только основные пункты меню, а все дополнительные логично будет убрать за пределы экрана. При необходимости пользователь сам сможет выдвинуть или задвинуть обратно все дополнительные пункты меню.
Таким образом, при помощи предлагаемого нами скрипта, можно неплохо сэкономить видимое пространство сайта. Для демонстрации работы скрипта обратите внимание на блок слева, немного торчащий из-за пределов экрана. Попробуйте его вытащить при помощи курсора мышки.
Чтобы получить подобное выдвижное меню, как в примере, добавьте вверху Вашего сайта между тегами <head></head> стиль для выдвижного блока:
<style type="text/css">
#slide_bar {
position: fixed;
width: 180px;
top: 200px;
border: 1px solid green;
background-color: silver;
font: bold 14px Verdana;
line-height: 22px;
text-align: center;
cursor: pointer;
}
</style>Далее создаем меню, которое будет появляться из-за пределов экрана. Для этого вставьте себе на страничку следующий код:
<div id="slide_bar" style="left: -140px;">
<a href="http://usefulscript.ru/">Главная</a><br>
<a href="news.php">Новости</a><br>
<a href="script.php">Скрипты</a><br>
<a href="useful_site.php">Сервисы</a><br>
<a href="trick.php">Хитрости</a><br>
</div>Теперь добавьте JavaScript код, который будет отвечать за выдвижение меню:
<script type="text/javascript">
var drag = false;
var menu = document.getElementById("slide_bar").style;
var left_border = parseInt(menu.left);
function move_menu(e) {
if (drag==true){
if (temp_x + e.clientX > left_border)
menu.left = Math.min(0, temp_x + e.clientX) + "px";
else menu.left = Math.max(left_border, temp_x + e.clientX) + "px";
}
}
function moves(e) {
drag = true;
temp_x = parseInt(menu.left) - e.clientX;
document.getElementById("slide_bar").onmousemove = move_menu;
}
function stop() { drag = false; }
document.getElementById("slide_bar").onmousedown = moves;
document.getElementById("slide_bar").onmouseout = new Function("drag = false");
document.getElementById("slide_bar").onmouseup = new Function("drag = false");
</script>Как видите, таким образом можно более рационально использовать место на страничках сайта.
Блок ссылок Вы можете менять на свое усмотрение (изменять цвета текста и фона, менять количество строк, колонок и т.д.).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.