Javascript.RU

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

Форма поиска в выпадающем меню...
Здравствуйте! Вообщем такая проблема, моя форма поиска находится в выпадающем меню которое всплывает при наведении:

Код:
<li class="top_menu">
		<a href="#">Search</a>
		<ul>
<li class=""><form ......</form></li> 
</ul>
Вовремя ввода в форму если убрать курсор, меню сворачивается.
Нужно сделать так чтобы при нажатии на форму меню фиксировалась, и убиралось только после клика вне.

Каким js скриптом это можно сделать?
Все обыскал на эту тему ничего не нашел, может есть какой-то пример? Надеюсь на вашу помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2013, 20:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

<style>
 .top_menu a{
  display:block;
}
 .top_menu a>ul{
  display:none;
}
 .top_menu:hover  a>ul{
  display:block;
}
 .top_menu a ul.active {
  display:block!important;
}
.top_menu a {
  display:block;
  text-decoration:none;
}
  .top_menu form {
   color:#000;
}
</style>

<li class="top_menu" onclick="return false">
	<a href="#" onclick="return false"><u>Search</u>
		<ul>
		      <form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
		</ul>
	</a>
</li>
<script type="text/javascript">
  $(".top_menu *").focus (function() {
     $(".top_menu ul:first").addClass('active')
  }).blur(function() { 
     $(".top_menu ul:first").removeClass('active')
  });
</script>


Имхо вкуснее иная логика: Открывает - закрывает клик по "Search"
Закрывает так же клик вне формы

<!DOCTYPE HTML>
<html>
  <head> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
 .top_menu {
    display:inline-block;
  border:red solid 1px;
}
 .top_menu >ul{
  display:none;
}
 .top_menu ul.active {
  display:block!important;
}
</style>
</head>

<body style="min-height:200px;">

<li class="top_menu" onclick="return false">
	<a class="aForm" href="#" onclick="return false">Search</a>
		<ul>
		      <form ......><label> </label><input type="text"> <input type="submit" value="Искать!"></form>
		</ul>
	
</li>

<script type="text/javascript">
  $(".top_menu a:first").click(function() {
     $(".top_menu ul:first").toggleClass('active');
  });

  $(".top_menu").click(function() {
     return false;
  });

  $("body").click(function() {
     $(".top_menu ul:first").removeClass("active");
  });
</script>


  </body>
</html>

Последний раз редактировалось Deff, 21.02.2013 в 02:38.
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2013, 20:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Deff, вкладывать активный элемент в другой активный элемент - это очень плохая идея. Как тебе вобще такое в голову приперло. Тыб еще кнопку в кнопку запихал
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2013, 21:13
ssg ssg вне форума
Новичок на форуме
Отправить личное сообщение для ssg Посмотреть профиль Найти все сообщения от ssg
 
Регистрация: 20.02.2013
Сообщений: 2

Спасибо огромное!
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2013, 21:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Deff, первый вариант вообще не работает, я же тебе говорил. Убери его, не позорься
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Форма поиска Владимир Новицкий Элементы интерфейса 5 14.11.2010 00:52
Программа Sothink DHTML. Проблема с выпадающем меню в Opere и Мозила. wertor Javascript под браузер 1 27.01.2010 17:19
меню и форма Лесной_Белк Элементы интерфейса 3 21.05.2009 17:37
Форма поиска Владимир Новицкий Элементы интерфейса 4 21.01.2009 02:32