当前位置：文江博客话题详情

检测 CSS 下拉菜单是否靠近浏览器边缘并更改对齐方式 - 流体宽度

发布于 2024-12-02 12:59:52 字数 182 浏览 4 评论 0原文

我目前有一个纯 CSS 下拉/大型菜单，效果很好。布局是流动的（基于百分比），我也使用媒体查询。

我遇到的问题是，我需要检测菜单项 li 是否靠近浏览器边缘，并使用 CSS 更改 align 属性。

我猜我需要使用 jQuery 来实现这一点，但真的不知道如何实现。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉酒的小男人 2024-12-09 12:59:52

看看这个。它可能不优雅，但如果 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>

祝你好运。

Take a look at this. It's probably not elegant, but if an li is close to the left or top it will go pink. You should be able to complete the puzzle:

<!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>

Good luck.

回复收藏 0 原文

~没有更多了~