Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Выезжающее меню


Автор: DmitryChess 18.7.2008, 01:10
Скажите пожалуйста, каким образом реализовать выезжающее меню с правой части экрана. Все стандартные меню - левосторонние. А как сделать с левой стороны?
Может есть примеры, решения?

Автор: comtat 18.7.2008, 02:15
ну предоставь скрипт левостороннего меню и мы вместе сделаем из его правосторонним

Автор: DmitryChess 18.7.2008, 15:54
>> 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>


Собственно говоря, меню которое выезжает у меня с левой части экрана. Помимо желания сделать из него выезжающее с правой части, хочется чтобы оно располагалось по центру относительно высоты экрана 

Автор: comtat 18.7.2008, 17:20
ты уверен что оно рабочее ?? а то у меня даже намека нет что оно работает

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

Автор: DmitryChess 18.7.2008, 17:47
Конечно работает! По крайней мере, в Опере и Эксплорере - точно!
Мозилла не установлена - не проверял...

Автор: comtat 18.7.2008, 18:02
ммм .. в ie как и в firefox у меня не работает
выложи полностью скрипт без всяких 
Цитата
>> body:
 и тому подобного
или ссылку откуда качал

Автор: DmitryChess 18.7.2008, 18:13
<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>

Автор: comtat 18.7.2008, 21:46
вот пожалуйте
Код

<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. проверял на них

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

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

А как центрировать по вертикали меню?
Так: document.getElementById('menu').style.top=(Screen.Height-MenuHeight)/2+"px" ?

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

можно конечно и так, если особая точность не нужна
если же нужно ровно то в инете много способов можно найти как это сделать
либо через css либо через javascript
вот один как http://habrahabr.ru/blog/webdev/44256.html

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)