Панель меню HTML на одной странице для включения в другие страницы - PullRequest
Новая
       39

Панель меню HTML на одной странице для включения в другие страницы

0 голосов
/ 26 апреля 2018

Я пишу домашнюю страницу на HTML, CSS и JavaScript и у меня есть вопрос о создании меню.
Я уже разработал дизайн и разместил его на каждом своем сайте, но я также подумал о том, какСложно было бы изменить мелочь в нем.Поэтому я попытался создать один сайт, на котором бы отображалась только строка меню, а затем добавить ссылку в начале каждой страницы.Это позволило бы мне свести к минимуму усилия, чтобы изменить вещи в меню.Но я очень новичок, поэтому я не полностью провалился.

Было бы здорово, если бы кто-нибудь мог мне помочь.Я немец и не очень хорошо говорю или пишу по-английски, поэтому извините за ошибки, которые я, вероятно, допустил.

Код, который я использую, если вам, возможно, понадобится: 

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }
 <!DOCTYPE html>
    <html>
    <head>
        <title>Startseite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Startseite">
        <meta name="description" content="Meine Startseite">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <ul id="fixed">
      <li><a href="menu.html">Startseite</a></li>
      <li><a href="timetable.html">Stundenplan</a></li>
      <li><a href="report.html">BOGY-Bericht</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Javascript</a>
        <div class="dropdown-content">
          <a href="js1.html">Beispiele 1</a>
          <a href="js2.html">Beispiele 2</a>
        </div>
      </li>
      <li><a href="animation.html">Animationen</a></li>
      <li><a href="canvas.html">Bouncing Ball</a></li>
      <li><a href="links.html">Verweise</a></li>
        </ul>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Это может быть ваш header.php

<html>
     <body>
           <header>Hello World</header>
           <div>

Это может быть ваш footer.php

           </div>
           <footer>Bye World</footer>
     </body>
</html>

И это может быть другой пример вашей страницы: other.php

<?php include ('header.php'); ?>
My html here.
<?php include ('footer.php'); ?>

Попробуйте, надеюсь, это будет полезно для вас.

0 голосов
/ 26 апреля 2018 

You have to make a new folder for include in which common data should be placed (header.php and footer.php)
Name of first File - index.php -
<?php include('include/header.php'); ?>

Name of the second file - header.php(contains Common data (menu bar) )
header.php
<!DOCTYPE html>
        <html>
        <head>
            <title>Startseite</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="keywords" content="Startseite">
            <meta name="description" content="Meine Startseite">
            <link rel="stylesheet" href="style.css">
        </head>
 <body>
   <ul id="fixed">
          <li><a href="menu.html">Startseite</a></li>
          <li><a href="timetable.html">Stundenplan</a></li>
          <li><a href="report.html">BOGY-Bericht</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Javascript</a>
            <div class="dropdown-content">
              <a href="js1.html">Beispiele 1</a>
              <a href="js2.html">Beispiele 2</a>
            </div>
          </li>
          <li><a href="animation.html">Animationen</a></li>
          <li><a href="canvas.html">Bouncing Ball</a></li>
          <li><a href="links.html">Verweise</a></li>
            </ul>

Name of third file is footer.php
      
    Footer.php
        </body>
        </html>

Файлы следует сохранять с расширением php

Этот файл включения необходимо использовать на каждой отдельной странице 

 <?php include('include/header.php'); ?>

добавить файл включения на каждую страницу enter image description here

...