Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2013, 15:20
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

Как спрятать меню?
Я хочу сделать так, чтобы в меню была кнопка, при нажатии которой вся панель меню плавно уезжала за пределы окна. И наоборот.
Это делается на Jquery?
Я только начинаю во всем этом разбираться. Подскажите, какими свойствами мне лучше воспользоваться?
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2013, 15:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Ahterknica
Это делается на Jquery?
В том числе...
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2013, 15:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Ahterknica
какими свойствами мне лучше воспользоваться?
element.style.left | element.style.right
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2013, 15:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Ahterknica
Подскажите, какими свойствами мне лучше воспользоваться?
Да хоть вот этими...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#menu {
	position: relative;
	background-color: green;
}
#menu > p {
	height: 20px;
	margin-right: 50px;
	padding: 5px;
	overflov: 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='100%';
			o=1;
		};
		$("#menu").animate({
			width: w
		});
		$("#menu > p").animate({
			opacity: o
		});
	});
});
</script>
</head>
<body>
<div id='menu'>
	<p>Это панель меню</p>
	<button>&lt;&lt;</button>
</div>
<script>
</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2013, 15:47
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

прекрасно!
попробую-ка и я так сделать..
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2013, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от ksa
overflov: hidden;
overflow
тогда и
opacity: o ненужен

Последний раз редактировалось рони, 14.02.2013 в 16:18.
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2013, 16:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от рони
тогда и
opacity: o ненужен
Это для красоты...
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2013, 16:30
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

а я вот вложила туда таблицу и при сворачивании меню все тексты из таблицы кошмарно вылезают наружу.
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2013, 16:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Ahterknica, меньше слов - больше тестовых примерофф!
Ответить с цитированием
  #10 (permalink)  
Старый 14.02.2013, 16:49
Аспирант
Отправить личное сообщение для Ahterknica Посмотреть профиль Найти все сообщения от Ahterknica
 
Регистрация: 13.02.2013
Сообщений: 59

<!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: 18%;
	height: 100%;
	text-align:center;
	z-index:5;
}
#menu > p {
    height: 20px;
    margin-right: 50px;
    padding: 5px;
    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='25%';
            o=1;
        };
        $("#menu").animate({
            width: w
        });
        $("#menu > p").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>


а как вставить то, что получается, я не знаю(
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделдать меню из двух калонок как в bestchange.ru Андрей Лебедев Элементы интерфейса 2 21.01.2013 10:32
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Подсветка того пункта меню, где мы сейчас находимся. Как? pro_xaoc Элементы интерфейса 11 24.08.2011 13:45
Как сделать выпадающее меню voloxa89 jQuery 7 20.08.2011 11:27
меню как на mail.ru - его можно скрыть и содержимое раздвинется на всю страницу ange-linka Элементы интерфейса 4 16.09.2010 12:12