Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Выезжающее меню, с правой стороны экрана 
:(
    Опции темы
DmitryChess
Дата 18.7.2008, 01:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.7.2008

Репутация: нет
Всего: нет
Скажите пожалуйста, каким образом реализовать выезжающее меню с правой части экрана. Все стандартные меню - левосторонние. А как сделать с левой стороны?
Может есть примеры, решения?
PM MAIL   Вверх
comtat
Дата 18.7.2008, 02:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
ну предоставь скрипт левостороннего меню и мы вместе сделаем из его правосторонним


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
DmitryChess
Дата 18.7.2008, 15:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.7.2008

Репутация: нет
Всего: нет
>> menu_lest.js

var pos=-235; 
var jump=5; 
var speed=0.1;  
function domenu() 
{
document.getElementById('menu').style.visibility="visible"; 
if (pos<=-235) gomenu(); 
}

function gomenu()
{
document.getElementById('menu').style.left=pos+"px";
document.getElementById('menu').style.top=0+"px"; 
pos+=jump;
if (pos<0) 
{
setTimeout("gomenu()", speed);
}
}

>> head

<script type="text/javascript" src="menu_left.js"></script>

>> body:

<div id=menu style="position:absolute; z-index:1; opacity:0.5; -khtml-opacity: 0.5; -moz-opacity:0.5; filter:alpha(Opacity=50)">
<table width=200 height=500 align="center"  cellpadding="0px" cellspacing="0px" bgcolor="#000000">
<tr> <TD width=200 valign="top"><div align="center"><br> 
        <span class="style1">Меню</span></div></TD>
</tr>
</table>
</div>


Собственно говоря, меню которое выезжает у меня с левой части экрана. Помимо желания сделать из него выезжающее с правой части, хочется чтобы оно располагалось по центру относительно высоты экрана 
PM MAIL   Вверх
comtat
Дата 18.7.2008, 17:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
ты уверен что оно рабочее ?? а то у меня даже намека нет что оно работает

p.s. используй кнопку код


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
DmitryChess
Дата 18.7.2008, 17:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.7.2008

Репутация: нет
Всего: нет
Конечно работает! По крайней мере, в Опере и Эксплорере - точно!
Мозилла не установлена - не проверял...
PM MAIL   Вверх
comtat
Дата 18.7.2008, 18:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
ммм .. в ie как и в firefox у меня не работает
выложи полностью скрипт без всяких 
Цитата
>> body:
 и тому подобного
или ссылку откуда качал


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
DmitryChess
Дата 18.7.2008, 18:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.7.2008

Репутация: нет
Всего: нет
<HTML>
<HEAD>
<style type="text/css">
<!--
.style1 {
     color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
-->
</style>
<script type="text/javascript">
var pos=-235; 
var jump=5; 
var speed=0.1;  
function domenu() 
{
document.getElementById('menu').style.visibility="visible"; 
if (pos<=-235) gomenu(); 
}

function gomenu()
{
document.getElementById('menu').style.left=pos+"px";
document.getElementById('menu').style.top=0+"px"; 
pos+=jump;
if (pos<0) 
{
setTimeout("gomenu()", speed);
}
}
</script>

</HEAD>
<BODY onload="do_menu()">

<div id=menu style="position:absolute; z-index:1; opacity:0.5; -khtml-opacity: 0.5; -moz-opacity:0.5; filter:alpha(Opacity=50)">
<table width=200 height=500 align="center"  cellpadding="0px" cellspacing="0px" bgcolor="#000000">
<tr> <TD width=200 valign="top"><div align="center"><br> 
        <span class="style1">Меню</span></div></TD>
</tr>
</table>
</div>
</BODY>
</HTML>
PM MAIL   Вверх
comtat
Дата 18.7.2008, 21:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
вот пожалуйте
Код

<HTML>
<HEAD>
<style type="text/css">
<!--
.style1 {
     color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}
-->
</style>
<script type="text/javascript">
var pos   = screen.width;  
var jump  = 5; 
var speed = 100;  

function domenu()  {
    document.getElementById('menu').style.left = screen.width +235; 
    document.getElementById('menu').style.visibility="visible"; 
    if (pos <= (screen.width +235)) gomenu(); 
}

function gomenu() {
    document.getElementById('menu').style.left=pos+"px";
    document.getElementById('menu').style.top=0+"px"; 
    pos -= jump;
    if (pos > screen.width - 230) {
        setTimeout("gomenu()", speed);
    }
}
</script>

</HEAD>
<BODY onload="domenu();" style="overflow:hidden;">

<div id=menu style="position:absolute; z-index:1; opacity:0.5; -khtml-opacity: 0.5; -moz-opacity:0.5; filter:alpha(opacity=50)">
<table width=200 height=500 align="rigth" cellpadding="0px" cellspacing="0px" bgcolor="#000000">
<tr>
    <td width=200 valign="top">
        <div align="center"><br /> 
         <span class="style1">Меню</span>
        </div>
    </td>
</tr>
</table>
</div>

</BODY>
</HTML> 

работает точно под ie6 и ff2. проверял на них


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
DmitryChess
Дата 18.7.2008, 22:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.7.2008

Репутация: нет
Всего: нет
Благодарю! Это отменно работает!
Жаль постов мало, приплюсовал бы к Вашей репутации единичку.

Пробовал самостоятельно подкорректировать левостороннее меню. Ошибка вероятно у меня была в том, что использовал свойство availWidth, и логический знак неверный поставил. 

А как центрировать по вертикали меню?
Так: document.getElementById('menu').style.top=(Screen.Height-MenuHeight)/2+"px" ?
PM MAIL   Вверх
comtat
Дата 19.7.2008, 01:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Цитата(DmitryChess @  18.7.2008,  22:26 Найти цитируемый пост)
А как центрировать по вертикали меню?
Так: document.getElementById('menu').style.top=(Screen.Height-MenuHeight)/2+"px" ? 

можно конечно и так, если особая точность не нужна
если же нужно ровно то в инете много способов можно найти как это сделать
либо через css либо через javascript
вот один как ПРИМЕР


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0941 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.