结构&菜单中FadeItems的设计 [英] Structure & Design of FadeItems in a menu

问题描述

HTML：

 < script src =https：//ajax.googleapis。 COM / AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本> 
< div class =navigation_desktop> 
 
< div class =button_desktop_01> 1.0主菜单
< div class =FadeItem_01> 
< ul> 
< li> 1.1子菜单< / li> 
< li class =button_desktop_02> 1.2子菜单
< div class =FadeItem_02> 
< ul> 
< li> 1.2.1子菜单< / li> 
< li> 1.2.2子菜单< / li> 
< / ul> 
< / div> 
< / li> 
< / ul> 
< / div> 
< / div> 
 
< div class =button_desktop_01> 2.0主菜单
< div class =FadeItem_01> 
< ul> 
< li class =button_desktop_02> 2.1子菜单
< div class =FadeItem_02> 
< ul> 
< li> 2.1.1子菜单< / li> 
< li> 2.1.2子菜单< / li> 
< li> 2.1.3子菜单< / li> 
< / ul> 
< / div> 
< / li> 
< li> 2.2子菜单< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .button_desktop_01 {
 float：left; 
职位：亲属; 
 padding-left：1％; 
填充权：1％; 
光标：指针; 
} 
 
 .button_desktop_02 {
 float：left; 
职位：亲属; 
 padding-left：1％; 
填充权：1％; 
光标：指针; 
} 
 
 .FadeItem_01，.FadeItem_02 {
 display：none 
} 
 
 .FadeItem_02 {
 position：absolute;剩余
：100％; 
 top：0; 
 width：130px; 
} 
 
 ul {
 margin：0; 
 list-style：none; 
 padding：0; 
} 
  

jQuery：

  $（document）.ready（function（）{
 $（。button_desktop_01，.button_desktop_02）。 （）。fadeIn（500）; 
}）; 
 $（。button_desktop_01，.button_desktop_02）。mouseleave（function（ ）{
 $（this）.children（。FadeItem_01，.FadeItem_02）。fadeOut（500）; 
}）; 
}）; 
  

上面的代码 FadeIn / Out 一些菜单。 < div class =FadeItem_02> 下的项目紧挨着< div class =FadeItem_01 > 。到目前为止，所有这些工作都是完美的。

我现在想要达到< div class =FadeItem_02> 与 button_desktop_01 （1.0主菜单）或 button_desktop_02 （2.0主菜单）。

现在它们看起来非常接近< div class =FadeItem_01> 这看起来并不专业。

为了达到这个目的，我必须在CSS中做些什么？ / p>

您也可以在这里找到代码： https：/ /jsfiddle.net/gng5dcLc/4/

解决方案

在这里，您可以使用解决方案 https://jsfiddle.net/gng5dcLc/6/

  .FadeItem_02 {
 position：absolute; 
剩下：110％; 
 top：0; 
 width：130px; 
 
 $ / code> 

由于您使用的是 left CSS ，这就是为什么我将 left 更新为* 110％**为 100％

希望这会对您有所帮助。

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation_desktop">

    <div class="button_desktop_01">1.0 Main Menu
        <div class="FadeItem_01">
            <ul>
                <li>1.1 Sub Menu </li>
                <li class="button_desktop_02">1.2 Sub Menu
                    <div class="FadeItem_02">
                        <ul>
                            <li>1.2.1 Sub Menu</li>
                            <li>1.2.2 Sub Menu</li>
                        </ul> 
                    </div>
                </li> 
            </ul>
        </div>
    </div>

    <div class="button_desktop_01">2.0 Main Menu
        <div class="FadeItem_01">
            <ul>
                <li class="button_desktop_02">2.1 Sub Menu
                    <div class="FadeItem_02">
                        <ul>
                            <li>2.1.1 Sub Menu</li>
                            <li>2.1.2 Sub Menu</li>
                            <li>2.1.3 Sub Menu</li>
                        </ul> 
                    </div>
                </li> 
                <li>2.2 Sub Menu </li>
            </ul>
        </div>
    </div>  
</div>

CSS:

.button_desktop_01{
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

 .button_desktop_02 {
 float: left;
 position: relative;
 padding-left: 1%;
 padding-right: 1%;
 cursor: pointer;
 }

.FadeItem_01, .FadeItem_02 {
display: none
}

.FadeItem_02 {
position: absolute;
left: 100%;
top: 0;
width: 130px;
}

ul {
margin: 0;
list-style: none;
padding: 0;
}

jQuery:

$(document).ready(function() {
  $(".button_desktop_01, .button_desktop_02").mouseenter(function() {
    $(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500);
  });
  $(".button_desktop_01, .button_desktop_02").mouseleave(function() {
    $(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500);
  });
});

The code above FadeIn/Out some menus. The items which are under the <div class="FadeItem_02"> appear right next to the items under the <div class="FadeItem_01">. All this works perfectly so far.

I want to achieve now that the items which are under the <div class="FadeItem_02"> exactly match with the size of the button_desktop_01 (1.0 Main Menu) or button_desktop_02 (2.0 Main Menu) .

Right now they appear very close to the <div class="FadeItem_01"> which does not really look professional.

What do I have to change in my CSS to achieve this?

You can also find the code here: https://jsfiddle.net/gng5dcLc/4/

解决方案

Here you go with a solution https://jsfiddle.net/gng5dcLc/6/

.FadeItem_02 {
  position: absolute;
  left: 110%;
  top: 0;
  width: 130px;
}

Since you are using left in CSS, thats why I updated the left to *110%** to 100%

Hope this will help you.

这篇关于结构&菜单中FadeItems的设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！