1

Перейти к содержимому


       Торент трекер от http://stalker-worlds.ru        Хранилище сайта http://stalker-worlds.ru        Онлайн Сталкер Канал Унесенные Сталкером Присоединяйся к нашему сообществу на facebook Вступай в нашу группу в контакте


Добро пожаловать к нам на сайт! Про Ваш статус и права можно прочитать в Этой теме

Для просмотра картинок и скачивания файлов с форума - пройдите регистрацию!   Проблемы с регистрацией - вам сюда


Фотография

Выезжающее слева направо меню


  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1
Dimon02022

Dimon02022

    В поисках Клондайка

  • Не в сети
  • Проверенные
  • Старожилы

<- Информация ->
  • Регистрация:
    30-October 11
  • 974 Cообщений
  • Пропуск №: 5421


Репутация: 1254 Постов: 974
  • Страна проживания:Россия
  • Реальное имя:Дмитрий
  • Пол:Мужчина
  • Город:Санкт-Петербург, Россия
Выезжающее слева направо меню.


Предлагаем Вам воспользоваться прекрасным 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>



Обратно в Скрипты для Сайта


Количество пользователей, читающих эту тему: 0

0 members, 0 guests, 0 anonymous users

яндекс.метрика
Button automatically alert search engines 31x31 WHOIS.UANIC.NAME - Identify traffic by Google

реклама на сайте подключена