我想在jQuery和css中为我的菜单项添加一个子元素

Question

我用jQuery和CSS创建了一个菜单项.当我转到一个菜单项时,我想去另一个子菜单项,如下图所示.我怎样才能做到这一点？

这是我的html标记

<link rel="stylesheet" href="css/style_j.css" type="text/css" media="screen"/>
    <div class="content">
        <ul id="sdt_menu" class="sdt_menu">
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/2.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Home</span>
                        <span class="sdt_descr">Home</span>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">File Managements</span>
                        <span class="sdt_descr">File Managements</span>
                    </span>
                </a>
            <div class="sdt_box">
                        <a href="#"><img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Retention</span>
                        <span class="sdt_descr">Retention</span>
                    </span> </a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>
                    <div class="sdt_box">

                        <a href="#">Retentionss </a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>

                </div> 
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Portfolio</span>
                        <span class="sdt_descr">My work</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Websites</a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Portfolio</span>
                        <span class="sdt_descr">My work</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Websites</a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Portfolio</span>
                        <span class="sdt_descr">My work</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Websites</a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>
                </div>
            </li>
        <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Portfolio</span>
                        <span class="sdt_descr">My work</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Websites</a>
                        <a href="#">Illustrations</a>
                        <a href="#">Photography</a>
                </div>
            </li>
            <li>
                <a href="#">
                    <img src="SlideDownBoxMenu2/images/6.jpg" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">Projects</span>
                        <span class="sdt_descr">I like to code</span>
                    </span>
                </a>
                <div class="sdt_box">
                    <a href="#">Job Board Website</a>
                    <a href="#">Shopping Cart</a>
                    <a href="#">Interactive Maps</a>
                </div>
            </li>
        </ul>
    </div>
<div>
    <span class="reference">

    </span>
    </div>

这是我的CSS:

ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;

}
ul.sdt_menu li{
    float:left;
    width:138px;
    height:40px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:138px;
    height:57px;
    z-index:12;

    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:57px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:20px;
    left:0px;
    width:138px;
    height:57px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:57px;
    width:138px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:10px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
    margin-top:-10px;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:14px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:0px;
    margin-top:0px;
    margin-left:-8px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:138px;
    overflow:hidden;
    height:138px;
    top:57px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

这是我的jQuery代码:

   <!-- The JavaScript -->

        <script type="text/javascript">
            $(function() {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#sdt_menu > li').bind('mouseenter',function(){
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'138px',
                            'height':'57px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'138px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '138px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-138px';
                            $sub_menu.show().animate({'left':left},200);
                        }   
                    });
                }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');

                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });
        </script>

Answer 1

我建议继续使用无序列表，就像您对顶级导航项目所做的那样。当你的地位下降时，没有理由切换它；它只会使你的代码变得复杂。如果您确实想保留现在拥有的内容，我建议（我将使用“我的工作”>“网站”作为示例，如图所示）将链接放入某种容器中，然后将最初也隐藏在该容器中的子菜单。这样，当单击链接或将鼠标悬停在其上时，您可以轻松定位子菜单，如下所示：

<!-- just a snippet -->
            <span class="sdt_descr">My work</span>
        </span>
    </a>
    <div class="sdt_box">
        <div class="nameThisSomethingMeaningful">
            <href="#">Websites</a>
            <div class="hiddenSubmenu">
                <a href="amazingthingImade.com">Amazing Website</a>
                <!-- more links here -->
            </div>
        <div>
        <div class="nameThisSomethingMeaningful">
            <a href="#">Illustrations</a>
            <div class="hiddenSubmenu">
                <a href="mysite.com/illustration/client1">Client Work 1</a>
                <!-- more links here -->
            </div>
       <div>
<!-- etc. etc. -->

<!-- now the JS -->
<script>
$(document).ready(function(){
  $(".sdt_box a").on("click", function(){ // feel free to use mouseenter or mouseleave, or w/e
    $(this).parent().find(".hiddenSubmenu").fadeIn();
  });
});
</script>

但就像我说的，如果您对导航的每个级别都一视同仁，那么您将来的生活可能会变得更加简单。您已经在使用 <li> 作为您的顶级导航；我会继续这样，因为它们有一个自然的层次结构，你不必搞乱所有 .parent()/.find()/.child()/etc DOM 遍历。我的做法如下：

  <nav>
    <ul>
      <li><a href="#">Portfolio</a>
        <ul class="subMenu">
          <li><a href="#">Websites</a>
            <ul class="subSubMenu">
              <li><a href="...">Client 1</a></li>
              <li><a href="...">Client 2</a></li>
              <li><a href="...">Client 3</a></li>
            </ul>
          </li>
          <li><a href="#">Illustration</a>
            <ul class="subSubMenu">
              <li><a href="...">Client 1</a></li>
              <li><a href="...">Client 2</a></li>
              <li><a href="...">Client 3</a></li>
            </ul>
          </li>
        </ul>
      </li>    
      <li><a href="#">Some Other Menu</a>
        <ul class="subMenu">
          <li><a href="#">Some Other Submenu</a>
            <ul class="subSubMenu">
              <li><a href="...">Client 1</a></li>
              <li><a href="...">Client 2</a></li>
              <li><a href="...">Client 3</a></li>
              <!--etc.-->
            </ul>
          </li>
          <li><a href="#">Single item, no submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>

您基本上将使用与我上面编写的非常相似（如果不相同）的 Javascript，并让 CSS 完成所有放置。这里重要的部分是使用相对和绝对定位来直观地传达现有的层次结构。

看来您了解 CSS 的方式，但为了完成起见，这是（非常粗略的快速版本）我如何复制您拥有的布局，以及浮动到相关项目右侧的第三级子菜单（本例中的网站）：

/* basic boilerplate stuff */
* {  box-sizing: border-box;
  margin: 0px; padding: 0px;
  font-family: Helvetica, Arial, sans-serif;
}
a {
  color: #aaa;
  font-weight: 600;
  transition-duration: .3s;
  text-decoration: none;
}
/* end of boilerplate */

nav li {
  transition-duration: .3s;
  list-style-type: none; /*get rid of bullets*/
}

nav > ul > li {
  display: inline; /* top-level menu, lay out horizontally */
  position: relative;
}

nav > ul > li > a {
  display: inline-block;
  
  width: 180px;
  height: 80px;

  text-align: center;
  padding-top: 30px;
  background-color: #333;
}

.subMenu > li, .subSubMenu > li { 
  border-bottom: 1px solid #333;
  position: relative;
}
.subMenu > li a, .subSubMenu > li a {
  padding: .5em .75em;
}

.subMenu, .subSubMenu {
  display: none; /* hidden until hover/click (JS) */
  position: absolute; /* also absolutely essential for position under parent item */
  
  width: 300px;
}
nav li:hover {
  background-color: royalblue;
}
.subMenu {
  top: 50px;
  left: 0px;
  
  background-color: #777;
}
.subSubMenu {
  left: 100%;
  top: 0px;
  background-color: #cdcdcd;
}
.subSubMenu a {
  color: #555;
}
nav li.hasSub:after {
  content: '\25ba';
  color: #000;
  position: absolute;
  right: .5em;
  top: auto;
  bottom: auto;
}

这是源代码，比上面的快速示例具有更完整的 JS，使用 mouseenter 和 mouseleave 而不是单击： https: //replit.com/@GordonZed/Quik-n-Dirty-List-Nav ?v=1

只需点击右上角的“查看代码”即可。