0

友人のアーティスト (kouroshesfandiari.com) のためにサイトを作成していますが、レスポンシブ ナビゲーションに問題があります。横向きモードのデスクトップとタブレットでは水平 (インライン) ナビゲーションが必要で、縦向きモード (直立) の携帯電話では、ホバーまたはタップしたときに 3 本線のボタン アイコンにブロック スタイルのナビゲーションが表示されるようにします。

icomoon のアプリを使用して 3 本線のアイコン用の小さなフォント ファイルをインストールし、orientation:portrait メディア クエリを使用して、携帯電話にさまざまな機能を提供することができます。ただし、nav 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 に答える