简体   繁体   English

桌面视图上的 SlikNav 多级菜单?

[英]SlikNav multi-level menu on desktop view?

I'm using SlikNav to make a mobile navigation menu.我正在使用SlikNav制作移动导航菜单。 I have this structure:我有这个结构:

<nav>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Products</a>
            <ul>
                <li>
                    <a href="#">Child1</a>
                </li>
                <li>
                    <a href="#">Child2</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

This works fine on mobile view, here is a codepen .这在移动视图上工作正常,这是一个codepen

My desktop version of this is simply: nav ul li { display:inline; }我的桌面版本很简单: nav ul li { display:inline; } nav ul li { display:inline; } which makes the list display inline. nav ul li { display:inline; }这使得列表显示内联。

My question, is it possible for SlickNav to make the dropdown menu also work in desktop view?我的问题是, SlickNav 是否可以使下拉菜单在桌面视图中也能工作?

right now, the menu is already a dropdown in desktop mode and also in mobile mode.. 现在,菜单已经是桌面模式的下拉菜单,也是移动模式下的..

Just for looks good, do that - add a class "sub" in ul after li. 只是为了看起来不错,这样做 - 在li之后在ul中添加一个类“sub”。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul class="sub">
        <li><a href="#">Child1</a></li>
        <li><a href="#">Child2</a></li>
      </ul>
    </li>
  </ul>
</nav>

and css - 和css -

li{
  float: left;
}
li > ul.sub{
  margin: 0;
}

I don't know how to do this but I have an alternative and fast solution from this.我不知道该怎么做,但我有一个替代的快速解决方案。

You can use smartmenu Plugin Here is the Example Click Here您可以使用smartmenu 插件这是示例单击此处预览

Javascript代码

HTML代码

Hope It Helps You.希望对你有帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM