Выпадающая кнопка по типу facebook'a

Если Вы совсем новичок и слабо представляете себе возможности jQuery, не можете понять в каком форуме задать свой вопрос - Вам сюда.

Модераторы: TRAHOMOTO, tuareg, Gennady

Выпадающая кнопка по типу facebook'a

Сообщение Santiago » 11 мар 2011, 20:15

Вот принялся сделать выпадающую кнопку, подобно как на facebook'е “Account”. Это первый мой опыт, и как следовало ожидать, столкнулся с рядом проблем. Надеюсь на Вашу помощь!
Проблемы:
- Не могу избавиться от выделения на кнопке после клика мыши т.е. отменить a:hover, именно этой кнопки, после клика
- Установить другой цвет шрифта после клика мыши
- Чтобы меню закрывалось после клика мыши вне области подменю.
- Убрать странные явления в explorer'е (после нажатия на кнопку вместе с подменю «тянется» header)
- и можно как-нибудь объединить кнопку и подъменю?! (я думаю, что мой вариант с применением “margin” не самый лучший)
- и как сделать окантовку всего этого блока, как в facebook'e?


Вот мои скрипты:

HTML:
Код: выделить все
<ul id="navigation">
    <li><a href="profile.php">Profile</a></li>
    <li><a href="">Messages</a></li>
    <li><a href="search.php">Search</a></li>
    <li><a href="" class="menu_head">Settings</a></li>
        <ul class="menu_body">
            <div class="settingsChange">You can change your:</div>
            <li><a href="settings_personal.php">Personal</a></li>
            <li><a href="settings_photo.php">Photo</a></li>
            <li><a href="settings_password.php">Password</a></li>
            <li><a href="settings_email.php">E-mail</a></li>
        </ul>
  </ul>


jQuery:
Код: выделить все
$(document).ready(function () {
    $('.menu_head').click(function(){
   $('.menu_head').toggleClass('menuHeadWhite');
    $('.menu_body').toggle();
    return false
    });
    });


CSS:
Код: выделить все
#navigation {
   text-align: right; 
   font-weight: bold;
   font-size: small;
   float:right;
   width:auto;
   margin: 18px 130px 0 0;
   height:30px;
}
#navigation li {
   line-height: 30px;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   display: inline;
   list-style-type: none;
}
#navigation a {
   color: #FFF;
   text-decoration: none;
   letter-spacing: 1px;
   padding:10px;
}
#navigation a:hover  {
   background-color:#5959b0;
    outline-style: none;
    outline-width: medium;
   }
ul, li{
   margin-top:2px;
   padding:0;
   list-style:none;
}
.menu_body {
   margin-left:167px;
   text-align:left;
   background: #FFF;
   display:none;
   width:144px;
   border-right:1px solid #998675;
   border-bottom:1px solid #998675;
   border-left:1px solid #998675;
}
#navigation .menu_body li {
   line-height: 5px;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
}
#navigation .menu_body a{
   color:#66c;
   text-decoration:none;
   padding:10px;
   display:block;
}
#navigation .menu_body a:hover  {
   color:#FFF;
   background-color: #66c;
    outline-style: none;
    outline-width: medium;
}
.menuHeadWhite {
   background-color: #FFF;
   }
.settingsChange {
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   color:#999999;
   padding:10px;
   width:auto;
   }
Вложения
letter_04 facebook.jpg
То чего хочу добиться
letter_04 facebook.jpg (82.34 KIB) Просмотров: 1514
letter_02.jpg
Проблема
letter_02.jpg (52.62 KIB) Просмотров: 1514
letter_01.jpg
Проблема
letter_01.jpg (55 KIB) Просмотров: 1514
Santiago
 
Сообщений: 11
Зарегистрирован: 11 мар 2011, 02:47

Re: Выпадающая кнопка по типу facebook'a

Сообщение Gennady » 11 мар 2011, 22:57

Santiago писал(а):Проблемы:
- Не могу избавиться от выделения на кнопке после клика мыши т.е. отменить a:hover, именно этой кнопки, после клика
- Установить другой цвет шрифта после клика мыши
- Чтобы меню закрывалось после клика мыши вне области подменю.
- Убрать странные явления в explorer'е (после нажатия на кнопку вместе с подменю «тянется» header)
- и можно как-нибудь объединить кнопку и подъменю?! (я думаю, что мой вариант с применением “margin” не самый лучший)
- и как сделать окантовку всего этого блока, как в facebook'e?

Вопросов немало.... Но они несколько размыты. Поясню. Допустим
Santiago писал(а):- Установить другой цвет шрифта после клика мыши

Как именно делаете, и что именно не получается? Т..е. чтобы получить конкретный ответ - нужен конкретный вопрос...


А пока (если хотите), то, что я заметил по кодам...
- по HTML: семантически неверно вкладывать div (и еще ul кстати тоже) непосредственно в элемент ul (вот если внутрь li - то другое дело).
- по JS: Вы связываете обработчика клика по элементам, имеющим класс menu_head, а внутри обработчика вновь создаете такой же набор. Это ошибочное действие - Вы же хотите вызвать обработчик именно для "кликнутого" элемента. Поэтому в обработчике не $(".menu_head"), а $(this) - тогда будет счастье :D
- ну, в CSS не полезу.... хотя странные явления в explorer - это скорее всего из этой области.
И напоследок: чтобы меню закрывалось после клика мыши вне области подменю - почитайте и разберите Как связать событие со всеми элементами, исключая один?
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: Выпадающая кнопка по типу facebook'a

Сообщение Santiago » 12 мар 2011, 00:26

Спасибо за замечания, поясню свои проблемы...
- по HTML: семантически неверно вкладывать div (и еще ul кстати тоже) непосредственно в элемент ul (вот если внутрь li - то другое дело).

- а к чему это может привести?
- а если не так, то как тогда построить html код?

- Установить другой цвет шрифта после клика мыши
Тут то и сама проблема, что я не знаю как именно это сделать. Сначала, я пытался сделать класс, который бы он (jQuery) добавлял при клике и в нем указать "color", но так не получается. Я искал и нигде не смог найти решения этой проблемы. Очень надеюсь, что поможете. Какие тут есть способы...

- Не могу избавиться от выделения на кнопке после клика мыши т.е. отменить a:hover, именно этой кнопки, после клика
[i]Тут тоже такая же проблема... пытался все привязать на класс. Но так же не получается, как именно и через что сделать это не могу понять... какие могут быть вообще варианты, хоть один


- и можно как-нибудь объединить кнопку и подъменю?! (я думаю, что мой вариант с применением “margin” не самый лучший)
Я имел ввиду, что может быть как-то объединяют кнопку и выпадающий список, чтобы он во всех браузерах отображался одинаково, без смещений.
Пытался всячески объединить в class и div'ы переставало все работать.


Пожалуйста, помогите с решение этой задачи, только вы откликнулись.
Santiago
 
Сообщений: 11
Зарегистрирован: 11 мар 2011, 02:47

Re: Выпадающая кнопка по типу facebook'a

Сообщение Gennady » 12 мар 2011, 12:27

- а если не так, то как тогда построить html код?

http://htmlbook.ru/html/ul

- Установить другой цвет шрифта после клика мыши

С помощью методов .toggle() и .css()
Код: выделить все
<!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" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.red { color:#f00; }
.green { color:#0f0; }
.blue { color:#00f; }
</style>
<script type="text/javascript">
$(function(){
   $("p").toggle(
      function(){ $(this).css("color", "#f00"); },
      function(){ $(this).css("color", "#0f0"); },
      function(){ $(this).css("color", "#00f"); }
   );
});
</script>
</head>
<body>
<p>Текст, у которого при клике на нем будем меняться цвет.</p>
</body>
</html>


С помощью .toggleClass
Код: выделить все
<!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" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.red { color:#f00; }
.green { color:#0f0; }
.blue { color:#00f; }
</style>
<script type="text/javascript">
$(function(){
    $("p").click(function(){
       $(this).toggleClass("red");
    });
});
</script>
</head>
<body>
<p>Текст, у которого при клике на нем будем меняться цвет.</p>
</body>
</html>


- Не могу избавиться от выделения на кнопке после клика мыши т.е. отменить a:hover, именно этой кнопки, после клика

Наверное тут имеется ввиду пунктирная рамка, которая остается после клика? Тогда это чистый css - outline:none;

- и можно как-нибудь объединить кнопку и подъменю?! (я думаю, что мой вариант с применением “margin” не самый лучший)
Я имел ввиду, что может быть как-то объединяют кнопку и выпадающий список, чтобы он во всех браузерах отображался одинаково, без смещений.
Пытался всячески объединить в class и div'ы переставало все работать.

Это уже точно не на форум jQuery - это в учебники HTML и CSS.
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: Выпадающая кнопка по типу facebook'a

Сообщение Santiago » 12 мар 2011, 19:27

Спасибо большое за помощь и уделенное время!
Santiago
 
Сообщений: 11
Зарегистрирован: 11 мар 2011, 02:47


Вернуться в Вопросы от совсем новичков

Кто сейчас на форуме

Сейчас этот форум просматривают: Yandex и гости: 6