Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   выпадающее меню (https://javascript.ru/forum/jquery/20589-vypadayushhee-menyu.html)

Денис2201 10.08.2011 16:00

выпадающее меню
 
Есть следующий скрипт выпадающего меню:
$(document).ready(function () {
				
			$('#megamenu li').hover(
				function () {
				//показать подменю
			$('#level', this).slideDown(0);
				
				},
				function () {
				//скрыть подменю
				$('.level', this).slideUp(0);
				}
				);
				
		});


Как сделать, что бы выпадающий список был всегда в пределах экрана.
В связи с тем, что некоторые пункты меню находятся очень близко к правому краю экрана, то при раскрытии списка меню, часть просто скрывается за пределами экрана.

Заранее спасибо.

devote 10.08.2011 16:23

выяснить их ширину и сдвинуть на нужное значение, единственное есть НО это то что выяснить их ширину в момент когда они скрыты не реально, поэтому нужно временно его отобразить измерить скрыть

$(document).ready(function () { 
    $('#megamenu li').hover( 
        function () {
           var el = $('#level', this).show();
           if (el[0].offsetLeft > ( document.body.offsetWidth - el[0].offsetWidth) ) {
               el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");
           }
            //показать подменю 
           el.hide().slideDown(0); 
        }, 
        function () { 
            //скрыть подменю 
           $('.level', this).slideUp(0); 
        }
      ); 
});

Денис2201 10.08.2011 16:40

ругается на не закрытую скобку в условии, но вроде проверил все в порядке. Может я слепой?

Денис2201 10.08.2011 17:04

Цитата:

Сообщение от devote (Сообщение 119534)
выяснить их ширину и сдвинуть на нужное значение, единственное есть НО это то что выяснить их ширину в момент когда они скрыты не реально, поэтому нужно временно его отобразить измерить скрыть

$(document).ready(function () { 
    $('#megamenu li').hover( 
        function () {
           var el = $('#level', this).show();
           if (el[0].offsetLeft > ( document.body.offsetWidth - el[0].offsetWidth) ) {
               el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");
           }
            //показать подменю 
           el.hide().slideDown(0); 
        }, 
        function () { 
            //скрыть подменю 
           $('.level', this).slideUp(0); 
        }
      ); 
});

Когда я скрипт ставлю в xsl шаблон, то он в условии знак > меняет на > и считает, что после > идет конец условия.
Подскажите пожалуйста, как решить данную проблему?

devote 11.08.2011 04:31

$(document).ready(function () {  
    $('#megamenu li').hover(  
        function () { 
           var el = $('#level', this).show(); 
           if ( Math.max(0, el[0].offsetLeft - ( document.body.offsetWidth - el[0].offsetWidth ) ) != 0 ) { 
               el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px"); 
           } 
            //показать подменю  
           el.hide().slideDown(0);  
        },  
        function () {  
            //скрыть подменю  
           $('.level', this).slideUp(0);  
        } 
      );  
});

Денис2201 11.08.2011 10:16

devote, спасибо.
С той ошибкой справились, но теперь выскакивает другая ошибка, теперь на двоеточие в этой стоке
el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");


Ошибка следующего вида: missing ) after argument list

devote 11.08.2011 10:17

Это я ошибку сделал:
el.css("left", (document.body.offsetWidth - el[0].offsetWidth) + "px");

Денис2201 11.08.2011 10:23

devote, огромное спасибо!!!!
Все заработало. А вы не подскажете можно ли регулировать отступом?
Например если я захочу, что бы выпадающая часть была не в плотную к краю экрана, а был отступ от края экрана в n-ое количество пикселей?

devote 11.08.2011 10:25

el.css("left", ((document.body.offsetWidth - el[0].offsetWidth) - 100) + "px");

Денис2201 11.08.2011 10:32

Еще раз Спасибо)


Часовой пояс GMT +3, время: 00:42.