#1
Dimon02022
Надіслано
31 січень 2012 - 09:43
Выезжающее слева направо меню.
Предлагаем Вам воспользоваться прекрасным JavaScript кодом, позволяющим реализовать выезжающее слева направо меню сайта при нажатии на кнопку. При необходимости, при повторном нажатии, меню вновь исчезнет за пределы видимой области экрана.
Пример работы скрипта. Плюсы подобного меню заключаются в том, что если меню сайта очень большое, то нет необходимости постоянно показывать пользователю сайта все пункты. Достаточно сделать статичными только основные пункты меню, а все дополнительные убрать за пределы экрана. При необходимости пользователь кликнет по кнопочке меню, и все дополнительные пункты покажутся на экране.
Таким образом, при помощи нашего JavaScript кода, можно неплохо сэкономить видимое пространство сайта.
Внимание! Данный JavaScript код выезжающего меню не работает в том случае, если в начале странички со скриптом указано следующее:
Code
<!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... отсутствует в начале странички!
Для того, чтобы получить подобное анимированное, выезжающее слева направо меню, воспользуйтесь JavaScript кодом, приведенным ниже:
Code
<script language="JavaScript" type="text/javascript">
explorer = document.all?1:0
n = document.layers?1:0
Mozilla_6 = document.getElementById&&!document.all?1:0
left_show = 65;
var step = 10;
menu_Speed = 35;
var move_OnScroll = true;
var left_top;
var tim = 0;
function make_Menu(object, framing) {
framing = (!framing) ? '':'document.' + framing + '.'
if (n) this.css = eval(framing + 'document.' + object)
else if (Mozilla_6) this.css = document.getElementById(object).style
else if (explorer) this.css = eval(object + '.style')
this.state=1
this.go=0
if (n) this.width = this.css.document.width
else if (Mozilla_6) this.width = document.getElementById(object).offsetWidth
else if (explorer) this.width = eval(object + '.offsetWidth')
this.left = menu_get_left
this.object = object + "Object"; eval(this.object + "=this")
}
function menu_get_left() {
if (n||Mozilla_6) { get_left = parseInt(this.css.left)}
else if (explorer) { get_left = eval(this.css.pixelLeft)}
return get_left;
}
function move_Menu() {
if (!object_Menu.state) {
clearTimeout(tim)
menu_In()
} else {
clearTimeout(tim)
Menu_Out()
}
}
function menu_In() {
if (object_Menu.left()>-object_Menu.width + left_show) {
object_Menu.go = 1
object_Menu.css.left = object_Menu.left() - step
tim = setTimeout("menu_In()",menu_Speed)
} else {
object_Menu.go=0
object_Menu.state=1
}
}
function Menu_Out(){
if(object_Menu.left()<0) {
object_Menu.go = 1
object_Menu.css.left = object_Menu.left() + step
tim = setTimeout("Menu_Out()", menu_Speed)
} else {
object_Menu.go = 0
object_Menu.state = 0
}
}
function check_Scrolled() {
if(!object_Menu.go) object_Menu.css.top = eval(scrolled) + parseInt(left_top)
if(n||Mozilla_6) setTimeout('check_Scrolled()', 30)
}
function menu_Init() {
object_Menu = new make_Menu('divMenu')
if (n||Mozilla_6) scrolled = "window.pageYOffset"
else if (explorer) scrolled = "document.body.scrollTop"
object_Menu.css.left=-object_Menu.width + left_show
if (n||Mozilla_6) left_top = object_Menu.css.top
else if (explorer) left_top = object_Menu.css.pixelTop
object_Menu.css.visibility = 'visible'
if (move_OnScroll) explorer?window.onscroll = check_Scrolled:check_Scrolled();
}
</script> Далее создаем собственно наше меню, которое будет появляться при клике на ссылку "МЕНЮ". Удобнее всего меню делать в виде таблицы таким образом:
Code
<div id="divMenu" style="position:absolute;top:100px;left:220px;visibility:hidden;">
<table border="0" cellspacing="8">
<tr>
<td bgcolor="#32cd32">
- <a href="http://usefulscript.ru/"><b>Главная</b></a><br>
- <a href="http://usefulscript.ru/script.php"><b>Скрипты</b></a><br>
- <a href="http://usefulscript.ru/trick.php"><b>Хитрости</b></a><br>
- <a href="http://usefulscript.ru/forum/index.php"><b>Форум</b></a><br>
- <a href="http://usefulscript.ru/map.php"><b>Карта сайта</b></a>
</td>
<td bgcolor="#da70d6" align="center">
<a href="javascript://" onclick="move_Menu()" style="text-decoration:">
><br>><br>МЕНЮ<br>><br>></a>
</td>
</tr>
</table>
</div> После того, как Вы добавили скрипт и меню, которое будет появляться, необходимо запустить сам скрипт. Делается это следующим образом:
Code
<script language="JavaScript" type="text/javascript">
menu_Init();
</script>
Войти
Регистрация
.png)
Український (UA).png)
Русский (RU)
.png)
English (ENG)