Выезжающее слева направо меню
Предлагаем Вам воспользоваться прекрасным JavaScript кодом, позволяющим реализовать выезжающее слева направо меню сайта при нажатии на кнопку. При необходимости, при повторном нажатии, меню вновь исчезнет за пределы видимой области экрана. Пример работы скрипта.
Плюсы подобного скрипта заключаются в том, что если меню сайта очень большое, то нет необходимости постоянно показывать пользователю сайта все пункты. Достаточно сделать статичными только основные пункты меню, а все дополнительные убрать за пределы экрана. При необходимости пользователь кликнет по кнопочке меню, и все дополнительные пункты покажутся на экране.
Таким образом, при помощи нашего JavaScript кода, можно неплохо сэкономить видимое пространство сайта.
Внимание! Данный JavaScript код не работает в том случае, если в начале странички со скриптом указано следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
или
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">При этом данный JavaScript код работает в том случае, если строчка, содержащая тег <!DOCTYPE HTML PUBLIC... отсутствует в начале странички!
По этой причине для демонстрации примера работы скрипта, перейдите по ссылке пример работы скрипта выезжающего слева направо меню. На данной страничке мы специально убрали из начала странички тег <!DOCTYPE HTML PUBLIC....
Для того, чтобы получить подобное анимированное, выезжающее слева направо меню, воспользуйтесь JavaScript кодом, приведенным ниже:
<script type="text/javascript">
var left_show = 65;
var step = 10;
var Speed = 35;
var tim = 0;
function make_Menu(object) {
this.css = document.getElementById(object).style
this.state=1
this.go=0
this.width = document.getElementById(object).offsetWidth
this.left = menu_get_left
}
function menu_get_left() {
get_left = parseInt(this.css.left)
return get_left;
}
function move_Menu() {
if (!obj_Menu.state) {
clearTimeout(tim)
menu_In()
} else {
clearTimeout(tim)
Menu_Out()
}
}
function menu_In() {
if (obj_Menu.left() > -obj_Menu.width + left_show) {
obj_Menu.go = 1
obj_Menu.css.left = obj_Menu.left() - step
tim = setTimeout("menu_In()", Speed)
} else {
obj_Menu.go=0
obj_Menu.state=1
}
}
function Menu_Out(){
if(obj_Menu.left()<0) {
obj_Menu.go = 1
obj_Menu.css.left = obj_Menu.left() + step
tim = setTimeout("Menu_Out()", Speed)
} else {
obj_Menu.go = 0
obj_Menu.state = 0
}
}
function menu_Init() {
obj_Menu = new make_Menu("divMenu")
obj_Menu.css.left = -obj_Menu.width + left_show
}
</script>Далее создаем собственно блок с нашим меню, которое будет появляться при клике на ссылку "МЕНЮ". Удобнее всего меню делать в виде таблицы таким образом:
<div id="divMenu" style="position: absolute; top: 150px;">
<table style="border-spacing: 7px;">
<tr>
<td style="background-color: #33CC33; font-weight: bold; padding: 6px;">
- <a href="http://usefulscript.ru/">Главная</a><br>
- <a href="http://usefulscript.ru/script.php">Скрипты</a><br>
- <a href="http://usefulscript.ru/trick.php">Хитрости</a><br>
- <a href="http://usefulscript.ru/forum/index.php">Форум</a><br>
- <a href="http://usefulscript.ru/map.php">Карта сайта</a>
</td>
<td onclick="move_Menu()" style="background-color: #da70d6; color: blue;
text-align: center; text-decoration: none">><br>><br>МЕНЮ<br>><br>>
</td>
</tr>
</table>
</div>После того, как Вы добавили скрипт и меню, которое будет появляться, необходимо инициализировать сам скрипт. Делается это следующим образом:
<script type="text/javascript">
menu_Init();
</script>Как видите, ничего сложного в данном JavaScript коде нет, но как много места можно сэкономить на страничке сайта, не выводя каждый раз на экран громоздкое меню.
Внешний вид меню Вы можете настраивать на свое усмотрение (изменять цвета текста и фона, менять количество строк и колонок и т.д.).
P.S. Появился более компактный и надежный скрипт появляющегося слева направо меню, использующего библиотеку jQuery.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.