javascript - 使用 jquery 获得附加功能时菜单未正确对齐

Question

我需要制作一个类似于下图所示的巨型菜单

到目前为止，我已经能够在某种程度上使它在jsFiddle HERE上工作。

到目前为止，我有一些设计问题和一个功能问题。

当我尝试隐藏每个下拉菜单的默认文本时，//$(this).find(".nav-info").hide();菜单 4 和 5 不会显示在右侧。

我实际上是在尝试创建一个类似于本网站上的菜单。在这个网站上，他们还显示了我实际上不需要的父菜单的默认文本。

我修改了脚本以显示子菜单的第一个 li，它适用于父菜单一、二，但为菜单四和五产生对齐问题。

如果有人可以帮助我解决此问题，我将不胜感激...

代码

<div class="container_16">
    <div class="nav-main grid_16">
        <div class="wrap-nav-media">
            <ul id="nav-top-media">
                <!-- ONE -->
                <li class="nav-item-1"><a href="../company-overview">Parent Menu One</a>

                    <div style="display: none;" class="inner-nav-media">
                        <ul>
                            <li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a> 
                            </li>
                            <li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
                            </li>
                            <li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
                            </li>
                        </ul>
                        <div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1">    <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-1</p>
                            </div>
                        </div>
                        <div style="display: block;" class="menu-page" id="mega-sub-1-relative-2">  <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-1-relative-3">   <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-1-relative-3</p>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- TWO -->
                <li class="nav-item-2"> <a href="../capabilities">Parent Menu TWO</a>

                    <div style="display: none;" class="inner-nav-media">
                        <ul>
                            <li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
                            </li>
                            <li class=""><a class="current" href="../capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
                            </li>
                            <li class="last"><a class="current" href="../capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-1</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-2-relative-2">   <a href="../building" title="Building" rel="nofollow" class="thumb">
                                    <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-2-relative-3">   <a href="../rail" title="Rail" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-2-relative-3</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="nav-item-3"><a href="../projects">THREE</a> 
                </li>
                <li class="nav-item-4"> <a href="../-businesses">FOUR</a>

                    <div style="display: none;" class="inner-nav-media">
                        <div style="display: block; float:right;" class="menu-page nav-info">   <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                        <ul>
                            <li class="">   <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>

                            </li>
                            <li class="">   <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>

                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
                                        <img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-4-relative-2">   <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
                                        <img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
                                    </a>

                            <div>
                                <p>TEXT will be here...</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="last nav-item-5"><a href="../sustainability">FIVE</a>

                    <div style="display: none;" class="inner-nav-media">
                        <div style="display: block;" class="menu-page nav-info">    <a class="thumb" rel="nofollow" title="" href="">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>This is Default text when i try to hide this then this menu moves to left</p>
                            </div>
                        </div>
                        <ul>
                            <li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
                            </li>
                            <li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
                            </li>
                            <li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
                            </li>
                            <li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
                            </li>
                        </ul>
                        <div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="../safety.html" title="" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-3</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-2">   <a href="../environment.html" title="Environment" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-2</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-3">   <a href="../community.html" title="Community" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-3</p>
                            </div>
                        </div>
                        <div style="display: none;" class="menu-page" id="mega-sub-5-relative-4">   <a href="../quality.html" title="Quality" rel="nofollow" class="thumb">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

                            <div>
                                <p>Brief Contents will show up here sub-5-relative-4</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

更新：

当我尝试隐藏下面的 html 代码块显示时，会使用以下方法破坏菜单四和五的对齐方式$(this).find(".nav-info").hide();

<div style="display: block;" class="menu-page nav-info">    <a class="thumb" rel="nofollow" title="" href="">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

    <div>
        <p>This is Default text when i try to hide this then this menu moves to left</p>
    </div>
</div>

Answer 1

I checked the site you were referring for the example And you can achieve the same with plain CSS and few lines of jQuery. Here is my way:

HTML

<nav class="nav-wrapper">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu one</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu two</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu three</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/people/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu four</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </li> 
        <li><a href="#">Menu Two</a></li>
        <li><a href="#">Menu Three</a>
            <div class="dropdown">
                <ul>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                    <li><a href="#">sample link</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Menu Long Three</a></li>
        <li><a href="#">Menu Four &amp; Long</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu inner</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu Four &amp; Long - sub menu inner </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis magna, condimentum sit amet interdum quis, gravida accumsan risus. Donec vulputate dolor in turpis ornare, sed dictum ligula pretium. Nullam sed dolor mollis magna auctor porttitor.  Duis sem sem, pretium non lorem vitae, lacinia eleifend ligula. Aliquam ipsum erat, gravida eget hendrerit in, fermentum vel odio. Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt. </p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu two</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu three</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a></li>
                    <li><a href="#">Sub menu having long texxt</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Sub menu three consectqtero</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    <li><a href="#">Sub menu four</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

CSS

body {
    font:normal 14px Arial, Sans-serif;
}

a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}

.nav {
    width:940px;
    margin:0 auto;
}

.nav li {
    list-style:none;
    position:relative;
}

.nav > li {
    display:inline-block;
    font-size:14px;
    color:#ccc;
    background:#444;
    min-width:160px;
}

.nav > li > a {
    padding:10px 20px;
    color:#ccc;
    display:block;
    text-align:center;
}

.dropdown {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    color:#444;
    min-height:160px;
    background:#ccc;
}

.dropdown.has-panel {
    width:600px;
}

.dropdown > ul {
    width:180px;
    background:#ccc;
}

.dropdown > ul > li {
    position:static;
}

.dropdown > ul > li > a {
    font-weight:bold;
    text-transform:uppercase;
}

.dropdown-last {
    left:auto;
    right:0;
}

.dropdown-last > ul {
    float:right;
}

.dropdown li > a {
    color:#555;
    padding:10px 20px;
    border-bottom:1px solid #bbb;
    display:block;
}

.dd-panel {
    position:absolute;
    background:#ccc;
    left:180px;
    top:0;
    width:380px;
    padding:20px;
    display:none;
    bottom:0;
}

.dropdown li:first-child .dd-panel,
.dropdown li:hover .dd-panel {
    display:block;
}

.dropdown-last .dd-panel{
    left:auto;
    right:180px;
}

.dd-panel > .media {
    float:left;
    margin:3px 20px 10px 0;
    max-height:130px;
}

.media-caption {
    margin:0;
}

.dropdown li a:hover {
    color:#000;
    background:#bfbfbf;
}

.nav li:hover {
    background:#ccc;
}

.nav li:hover > a  {
    color:#444;
}
.nav li:hover .dropdown {
    display:block;
}

jQuery

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 600 > $('.nav').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
    });

    /* if dropdnw*/
    $(".dropdown").each(function(){
        var $this = $(this);
        if($this.find(".dd-panel").length > 0){
            $this.addClass('has-panel');
        }
    });
});

See it working on JSFIDDLE: http://jsfiddle.net/shekhardesigner/wPWDm/

Answer 2

@KnowledgeSeeker，您的代码很完美，但无需显示和隐藏，您只需为每个变量保留一个全局变量，例如：

    var html_4=""; 
    and 
    var html_5=""; 

对于这两个菜单，然后将您的内部 html 代码分别保存在该变量中。之后，您只需使用此代码：（对于选项卡四）

    $(this).find(".nav-info").html("");
    $(this).find(".nav-info").html(html_4);

五个也一样，只需替换其他选项卡的变量名，您需要为这些选项卡设置 html null 并始终保留此类，因为如果您删除类，您的 css 问题将出现。

Answer 3

您可以尝试http://greengeckodesign.com/menumatic/或 Nettus+ 有很好的文章：http: //nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

Answer 4

我继续并在纯CSS中实现了这一点。它依赖于特别定义的宽度和高度以及细节的绝对定位。因此弹出框不会自动调整大小以适应其内容。

细节需要背景，因为为了模拟已经显示的第一个项目，我总是显示它。其他项目，当悬停时，只是悬停在第一个项目的顶部。如果不存在背景，您将能够看到其背后的第一个项目的详细信息。

HTML：

<ul class="dropdown-mega">
    <li class="dd-mega-item">
        <a href="#">Menu 1</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item">
        <a href="#">Menu 2</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item">
        <a href="#">Menu 3</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item is-aligned-right">
        <a href="#">Menu 4</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
    <li class="dd-mega-item is-aligned-right">
        <a href="#">Menu 5</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 2</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 2</p>
                </div>
            </li>
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 3</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 3</p>
                </div>
            </li>
        </ul>
    </li>
</ul>

CSS：

.dropdown-mega, .dropdown-mega ul {
    margin: 0;
    padding: 0;
    }

    .dropdown-mega li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .dd-mega-item {
        float: left;
        position: relative;
        z-index: 10;
        }

        .dd-mega-item > a {
            background-color: #08f;
            color: #fff;
            display: block;
            height: 30px;
            line-height: 30px;
            padding: 0 40px;
            text-decoration: none;
            vertical-align: middle;
            }

        .dd-mega-item:hover > a {
            background-color: #06d;
            color: #f80;
            text-decoration: underline;
            }

        .dd-mega-item:hover > .dd-mega-sub > .dd-mega-sub-item:first-child > .dd-mega-sub-item-details {
            display: block;
            z-index: 9;
            }

        .dd-mega-sub {
            background-color: #0af;
            display: none;
            left: 0;
            height: 200px;
            position: absolute;
            top: 30px;
            width: 500px;
            z-index: 10;
            }

            .dd-mega-sub-item {
                clear: left;
                float: left;
                width: 100px;
                }

                .dd-mega-sub-item > a {
                    background-color: #0cf;
                    color: #000;
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    text-decoration: none;
                    vertical-align: middle;
                    }

                .dd-mega-sub-item:hover > a {
                    background-color: #fff;
                    text-decoration: underline;
                    }

                .dd-mega-sub-item-details {
                    background-color: #0ff;
                    display: none;
                    height: 200px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 400px;
                    z-index: 10;
                    }

                    .dd-mega-sub-item-details > img {
                        float: right;
                        }

                .dd-mega-sub-item:hover > .dd-mega-sub-item-details {
                    display: block;
                    }

        .dd-mega-item:hover > .dd-mega-sub {
            display: block;
            }

        .dd-mega-item.is-aligned-right > .dd-mega-sub {
            left: auto;
            right: 0;
            }

            .dd-mega-item.is-aligned-right > .dd-mega-sub >  .dd-mega-sub-item {
                clear: right;
                float: right;
                }

            .dd-mega-item.is-aligned-right > .dd-mega-sub >  .dd-mega-sub-item > .dd-mega-sub-item-details {
                left: 0;
                right: auto;
                }

JSFiddle在这里