动态地标记其父级的子菜单外观？

分类：编程问答

如何解决动态地标记其父级的子菜单外观？

MENUE 1 to 4没问题..…

从波纹管 图片一 的 MEMUE 5 子菜单垂直居中...没关系

问题

来自 第二张图片 顶部空间为空，但是它下降了……我需要修复..首先子菜单将从底部向上调平，然后它将覆盖顶部空间，然后如果需要更多空间，它将移至底部

注意需要在else if()条件下实现逻辑...

合影

enter image description here

第二名

enter image description here

const initMegaMenu = (function(){
    // nav.noor-nav_menu  .noor-sub_menu li 


let magaMenue = document.querySelectorAll("nav.noor-nav_menu  .noor-sub_menu .noor-sub_menu   ");
// let magaMenues = document.querySelectorAll("nav.noor-nav_menu  .noor-sub_menu .noor-sub_menu   ");

magaMenue.forEach(function(item){
    // console.log(item)
    let ht = item.getBoundingClientRect();
    // console.log(item.offsetHeight)offsetTop
    let pTop = item.parentElement.getBoundingClientRect();
    // console.log(pTop.top);element.offsetTop + element.offsetHeight
    // console.log(item.parentElement.offsetTop);
    let parentLiTop = item.parentElement.offsetTop;
    let parentLiTopHalf = parseFloat(parentLiTop) / 2;
    let parentLiHeight = item.parentElement.offsetHeight;
    let parentLiHeightHalf = parentLiHeight / 2;
    let parentUlHeight = item.parentElement.parentElement.offsetHeight;
    let parentUlHeightHalf = parseFloat(parentUlHeight) / 2;
    let currentItemUlHeight = item.offsetHeight;
    let currentItemUlHeightHalf = currentItemUlHeight / 2;
    // console.log(item.parentElement.offsetHeight);
    // console.log(item.parentElement.parentElement.offsetHeight);
    console.log(`
     parentLiTop : ${parentLiTop} |
     parentLiTopHalf : ${parentLiTopHalf} |
     parentLiHeight : ${parentLiHeight} |
     parentLiHeightHalf : ${parentLiHeightHalf} |
     parentUlHeight : ${parentUlHeight} |
     currentItemUlHeight : ${currentItemUlHeight} |
     currentItemUlHeightHalf : ${currentItemUlHeightHalf} 
     
     `);

    //  item.style.marginTop =   - (parentLiHeightHalf + parentLiTopHalf ) + 'px';


    if( parseFloat(parentLiTop) <= parseFloat(parentUlHeightHalf) ){

        if(parseInt(currentItemUlHeightHalf) <= parseInt(parseFloat(parentLiTop))  ){
            console.log('ok')
            item.style.marginTop = -(parseFloat(currentItemUlHeightHalf) -parseFloat(parentLiHeightHalf))+'px';
        }else{     
            item.style.marginTop =   - parseFloat(parentLiTop) +'px';
        }
        
    }else if(parseFloat(parentLiTop) > parseFloat(parentUlHeightHalf)){
    //    console.log((parseFloat(parentUlHeight) - parseFloat(parentLiTop)))
    //     item.style.marginTop =    - (parseFloat(parentUlHeight) - parseFloat(parentLiTop)) +'px';

        if(parseInt(currentItemUlHeightHalf) <= parseInt(parseFloat(parentLiTop))  ){
            console.log('ok')
            item.style.marginTop = -(parseFloat(currentItemUlHeightHalf) -parseFloat(parentLiHeightHalf))+'px';
        }else{     
            item.style.marginTop =   - parseFloat(parentLiTop) +'px';
        }
    }
    


})
})([])


document.addEventListener("DOMContentLoaded",initMegaMenu);
*,*::after,*::before{
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

nav.noor-nav_menu{
  width: 100%;
  height: 3rem;
  
  background-image: linear-gradient(to right,#86259C,#CE388B);
}
nav.noor-nav_menu  > ul,nav.noor-nav_menu  > * ul {
  list-style: none;
}
nav.noor-nav_menu  > ul > li > a,nav.noor-nav_menu  > * ul > li > a  {
  text-decoration: none;
  text-transform: uppercase;
}

nav.noor-nav_menu   .noor-nav_list{
  display: flex;
  background-image: linear-gradient(to right,#CE388B);

}


nav.noor-nav_menu   .noor-nav_list  li {
  line-height: 3rem;
  position: relative;
  
}




nav.noor-nav_menu  .noor-sub_menu li {
  line-height: 2.6rem;
  background-image: linear-gradient(to right,#CE388B);
  min-width: 12rem;
}

nav.noor-nav_menu   .noor-nav_list a {
  display: block;
  padding: 0 1.5rem;
  font-size: 1rem;
  color: #ffffff;
}

.noor-nav_list .noor-sub_menu a {
  font-size: .8rem;
}
.noor-nav_list a:hover {
  background: #5d0033d3;
}

nav.noor-nav_menu  .noor-sub_menu {
  position: absolute;
  display: block;
  top: 16rem;
  border-top: 1px solid #86259C;
  border-top: 1px solid #CE388B
  ;
  background-color: rgba(255,255,.1);
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease;
}

nav.noor-nav_menu  .noor-sub_menu .noor-sub_menu {
  left: 160%;
  top: 0;
  border-top: 0;
  border-left: 1px solid #86259C;

}

nav.noor-nav_menu  .noor-sub_menu::before{
  content: '';
  position: absolute;
  border: .5rem solid transparent;
  border-bottom-color: #86259C;
  left: 3rem;
  top: -1rem;
}
nav.noor-nav_menu   .noor-sub_menu .noor-sub_menu::before {
  content: '';
  position: absolute;
  border: .5rem solid transparent;
  border-right-color: #86259C;
  left: -1rem;
  top: 1rem;
}

.noor-nav_list li:hover > .noor-sub_menu{
  top: 3rem;
  visibility: visible;
  opacity: 1;
}

nav.noor-nav_menu   .noor-sub_menu li:hover > .noor-sub_menu {
  top: 0;
  left: 100%;
}
<header>
<span class="toggle-icon"><i class="fas fa-bars "></i></span>
<nav class="noor-nav_menu">
  <ul class="noor-nav_list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Mega Menue</a>
    
    <ul class="noor-sub_menu">
    
     
      <li><a href="#" >Menue 1 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
        
        </ul>
      </li>
      <li><a href="#" >Menue 2 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
        
        </ul>
      </li>
      <li><a href="#" >Menue 3 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
         
        
        </ul>
      </li>
      <li><a href="#" >Menue 4 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
        
        </ul>
      </li>
      <li><a href="#" >Menue 5 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <!-- <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li> -->
        
        </ul>
      </li>
      <li><a href="#" >Menue 6 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
        
        </ul>
      </li>
      <li><a href="#" >Menue 7 >> </a>
        <ul class="noor-sub_menu">
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          <li><a href="#">Menue 1.1</a></li>
          
        
        </ul>
      </li>
      
    </ul>
    
    </li>
    
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

  </header>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot