那些遇到过的问题

使用jquery获取其他功能时菜单无法正确对齐

Lea*_*ing 4 html javascript css jquery

我需要制作一个类似于下图中显示的大型菜单 在此输入图像描述

到目前为止,我已经能够在某种程度上使jsFiddle在这里工作.

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

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

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

我修改了脚本以显示它为父菜单ONE,TWO找到的子菜单的第一个li但是为MENU FOUR和FIVE创建了对齐问题.

如果有人可以帮我解决这个问题,我将不胜感激......

码

<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>
Run Code Online (Sandbox Code Playgroud)

更新:

当我试图隐藏下面的html代码块显示时,它会破坏MENU FOUR&FIVE的对齐方式 $(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>
Run Code Online (Sandbox Code Playgroud)

She*_*rma 6

我检查了你所引用的网站示例你可以用简单的CSS和几行jQuery实现相同的功能.这是我的方式:

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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

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');
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

看看它在JSFIDDLE上工作:http://jsfiddle.net/shekhardesigner/wPWDm/

归档时间：

查看次数：

702 次

最近记录：

12 年，8 月 前
相关归档
找到相对于元素的鼠标位置 202
document.addEventListener和window.addEventListener之间的区别？ 117
LESS中的直接子选择器 109
React-router v6：获取当前路由的路径模式 100
有没有一种方法将JavaScript对象附加到HTML元素？ 94
如何使用axios发送授权标头 74
如何获取iframe的当前位置？ 46
从background-size:cover/contains中检索计算值 31
Haml - 如何强制标记属性仅使用双引号,如何按照我想要的方式命令标记属性？ 18
跟踪Google Analytics中的所有出站链接 17
难疑归档
JavaScript闭包如何工作？ 7644
你如何获得JavaScript的时间戳？ 3844
如何从列表列表中制作一个平面列表？ 2950
Bash中的Echo newline打印文字\n 2171
为什么Python 3中的"1000000000000000在范围内(1000000000000001)"如此之快？ 1890
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
我怎样才能找到带有Mathematica的Waldo？ 1538
检查Bash shell脚本中是否存在输入参数 1223
如何在同一元素上组合背景图像和CSS3渐变？ 1203
如何重置MySQL中的AUTO_INCREMENT？ 1174