Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2012, 22:01
Новичок на форуме
Отправить личное сообщение для damintsew Посмотреть профиль Найти все сообщения от damintsew
 
Регистрация: 09.01.2012
Сообщений: 7

Плавно выпадающее меню
Добрый вечер.
Помогите пожалуйста не могу разобраться:
Надо как-то поменять так, чтобы меню выпадали^ когда клацаешь на кнопку "Click me". А в моем примере когда клацаешь на обьет div меню открывается.

P.S. Посоветуйте пожалуйста книгу по JavaScript с примерами.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Выравнивание по центру</title>
  <style type="text/css">
   #centerLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 800px; /* Ширина слоя в пикселах */
    height: 500px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -400px; /* Отступ слева */
    margin-top: -200px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
     #topLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина слоя в пикселах */
    height: 50px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 10%; /* Положение слоя от верхнего края */
    margin-left: -400px; /* Отступ слева */
    margin-top: -000px;	/* Отступ сверху */
    background: #ec0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* */
     }

    div.menu {
        background:#ac3; margin:3px; width:80px;
        height:40px; display:none; float:left;
    }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      if ($(".menu:first").is(":hidden")) {
        $(".menu").slideDown("slow");
      } else {
        $(".menu").hide();
      }
    });

  });
  </script>

 </head>
 <body>

 <div id="topLayer">
     <p>Menu</p>

 </div>

  <div id="centerLayer">
    Будем также считать, что сила даёт большую проекцию на оси, чем газообразный 
    центр сил, что обусловлено существованием циклического интеграла у второго 
    уравнения системы уравнений малых колебаний.

        <table border="0" width="100%" cellpadding="5">
   <tr>
    <td align=center>

        Тестовая надпись!
        

    </td>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3
    <br>
        <p>Click me</p>
     <div class="menu">First</div>
        <br><br><br>
     <div class="menu">Second</div>
        <br><br><br>
     <div class="menu">Third</div>
        <br><br><br>

    </td>
    <td>Ячейка 4</td>
  </tr>


  </div>
 </body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2012, 08:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от damintsew
чтобы меню выпадали^ когда клацаешь на кнопку "Click me"
Как вариант...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Выравнивание по центру</title>
<style type="text/css">
#centerLayer {
position: absolute; /* Абсолютное позиционирование */
width: 800px; /* Ширина слоя в пикселах */
height: 500px; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
margin-left: -400px; /* Отступ слева */
margin-top: -200px;	/* Отступ сверху */
background: #fc0; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
padding: 10px; /* Поля вокруг текста */
overflow: auto; /* Добавление полосы прокрутки */ 
}
#topLayer {
position: absolute; /* Абсолютное позиционирование */
width: 300px; /* Ширина слоя в пикселах */
height: 50px; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 10%; /* Положение слоя от верхнего края */
margin-left: -400px; /* Отступ слева */
margin-top: -000px;	/* Отступ сверху */
background: #ec0; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
padding: 10px; /* Поля вокруг текста */
overflow: auto; /* */
}
div.menu {
background:#ac3; margin:3px; width:80px;
height:40px; display:none; float:left;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$('#primer').click(function () {
		if ($(".menu:first").is(":hidden")) {
			$(".menu").slideDown("slow");
		} else {
			$(".menu").hide();
		}
	});
});
</script>
</head>
<body>
<div id="topLayer">
	<p>Menu</p>
</div>
<div id="centerLayer">
	Будем также считать, что сила даёт большую проекцию на оси, чем газообразный 
	центр сил, что обусловлено существованием циклического интеграла у второго 
	уравнения системы уравнений малых колебаний.
	<table border="0" width="100%" cellpadding="5">
		<tr>
			<td align=center>
			Тестовая надпись!
			</td>
			<th>Ячейка 2</th>
		</tr>
		<tr>
			<td>Ячейка 3
				<br>
				<p id='primer'>Click me</p>
				<div class="menu">First</div>
				<br><br><br>
				<div class="menu">Second</div>
				<br><br><br>
				<div class="menu">Third</div>
				<br><br><br>
			</td>
			<td>Ячейка 4</td>
		</tr>
	</table>
</div>
</body>
</html>


ХТМЛ разметка просто ужос!
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2012, 08:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от damintsew
Посоветуйте пожалуйста книгу по JavaScript с примерами
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2012, 15:19
Новичок на форуме
Отправить личное сообщение для damintsew Посмотреть профиль Найти все сообщения от damintsew
 
Регистрация: 09.01.2012
Сообщений: 7

Спасибо большое!
Разметка взята из примера. Я учусь потихонечку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Выпадающее меню на JS (подкатегории) Trueplayer Events/DOM/Window 5 18.09.2014 22:29
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Пункти меню плавно збільшувалися при наведенні. Andry309 Javascript под браузер 3 16.05.2011 09:28
Выпадающее меню не работает в Chrome Bangoo jQuery 1 21.03.2011 20:33