Question

我为我的艺术家朋友（kouroshesfandiari.com）创建了一个网站，并且在响应式导航方面遇到了麻烦。在横向模式下的台式机和平板电脑上，我想要一个水平（内联）导航，对于纵向模式的手机（直立），我希望三线按钮图标在悬停或点击时显示一个块状导航。

我使用icomoon的应用程序为三行图标安装一个小字体文件，并使用方向：纵向媒体查询允许我为手机提供不同的功能。但是，似乎无论我在导航CSS或其纵向媒体查询中更改了什么，都不需要功能。

如果我在手机上看到我想要的方式，导航仍然是平板电脑和桌面尺寸的块。如果我将导航内联并出现在平板电脑和台式机上我想要的方式，它会为手机视图抛出所有内容。我们将非常感谢更好的方法。现在似乎有很多网站都使用这种类型的响应式导航，但我无法找到描述如何执行此操作的资源。

HTML：

<nav><!-- Responsive Navigation Menu -->
    <ul>
        <li><span class="icon-menu4"></span>


            <ul>
                <li class="hvr-rectangle-out"><a href="#">Pen & Ink Art</a></li>
                <li class="hvr-rectangle-out"><a href="#">3D Printed Art</a></li>
                <li class="hvr-rectangle-out"><a href="#">Merchandise</a></li>
                <li class="hvr-rectangle-out"><a href="#">About</a></li>
                <li class="hvr-rectangle-out"><a href="#">Contact</a></li>
            </ul>
        </li>
    </ul>
</nav>

和CSS：

header {
    position: fixed;
    top: 75%;
    right: 0%;
    bottom: 5%;
    left: 0%;
    padding: 40px;
}

header h1 {
    font-size: 4em;
    color: #FAF7F7;
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
}

nav ul ul, nav ul li {
    list-style: none;
    font-size: 1.5em;
    margin-top: 0;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

@media only screen and (orientation:portrait) {


    @font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?hnrm6o');
    src:url('fonts/icomoon.eot?#iefixhnrm6o') format('embedded-opentype'),
        url('fonts/icomoon.woff?hnrm6o') format('woff'),
        url('fonts/icomoon.ttf?hnrm6o') format('truetype'),
        url('fonts/icomoon.svg?hnrm6o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .icon-menu4:before {
        content: "\e9c0";
        color: white;
        font-size: 1.5em;
        padding: 0.25em;
        border: 2px solid white;
        border-radius: 0.15em;
    }




    nav ul ul {
        display: none;
        width: 11em;
        background: rgba(0,0,0,0.8);
        border-radius: 0.5em;
        position: absolute;
        top: -6.5em;
        right: -2em;
    }

    nav ul li:hover > ul, nav ul li ul:hover > ul, .icon-menu4:hover > ul {
        display: block;
    }
}

Answer 1

Use this to get back inline menu in 

desktop

 @media screen and (mim-width: 750)
 {
    nav ul li
 {
   display: inline-block! important;
  }
  }

  Please don't use hover effect in.     

  mobile Screen
  And write perfect media query for.   

  mobile. View like

  @media screen and (max-width: 749)
  {
  }

Answer 2

@media screen and (mim-width: 750px)
 {
    nav ul li
 {
   display: inline-block! important;
  }
  }

内联导航栏通过字体按钮冷凝到下拉块导航

2 个答案: