Форум PHP программистов > выпадающая менюшка по клику

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: выпадающая менюшка по клику

Dunix

19.10.2011 - 06:35

Вопрос нубацкий, возможно, но я не вклиниваюсь чтот. На facebook и google+ (да и вообще ща редиз пошел гугл сайтов, на многих имеется в хидере) есть кнопка профиля к примеру. Так вот, когда на нее жмешь, выпадает менюшка, сделанная не ховерами, а как-то иначе. При помощи js или старого доброго сss? Извините, 2 ночи не спал, если кого-то мой формулировать мысль - убивать

Спустя 2 минуты, 56 секунд (19.10.2011 - 05:38) Dunix написал(а):

http://xmages.net/i/3163174
http://xmages.net/i/3163175

Спустя 5 минут, 1 секунда (19.10.2011 - 05:43) VELIK505 написал(а):

Вот вам хороший кроссбраузерный пример на CSS
http://ruseller.com/lessons/les941/demo/demo.htm

а вот его урок http://ruseller.com/lessons.php?rub=2&id=941

Спустя 42 минуты, 59 секунд (19.10.2011 - 06:26) Dunix написал(а):

Не, мне нужно чтобы именно задерживалась менюха после того как ее кликнули, я не зря написал про ховеры. Кстати, я ответ таки нашёл - используется js, а на фейсбуке пошли дальше, и тем у кого отключена обработка js в браузере, отдается вариант с hover.
Вот нашел решение на js:


<head>
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else { 
    myLayer.style.display="none";
    }
    }
    </script>
</head>
<style>
    .v-menu{border:solid 1px #7f9fbf; width:200px; clear:both;}
    ul.v-menu, v.menu li{padding:0; margin:0; list-style:none;}
    ul.v-menu{clear:both; margin-top:6px;padding:6px 10px;}
</style>
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>
</ul>

а теперь вопрос намбэр ту - как задействовать это меню с остальными элементами на сайте? В смысле как сделать так, чтобы при клике в любое другое пространство на сайте, меню сразу исчезало. А то статика получилась - кликнул, оно и висит дальше, не порядок :)

Спустя 5 часов, 5 минут, 30 секунд (19.10.2011 - 11:32) m4a1fox написал(а):

Ответ на вопрос ТУ. Тут ка бы тоже не сложно! Есть div в кот. входит весь контент! Например так


<div id="content">
....content....
</div>

А потом делаем так


$("#content").click(function(){
     $("тут наше меню").hide(1000);
});

Спустя 21 час, 18 минут, 30 секунд (20.10.2011 - 08:50) Dunix написал(а):

m4a1fox, Вы не могли бы объяснить подробнее? Я просто так и сяк пробовал, не получается

Спустя 1 час, 56 минут, 23 секунды (20.10.2011 - 10:47) m4a1fox написал(а):

Что не получается?

Спустя 4 минуты, 4 секунды (20.10.2011 - 10:51) Dunix написал(а):

я синтаксиса js не понимаю вообще, в принципе


<head>
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else { 
    myLayer.style.display="none";
    }
    }
    $("#content").click(
        function(){
        $('#menu').hide(1000);
    }
    );
    </script>
</head>
<div id="content">
<!--<a href="#" class="button" onclick="javascript:showElement('v-menu')">-->

<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<div id="menu">
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="/user/profile/">профиль</a></li>
<li><a href="/user/viewfriends/">друзья</a></li>
<li><a href="/user/saved/">избранное</a></li>
<li><a href="/login.php?op=logout&return=">выйти</a></li>
</ul>
</div>
</div>

не воркает

Спустя 1 минута, 52 секунды (20.10.2011 - 10:52) m4a1fox написал(а):

А я про js и слова не говорил!

P.S. CopyPaste - не есть хорошая практика!

Спустя 58 минут, 16 секунд (20.10.2011 - 11:51) Dunix написал(а):

я как понял это jquery?

Спустя 36 секунд (20.10.2011 - 11:51) m4a1fox написал(а):

Ну и как? Разобрался что это?

Спустя 30 секунд (20.10.2011 - 11:52) m4a1fox написал(а):

Dunix

Цитата

я как понял это jquery?

Да! Правильно понял!

Спустя 4 минуты, 31 секунда (20.10.2011 - 11:56) Dunix написал(а):

мне просто кажется неуместным использовать целую библиотеку для такой маленькой фичи

пойду искать решение дальше

Спустя 4 минуты, 40 секунд (20.10.2011 - 12:01) m4a1fox написал(а):

Dunix
Ну давай!

Удачи!

Спустя 4 часа, 23 минуты, 29 секунд (20.10.2011 - 16:24) sebastjan написал(а):

Цитата (Dunix @ 20.10.2011 - 07:51)

я синтаксиса js не понимаю вообще, в принципе


<head>
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else { 
    myLayer.style.display="none";
    }
    }
    $("#content").click(
        function(){
        $('#menu').hide(1000);
    }
    );
    </script>
</head>
<div id="content">
<!--<a href="#" class="button" onclick="javascript:showElement('v-menu')">-->

<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<div id="menu">
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="/user/profile/">профиль</a></li>
<li><a href="/user/viewfriends/">друзья</a></li>
<li><a href="/user/saved/">избранное</a></li>
<li><a href="/login.php?op=logout&return=">выйти</a></li>
</ul>
</div>
</div>

не воркает

Где ты тут увидел jquery, это яваскрипт, почитай в википедии что такое jquery.
У яваквери используеться обращение к библиотеке.

src="путь/к/jQuery.js">

Вообщето этот кусок как раз яваквери

   $("#content").click(
        function(){
        $('#menu').hide(1000);

Только не понял а где подключение к библиотеке.
В твоём варианте динамическое изменение стиля для элемента.
Действительно ,не очень то использовать огромные библиотеки для такоймаленькой функции яваскрипт.
Если хочешь типа с задержкой показ элемента ,используй функцию для яваскрипт Timeout.
Если вообще не понимаешь яваскрипт, лучше обратись и тебе за малую плату сделают.[/js][js][/js]

Спустя 1 день, 21 час, 46 минут, 11 секунд (22.10.2011 - 14:11) m4a1fox написал(а):

sebastjan
Ну как так

Цитата

Где ты тут увидел jquery, это яваскрипт, почитай в википедии что такое jquery.

И сам потом ответил

Цитата

Вообщето этот кусок как раз яваквери

$("#content").click(
function(){
$('#menu').hide(1000);

Спустя 41 минута, 34 секунды (22.10.2011 - 14:52) sebastjan написал(а):

m4a1fox
Глянул в начало ,смотрю нет подключения яквери, а редактировать сообщение лень было уже, что накнопал то и получилось

Специально выложил в разделе свой старенький пример всплывающего слоя на яваскрипт с задержкой времени, думал автор темы может глянет, суть то вопроса аналогичная.
Скриптик то - пустяковый.

Быстрый ответ:

Здесь расположена полная версия этой страницы.