Javascript-форум - Как спрятать меню?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как спрятать меню? (https://javascript.ru/forum/dom-window/35554-kak-spryatat-menyu.html)

и еще при перезагрузке страницы при нажатии кнопки в первый раз, все меню уезжает вправо, но там я разберусь.

Цитата:

Сообщение от Ahterknica

в первый раз, все меню уезжает вправо

кнопка должна иметь << а не брбр и таблице забайте стиль overflow: hidden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#menu {
    position: relative;
	background-image:url(paper74.jpg);
	width: 30%;
	height: 100%;
	text-align:center;
	z-index:5;
}
#menu > table {
    width: 30%
    overflow: hidden;
}
#menu > button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
    $('#menu > button').click(function (){
        var o=$(this);
        var w,o;
        if (o.text()=='<<') {
            o.text('>>');
            w='30px';
            o=0;
        } else {
            o.text('<<');
            w='30%';
            o=1;
        };
        $("#menu").animate({
            width: w
        });
        $("#menu > table").animate({
			opacity: o

        });
    });
});
</script>
</head>
<body>
<div id='menu'>
<table width="100%" border="0" cellpadding="0">
  <tr>
    <td>Программы</td>
  </tr>
  <tr>
    <td>Фотографии</td>
  </tr>
  <tr>
    <td>Отзывы</td>
  </tr>
  <tr>
    <td>Инструктора</td>
  </tr>
  <tr>
    <td>Заказать программу</td>
  </tr>
</table>


    <button><<</button>
</div>
<script>
</script>
</body>
</html>

Подключаешь jquery и не паришься. Вот так примерно.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div>
<table id="menu" width="100%" border="0" cellpadding="0" style="display: block">
  <tr>
    <td>Программы</td>
  </tr>
  <tr>
    <td>Фотографии</td>
  </tr>
  <tr>
    <td>Отзывы</td>
  </tr>
  <tr>
    <td>Инструктора</td>
  </tr>
  <tr>
    <td>Заказать программу</td>
  </tr>
</table>


    <button onClick="$('#menu').css ('display', ($('#menu').css ('display') == 'block')? 'none' : 'block');">Кнопко</button>
</div>
<script>
</script>
</body>
</html>

Вот он, срыватель покровов. Мы ждали тебя! Теперь взгляни на своё .. кхм..

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div>
<table id="menu" width="100%" border="0" cellpadding="0" style="display: block">
  <tr>
    <td>Программы</td>
  </tr>
  <tr>
    <td>Фотографии</td>
  </tr>
  <tr>
    <td>Отзывы</td>
  </tr>
  <tr>
    <td>Инструктора</td>
  </tr>
  <tr>
    <td>Заказать программу</td>
  </tr>
</table>


    <button onClick="$('#menu').css ('display', ($('#menu').css ('display') == 'block')? 'none' : 'block');">Кнопко</button>
</div>
<script>
</script>
</body>
</html>

а можно задать направление, куда меню поедет не с помощью стрелочек, а с помощью какого-нибудь значения, которое визуально не выводится?

.. я не слишком много прошу? а то мне уже, честно сказать, неловко.

Ahterknica,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#menu {
    position: relative;
	background-image:url(paper74.jpg);
	width: 30%;
	height: 100%;
	text-align:center;
	z-index:5;
}
#menu > table {
    width: 30%
    overflow: hidden;
}
#menu > button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
  var n = 1;
 $('#menu > button').click(function (){
        var o=$(this);
        var w,o;
        if (n == 1) {
            n ^= 1
            w='30px';
            o=0;
        } else {
            n ^= 1
            w='30%';
            o=1;
        };
        $("#menu").animate({
            width: w
        });
        $("#menu > table").animate({
			opacity: o

        });
    });
});
</script>
</head>
<body>
<div id='menu'>
<table width="100%" border="0" cellpadding="0">
  <tr>
    <td>Программы</td>
  </tr>
  <tr>
    <td>Фотографии</td>
  </tr>
  <tr>
    <td>Отзывы</td>
  </tr>
  <tr>
    <td>Инструктора</td>
  </tr>
  <tr>
    <td>Заказать программу</td>
  </tr>
</table>


    <button>ggggg</button>
</div>
<script>
</script>
</body>
</html>

Рони - вы мой герой.

Цитата:

Сообщение от Ahterknica

мне уже, честно сказать, неловко

Заплати деньги и чувство неловкости испарится!

Цитата:

Сообщение от danik.js

Вот он, срыватель покровов. Мы ждали тебя! Теперь взгляни на своё .. кхм..

И? У меня работает себе спокойно.

Upd. Приношу извинения. Привык, что мне всё затачивать под IE надо. В нём работает, а Хром отказывается.