2017-10-25 8 views
0

だから基本的に。私は学校でプロジェクトのウェブサイトを持っています。しかし、私はホームページを持って、残りの部分を別々の部分に分けて別のページに入れなければなりません。そのため、閲覧者がナビゲーションバーのそれぞれのボタンをクリックすると、ページのその部分が読み込まれるようになります。どのように私はこの作品を作るのですか? 各カテゴリ(土地、気候)は別々のページになければなりません。 PLZどのように作成した他のhtmlページにつながるナビゲーションバーを作成しますか?

答えて

0

https://www.w3schools.com/css/css_navbar.aspは、例えば、ページのためにあなたが持っている

+0

感謝。しかし、それは私が思っているものを正確に行う方法を好きには分かりません。同様に、全体をコード化し、ナビゲーションバーコードを追加してから、 –

+0

を作成すると、最初にページを作成するとき、最初に行うのはトップボトムです。ナビゲーションバーが一番上に表示されるので、最初にナビゲーションバーを開始します。 – GoofBall101

+0

そして、コーディングの大きな部分は、記述されたコードを理解することを学ぶことです。だから例を挙げるだけでそれをやってみよう。新しいことを学ぶ。 – GoofBall101

0

からナビゲーションバーコードを得るための良いウェブサイトです助け:同じディレクトリにabout.html、services.htmlとcontact.html。あなたはすべてのページで同じメニュー(以下のような)を持っているよりも。アクティブクラスを変更するだけで.menu__linkになります。ページ間の接続が機能するはずです。

アクティブなページにウェブの別の部分をロードする場合は、iframeを使用できますが、これは長い時間です。今日はAJAXを使用していますが、初心者の開発者にとっては難しいことです。私が言った最初のオプションを使用してください。私は助けてくれるといいですね。助けをした

.menu__list { 
 
    display: flex; 
 
    justify-content: center; 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.menu__item { 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    width: 22%; 
 
} 
 

 
.menu__link { 
 
    display: block; 
 
    line-height: 40px; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    background-color: #7fbee6; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    transition: background-color .2s; 
 
} 
 

 
.menu__link:hover, 
 
.menu__link.active { 
 
    background-color: #06639f; 
 
}
<nav class="menu"> 
 
    <ul class="menu__list"> 
 
    <li class="menu__item"><a href="./about.html" class="menu__link active">About us</a></li> 
 
    <li class="menu__item"><a href="./services.html" class="menu__link">Our services</a></li> 
 
    <li class="menu__item"><a href="./contact.html" class="menu__link">Contact</a></li> 
 
    </ul> 
 
</nav>

関連する問題