0

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

我使用 icomoon 的应用程序为三行图标安装了一个小字体文件，并使用orientation:portrait 媒体查询允许我为手机提供不同的功能。但是，似乎无论我在导航 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;
    }
}
4

2 回答 2

0 
@media screen and (mim-width: 750px)
 {
    nav ul li
 {
   display: inline-block! important;
  }
  }
于 2015-03-08T01:01:52.360 回答
0 
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)
  {
  }
于 2015-03-08T00:52:51.493 回答