jQuery menu (ищу, подскажите)

Тема в разделе "Другие языки", создана пользователем mishqa35, 31 июл 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. mishqa35

    mishqa35 Создатель

    Регистр.:
    24 мар 2008
    Сообщения:
    33
    Симпатии:
    6
    Подскажите в чем проблема, работает только одно меню, id определяется нормально, в исходнике смотрел у каждой новости есть свой id
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    
    <style type="text/css">
            .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
            .dropdown dd { position:relative; }
            .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
            .dropdown a:hover { color:#5d4617;}
            .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
            .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
            .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
            .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
            .dropdown dd ul li a { padding:5px; display:block;}
            .dropdown dd ul li a:hover { background-color:#d0c9af;}
    </style>
    
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
    	// id определяется в php файле (<input type='hidden' name='id' value='".$row['news_id']."' />)
    	var id = $('input[name=\'id\']').val(id);
    
    	$('.dropdown dt#menu_'+id+' a').click(function() {
    		$('.dropdown dd#menu_'+id+' ul').toggle();
    	});
    	$('.dropdown dd#menu_'+id+' ul li a').click(function() {
    		$('.dropdown dd#menu_'+id+' ul').hide();
    	});
    	$(document).bind('click', function(e) {
    		var $clicked = $(e.target);
    		if (! $clicked.parents().hasClass('dropdown'))
    		$('.dropdown dd#menu_'+id+' ul').hide();
    	});
    });
    </script>
    
    <title>jQuery menu</title>
    </head>
    
    <body>
        <dl id="menu_1" class="dropdown"> 
            <dt id="menu_1"><a href="#">Menu 1</a></dt> 
            <dd id="menu_1"> 
                <ul> 
                    <li><a href="#">Линка 1</a></li> 
                    <li><a href="#">Линка 2</a></li> 
                    <li><a href="#">Линка 3</a></li>
                </ul> 
            </dd> 
        </dl>
    
        <dl id="menu_2" class="dropdown"> 
            <dt id="menu_2"><a href="#">Menu 2</a></dt> 
            <dd id="menu_2"> 
                <ul> 
                    <li><a href="#">Линка 1</a></li> 
                    <li><a href="#">Линка 2</a></li> 
                    <li><a href="#">Линка 3</a></li> 
                </ul> 
            </dd> 
        </dl>
    </body>
    </html>
    Или подскажите готовый вариант, нужно что то на подобии как в dle (при клике на юзверя выпадает меню) в ipb (при клике на юзера выпадает меню) и как на булке (при клике на картинку вываливается меню), менюшек на странице много, у каждой свой id
    Интересует вариант на jQuery (только квери, другие не предлогать!). Заранее благодарен.
     
  2. qweasd1334

    qweasd1334 Читатель

    Заблокирован
    Регистр.:
    5 июл 2009
    Сообщения:
    61
    Симпатии:
    11
    http://plugins.jquery.com/project/Superfish
     
  3. mishqa35

    mishqa35 Создатель

    Регистр.:
    24 мар 2008
    Сообщения:
    33
    Симпатии:
    6
    Это далеко не то что я прошу, таких я повидал много но мне надо именно как у меня, или как я прошу.
     
  4. qweasd1334

    qweasd1334 Читатель

    Заблокирован
    Регистр.:
    5 июл 2009
    Сообщения:
    61
    Симпатии:
    11
    Ссылку на какой-нибудь ресурс можете дать, где это уже реализовано!:)
     
  5. mishqa35

    mishqa35 Создатель

    Регистр.:
    24 мар 2008
    Сообщения:
    33
    Симпатии:
    6
    Вот скриншот того что хочу.

    ps; таких меню на странице много, у каждой свой id
     

    Вложения:

    • scren-shot.PNG
      scren-shot.PNG
      Размер файла:
      21,3 КБ
      Просмотров:
      15
  6. qweasd1334

    qweasd1334 Читатель

    Заблокирован
    Регистр.:
    5 июл 2009
    Сообщения:
    61
    Симпатии:
    11
    Вот вариант немного другой:
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    
    <style type="text/css">
            .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
            .dropdown dd { position:relative; }
            .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
            .dropdown a:hover { color:#5d4617;}
            .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
            .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
            .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
            .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
            .dropdown dd ul li a { padding:5px; display:block;}
            .dropdown dd ul li a:hover { background-color:#d0c9af;}
    </style>
    
    <script language="JavaScript" type="text/javascript">
    function qwe(id){
    $('dt#menu_'+id+' a').toggle(function(){
      last = this;
      $('dd#menu_'+id+' ul').show();
      $('dd#menu_'+id+' ul li a').click(function(){
        $('dd#menu_'+id+' ul').hide();
        return last.lastToggle = 2;
      });
      return false;
    },function(){
      $('dd#menu_'+id+' ul').hide();
      return false;
    });
    }
    </script>
    
    <title>jQuery menu</title>
    </head>
    
    <body>
        <dl id="menu_1" class="dropdown"> 
            <dt id="menu_1"><a onblur="qwe(1)" onfocus="qwe(1)" href="#">Menu 1</a></dt> 
            <dd id="menu_1"> 
                <ul> 
                    <li><a href="#">Линка 1</a></li> 
                    <li><a href="#">Линка 2</a></li> 
                    <li><a href="#">Линка 3</a></li>
                </ul> 
            </dd> 
        </dl>
    
        <dl id="menu_2" class="dropdown"> 
            <dt id="menu_2"><a onblur="qwe(2)" onfocus="qwe(2)" href="#">Menu 2</a></dt> 
            <dd id="menu_2"> 
                <ul> 
                    <li><a href="#">Линка 1</a></li> 
                    <li><a href="#">Линка 2</a></li> 
                    <li><a href="#">Линка 3</a></li> 
                </ul> 
            </dd> 
        </dl>
    </body>
    </html>
    
     
  7. mishqa35

    mishqa35 Создатель

    Регистр.:
    24 мар 2008
    Сообщения:
    33
    Симпатии:
    6
    работает, но еще надо чтобы меню появлялось после клика(1 клика) по ссылке, и чтобы если кликнешь на любое место на странице оно закрывалось, еще бы неплохо сделать чтобы оно закрывалось если человек не водит мышкой по меню более 10 секунд. Спасиб за ранее;)
     
Статус темы:
Закрыта.