モバイル用フルハンド水平ナビバーにデスクトップを折りたたむための垂直ナビバー？

-1

タイトルのように、私は100％の縦の高さのnavbarを使って、より小さな画面（画面が〜580pxの幅になるとき）に全幅の水平ナビゲーションバーに崩壊する必要があります。モバイル用フルハンド水平ナビバーにデスクトップを折りたたむための垂直ナビバー？

Here is a jsfiddle example私が現在持っているもの。

body { 
 
    margin: 0 auto; 
 
} 
 

 
ul { 
 
    height: 100% width: 10%; 
 
    margin: 0px; 
 
    padding: 0px 
 
    color: #2A2829; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: pink; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    padding: 8px 20px; 
 
    text-decoration: none; 
 
} 
 

 
ul li a:hover { 
 
    background-color: black; 
 
    color: pink; 
 
} 
 

 
.body { 
 
    height: 100%; 
 
    width: 80%; 
 
    float: right; 
 
    color: pink; 
 
    text-align: center; 
 
    background-color: black; 
 
}

<body> 
 

 
    <ul> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">PORTFOLIO</a></li> 
 
    <li><a href="#">BUSINESS</a></li> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">SCHOOL</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    
 
    <p> 
 
    Adding space <br /> 
 
    to make <br /> 
 
    navbar longer <br /> 
 
    </p> 
 
    </ul> 
 

 
    <div class="body"> 
 
    <div> 
 
     <h1> 
 
     Hello World 
 
     </h1> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
    </div> 
 
    </div>

そこから画面サイズが小さい場合、私は以下のような何かをしたい：

something like this

私は私がことができるはずだと思う2本当に良いリソースを発見しました助けてもらえますが、ウェブページでシステムを実装する際に問題があります。

また、私は現時点ではブートストラップを使用していません。ブートストラップを使用するとこのプロジェクトを完了するのは簡単でしょうか？私はまだウェブ開発に新しいので、私は私の新しさのいずれかの事前にお詫び申し上げます！

ありがとうございます。

出典

2016-08-23 cedricium

ここでの基本的な考え方は、あなたがモバイル最初のスタイルで始まり、上向きに働くということです。

次に、ビューポートが特定の幅（この場合は580ピクセル）を超えているため、CSSスタイルを少し変更します。

html { 
 
    height: 100% 
 
} 
 
body { 
 
    margin: 0 auto; 
 
    height: 100% 
 
} 
 
ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: #2A2829; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    background-color: pink; 
 
} 
 
@media (min-width: 580px) { 
 
    ul { 
 
    float: left; 
 
    width: 10%; 
 
    height: 100%; 
 
    } 
 
} 
 
ul li a { 
 
    display: block; 
 
    padding: 8px 20px; 
 
    text-decoration: none; 
 
} 
 
ul li a:hover { 
 
    background-color: black; 
 
    color: pink; 
 
} 
 
.body { 
 
    color: pink; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 
@media (min-width: 580px) { 
 
    .body { 
 
    height: 100%; 
 
    float: left; 
 
    width: 90%; 
 
    } 
 
}

<body> 
 

 
    <ul> 
 
    <li><a href="#">HOME</a> 
 
    </li> 
 
    <li><a href="#">PORTFOLIO</a> 
 
    </li> 
 
    <li><a href="#">BUSINESS</a> 
 
    </li> 
 
    <li><a href="#">ABOUT</a> 
 
    </li> 
 
    <li><a href="#">SCHOOL</a> 
 
    </li> 
 
    <li><a href="#">CONTACT</a> 
 
    </li> 
 

 
    <p> 
 
     Adding space 
 
     <br />to make 
 
     <br />navbar longer 
 
     <br /> 
 
    </p> 
 
    </ul> 
 
    <div class="body"> 
 
    <div> 
 
     <h1> 
 
     Hello World 
 
     </h1> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
     <p> 
 
     blah blah blah blah blah blah 
 
     </p> 
 
    </div> 
 
    </div>

フィドル：https://jsfiddle.net/e55xm437/1/

出典

2016-08-23 16:48:54 ksav

私はこのアプローチが好き、私はそれを試してみましたが、それは美しく働きました。ありがとう！ – cedricium

幅580ピクセル未満の画面でCSSメディアクエリを使用できます。たとえば、ときモバイルデバイス上のナビゲーションリストが画面全体をカバーするために：

@media screen and (max-width: 580px) { 
    ul { 
    width: 100%; 
    } 
}

出典

2016-08-23 16:46:27

モバイル用フルハンド水平ナビバーにデスクトップを折りたたむための垂直ナビバー？

答えて

関連する問題