Реализация боковой навигационной панели на одной странице - не работает на второй странице - PullRequest
Новая
       35

Реализация боковой навигационной панели на одной странице - не работает на второй странице

2 голосов
/ 08 марта 2019

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

, пожалуйста, помогите второй странице ниже с этой проблемой. Боковая навигация не работает, она не открывается на странице с кодом ниже. и также он не закрывается при нажатии на страницу. 

   <body>
      <!-- Header -->
      <header class="main-header-inner">
          <div class="navbar-fixed">
        <nav class="transparent">
          <div class="container">
            <div class="nav-wrapper">
              <img src="img/logo2.png">
              <a href="#" data-activates="mobile-nav" class="button-collapse">
                <i class="fa fa-bars"></i></a>
              <ul class="right hide-on-med-and-down">
                <li>
                  <a class="grey-text text-lighten-3" href="index.html">Home</a>
                </li>
                  <li>
                      <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
                    </li>
                    <li>
                        <a class="grey-text text-lighten-3 " href="index.html">About us</a>
                      </li>
                      <li>
                          <a href="https://be.linkedin.com/">
                         <i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
                        </li>
              </ul>
            </div>
            </div>
            </nav>
          </div>

              <div>
                  <ul class="side-nav" id="mobile-nav">
                    <h4 class="black-text text-darken-4 center">Lueur Tech</h4>
                    <li>
                      <div class="divider"></div>
                    </li>
                    <li>
                      <a href="index.html">
                        <i class="fa fa-home black-text text-darken-4"></i> Home</a>
                    </li>
                    <li>
                      <div class="divider"></div>
                    </li>
                    <li>
                        <a href="solutions.html">
                        <i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
                      </li>
                      <li>
                          <div class="divider"></div>
                        </li>
                      <li>
                          <a href="index.html">
                          <i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
                        </li>
                  </ul>
                  </div>

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

    <body>
  <!-- Header -->
  <header class="main-header">
      <div class="navbar-fixed">
    <nav class="transparent">
      <div class="container">
        <div class="nav-wrapper">
         <img src="img/logo2.png">
          <a href="#" data-activates="mobile-nav" class="button-collapse">
            <i class="fa fa-bars"></i>
          </a>
          <ul class="right hide-on-med-and-down">
            <li>
              <a class="grey-text text-lighten-3" href="index.html">Home</a>
            </li>
            <li>
                <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
              </li>
              <li>
                  <a class="grey-text text-lighten-3 " href="#About">About us</a>
                </li>
                <li>
                    <a href="https://be.linkedin.com/">
                   <i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
                  </li>
          </ul>
        </div>
      </div>
        </nav>
        </div>

        <div>
          <ul class="side-nav" id="mobile-nav">
            <h4 class="black-text text-darken-4 center">Lueur Tech</h4>
            <li>
              <div class="divider"></div>
            </li>
            <li>
              <a href="index.html">
                <i class="fa fa-home black-text text-darken-4"></i> Home</a>
            </li>
            <li>
              <div class="divider"></div>
            </li>
            <li>
                <a href="solutions.html">
                <i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
              </li>
              <li>
                  <div class="divider"></div>
                </li>
              <li>
                  <a href="#About">
                  <i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
                </li>
          </ul>
      </div>

спасибо за вашу помощь.

ОБНОВЛЕНИЕ : sideNav работает в codepen.io/Bjorn_Ironside1986/pen/VRbyvL, но не работает в codepen.io/Bjorn_Ironside1986/pen/OqmOdR

эти 2 необходимы, чтобы увидеть работающий кодовый блок 

<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вам нужен некоторый javascript для инициализации sidenav - в приведенном ниже коде я просто добавил опции для бокового нефа, открывающегося слева ... Нажмите на кнопку меню слева.

Надеюсь, у вас это получится. 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {
    edge: 'left'
  });
});
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<!-- Header -->
<header class="main-header-inner">
  <div class="navbar-fixed">
    <nav class="transparent">
      <div class="container">
        <div class="nav-wrapper">
          <img src="img/logo2.png">
          <a href="#" data-activates="mobile-nav" class="button-collapse">
            <i class="fa fa-bars"></i></a>
          <ul class="right hide-on-med-and-down">
            <li>
              <a class="grey-text text-lighten-3" href="index.html">Home</a>
            </li>
            <li>
              <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
            </li>
            <li>
              <a class="grey-text text-lighten-3 " href="index.html">About us</a>
            </li>
            <li>
              <a href="https://be.linkedin.com/">
                <i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <div>
    <ul id="slide-out" class="sidenav">
      <li>
        <div class="user-view">
          <div class="background">
            <img src="images/office.jpg">
          </div>
          <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
          <a href="#name"><span class="white-text name">John Doe</span></a>
          <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
        </div>
      </li>
      <li>
        <div class="divider"></div>
      </li>
      <li>
        <a href="index.html">
          <i class="fa fa-home black-text text-darken-4"></i> Home</a>
      </li>
      <li>
        <div class="divider"></div>
      </li>
      <li>
        <a href="solutions.html">
          <i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
      </li>
      <li>
        <div class="divider"></div>
      </li>
      <li>
        <a href="index.html">
          <i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
      </li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger">
      <h4 class="black-text text-darken-4 center">Lueur Tech</h4>
    </a>
  </div>


  <!-- Showcase -->
  <div class="showcase container">
    <div class="row">
      <div class="col s12 m10 offset-m1 center">
        <h1>The Digital World</h1>
        <h5>Solutions</h5>
      </div>
    </div>
  </div>
</header>

<!-- Section: Solutions About -->
<section class="section section-solutions-about">
  <div class="container">
    <div class="row">
      <div class="col s12 m5">
        <h2>What We Do...</h2>
        <p>Solutions are ways of solving problems, when you consider world issues today, everything boils down to Langauge, Maths, Technology and Science! If you consider what these represent, in one view that could be taken if we break them down it is merely
          code in some form, structed together to create innovation.</p>
      </div>
      <div class="col s12 m6 offset-m1">
        <div class="row">
          <div class="col s12">
            <ul class="tabs">
              <li class="tab col s4">
                <a href="#tab1" class="purple-text">Web Devlopment</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

<!-- Section: Features -->
<section class="section section-features grey lighten-3">
  <div class="container center">
    <h4>
      <span class="deep-purple-text text-darken-1 center">Powerful</span> & Innovative</h4>
    <h6 class="grey-text text-darken-2 center">We aim to assist you, and provide quality of service to help you scale your business, capture new clients and retain existing customers with our desings!</h6>
    <br>
    <br>
    <!-- Row 1 -->
    <div class="row">
      <div class="col s12 m4">
        <h5>
          <i class="fa fa-user"></i> User Friendly Applications
        </h5>
        <p>As a business the focus is on the client and the user to generate interest or purchase of services and products. We focus on functionality and accessability at the forefront of every desgin to ensure the user maintains interest. We ask you to
          provide the information needed to explain your product or service which will allow the user to make an informed choice.</p>
      </div>
      <div class="col s12 m4">
        <h5>
          <i class="fa fa-database"></i> Security of user and client Data
        </h5>
        <p>In today's society information is the new form of gold. We can advise you on policys such as EU GDPR and UK data protection laws. Depedning on your wesbites structure we will inform you of any products which may be of benfit to prevent cyber crime.
          </p>
      </div>
      <div class="col s12 m4">
        <h5>
          <i class="fa fa-chart-line"></i> Data Analytics
        </h5>
        <p>
          Data helps devlope a business it can show growing trends or point out possible issues. With this information a business can takes steps to proctect both themsleves and their client but also it can assist them in devloping growth and expanding into new
          sectors. We can advise on tools which can be helpful to your business in relation gathering data from users.</p>
      </div>
    </div>

    <!-- Row 2 -->
    <div class="row">
      <div class="col s12 m4">
        <h5>
          <i class="fa fa-github"></i> Problem Solving
        </h5>
        <p>
          Programing is not for everyone, that is why their are expereinced devlopers who offer services such a repair or managing sites. We can offer sulutions to problems with your site should the need arise. In some circumstances we may offer to manage your
          site for a fee, this can be discussed further dpending your needs.
        </p>
      </div>
      <div class="col s12 m4">
        <h5>
          <i class="fa fa-plus"></i> Add-ons
        </h5>
        <p>Our main service is devlopment, we dont offer hosting services or provide domain names. We can put you in touch with some providers, depending on your business services. We dont offer graphic design. We source images which are free of royalty
          and are licenced for commecial use to prevent any legal or copyright issues. But sometimes we have to use images from sources such as adobe stock therefore these are not free and will be added to the final invoice. </p>
      </div>
      <div class="col s12 m4">
        <h5>
          <i class="fas fa-desktop"></i> Website Design
        </h5>
        <p> We can offer a range of services in relation to desgin and devlopment. We can do "Landing Page" Mulitiple Page Design, One page design with different sections and E-commerce sites with a database. We can also build custome designs, all our projects
          take time depending on complexity and nature of the project.</p>
      </div>
    </div>
    <div class="center">

      <h5>
        <span class="deep-purple-text text-lighten-1">Have a question? </span> Contact our sales team
      </h5>
      <p>sales@lueurtech.co.uk</p>
    </div>
  </div>
</section>


<!-- Footer -->
<footer class="page-footer black lighten-1">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">About Us</h5>
        <p class="grey-text text-lighten-4">Our company name "Lueur" is a french word which translates to "Glow" the more common use of the word is "lueur d'espoir" which means "Glimmer of Hope" it is in this meaning that our business looks to offer small business the chance to glow. We
          take into consideration that everyone just wants to succeed in life and in business so our mission of course is to make a stable business but the main prespective is to give hope and help people grow!</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li>
            <a class="grey-text text-lighten-3 " href="index.html">Home</a>
          </li>
          <li>
            <a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
          </li>
          <li>
            <a class="grey-text text-lighten-3" href="index.html">About us</a>
          </li>

        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright deep-purple darken-1">
    <div class="container">
      <div> Lueur Tech &copy; 2018</div><i class="fab fa-cc-paypal fa-3x grey-text text-lighten-3"></i>
      <a href="https://be.linkedin.com/">
        <i class="fab fa-linkedin fa-3x grey-text text-lighten-3"></i></a>
      <p class="grey-text text-lighten-4 right  " href="#!"> Terms | Legal | Privacy</p>
    </div>
</footer>
1 голос
/ 08 марта 2019

Я думаю, это потому, что вы никогда не закрываете тег заголовка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...