Форма поиска в выпадающем меню...
Здравствуйте! Вообщем такая проблема, моя форма поиска находится в выпадающем меню которое всплывает при наведении:
Код:
<li class="top_menu">Нужно сделать так чтобы при нажатии на форму меню фиксировалась, и убиралось только после клика вне. Каким js скриптом это можно сделать? Все обыскал на эту тему ничего не нашел, может есть какой-то пример? Надеюсь на вашу помощь. :help: |
<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, вкладывать активный элемент в другой активный элемент - это очень плохая идея. Как тебе вобще такое в голову приперло. Тыб еще кнопку в кнопку запихал :haha:
|
Спасибо огромное! :)
|
Deff, первый вариант вообще не работает, я же тебе говорил. Убери его, не позорься :)
|
| Часовой пояс GMT +3, время: 13:59. |