Определите, находится ли раскрывающееся меню CSS рядом с краем браузера, и измените выравнивание - ширина жидкости - PullRequest
Новая
       5

Определите, находится ли раскрывающееся меню CSS рядом с краем браузера, и измените выравнивание - ширина жидкости

1 голос
/ 31 августа 2011

В настоящее время у меня есть чистое раскрывающееся / мега-меню CSS, которое прекрасно работает. Макет плавный (в процентах), и я также использую медиа-запросы.

Проблема, с которой я столкнулся, заключается в том, что мне нужно определить, находится ли пункт меню li рядом с краем браузера, и изменить свойство align с помощью CSS.

Я предполагаю, что мне нужно использовать jQuery для достижения этой цели, но на самом деле не знаю, как.

1 Ответ

1 голос
/ 31 августа 2011

Взгляните на это. Это, вероятно, не элегантно, но если li близко к левому или верхнему краю, оно станет розовым. Вы должны быть в состоянии завершить головоломку: 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>

<style type="text/css">
    ul{
    list-style:none;
    }
    li{
    display:inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    background-color:silver;
    }
</style>

</head>

<body>
    <ul>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
        <li></li><li></li><li></li><li></li><li></li>
    </ul>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="application/javascript">
        $(document).ready(function(){
            var items = new Array();
            var i;

            function paintPink(){
                $('ul > li').css('background-color','silver');
                for (i=1;i<=$('ul').children().length;i++){
                    if ((($('ul > li:nth-child(' + i + ')').offset().left) < 60) || (($('ul > li:nth-child(' + i + ')').offset().top) < 60)){
                        $('ul > li:nth-child(' + i + ')').css('background-color','fuchsia');
                    };
                };
            };

            $(window).load(paintPink);
            $(window).resize(paintPink);

        });
    </script>
</body>

</html>

Удачи.

...