исправить выпадающее меню навигационной панели при неправильном позиционировании и работать только на одной странице

Question

Итак, я создал сайт для себя и моих друзей, чтобы использовать его в школе, потому что они блокируют все, поэтому я создал свою собственную систему чата и т. Д. c .. Я ищу некоторую помощь, чтобы исправить выпадающий список моих навигационных панелей. , в настоящее время не работает вообще, но в php есть теги, потому что кто-то может посмотреть, есть ли исправление, которое было бы замечательно! Надеемся, что ответы на этот пост будут полезны для других людей, ищущих те же функции!

header. php

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Montserrat";

/* ===========================================
                    Titles
============================================ */
.title, div.title, .title-left {
  text-transform: uppercase;
  padding: 40px 0 0 0;
  color: #6C6C6C;
  margin: 0; }

div.title, div.title-left {
  padding: 20px 0; }

.title-left {
  text-align: left; }


/* ===========================================
                Buttons
============================================ */
.button, .button-primary {
  border-radius: 100px;
  font-weight: normal;
  padding: 15px 30px;
  border: 0; }

.button-primary {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  -webkit-transition: 700ms background ease-in-out;
  transition: 700ms background ease-in-out;
  background: #1DB2E3;
  color: #FFFFFF; }
  .button-primary:hover {
    background: #333E4F; }

/* ===========================================
            Main Navigation
============================================ */
#main-navigation {
  background: rgba(0, 0, 0, 0.25);
  min-height: 90px;
  z-index: 999; 
  }
  #main-navigation .navigation-left {
    padding: 37px 0;
    float: left; }
    #main-navigation .navigation-left a.logo {
      text-transform: uppercase;
      font-size: 30px;
      color: #FFFFFF; }
      #main-navigation .navigation-left a.logo img {
        margin-top: 0px;
        height: 60px; }
  #main-navigation .hamburger-menu {
    height: 20px;
    position: absolute;
    width: 30px;
    margin: auto;
    right: -70%;
    bottom: 0;
    left: 0;
    top: 0; }
  #main-navigation .bar,
  #main-navigation .bar:after,
  #main-navigation .bar:before {
    height: 2px;
    width: 30px; }
  #main-navigation .bar {
    -webkit-transform: translateY(9px);
    transform: translateY(9px);
    background: white;
    -webkit-transition: all 0ms 300ms;
    transition: all 0ms 300ms;
    position: relative; }
    #main-navigation .bar.animate {
      background: rgba(255, 255, 255, 0); }
  #main-navigation .bar:before {
    -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    background: white;
    bottom: 9px;
    position: absolute;
    content: "";
    left: 0; }
  #main-navigation .bar:after {
    -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    background: white;
    position: absolute;
    top: 9px;
    content: "";
    left: 0; }
  #main-navigation .bar.animate:before {
    -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 0; }
  #main-navigation .bar.animate:after {
    -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0; }
  #main-navigation .navigation-right {
    padding: 37px 0;
    display: none;
    float: right; }
    #main-navigation .navigation-right .item {
      font-weight: normal;
      margin-right: 15px;
      color: #FFFFFF; }
  @media (min-width: 480px) {
    #main-navigation .navigation-right {
      display: block; }
    #main-navigation .hamburger-menu {
      display: none; } }

.navigation-right.active {
  display: block !important;
  background: transparent;
  position: absolute;
  margin-top: 95px;
  height: 352px;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0; }
  .navigation-right.active a {
    text-align: center;
    padding: 16px 0;
    display: block; }
  .navigation-right.active .button-primary {
    margin: 0 auto;
    width: 70%; }

.dropdown {
  display: none;
  margin-right: 60px;}

.dropdown.active {
  background: rgba(0, 0, 0, 0.25);
  display: block !important; }
  .dropdown.active a {
    border-bottom: 1px dashed #AAAAAA;
    padding: 10px 0;
    display: block;
    color: #FFFFFF; }
    .dropdown.active a:last-child {
      border: 0; }
  @media (min-width: 480px) {
    .dropdown.active {
      position: absolute;
      padding: 15px 20px;
      margin-top: 34px;
      margin-left: 16em;
      } }

/* OTHER */

body {
  background-color: #3d3d3d;
}


html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
}  
  
a {
  text-decoration: none;
}

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>MopedBoyz</title>
        <link rel="icon" href="img/mopedIcon.ico">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>

            <div id="main-navigation" class="animated bounceInDown">
            <div class="inner">
                <div class="navigation-left">
                    <a href="index.php" class="logo bold">MopedBoyz</a>
                </div>

                <div class="hamburger-menu">
                    <div class="bar"></div>
                </div>

                <div class="navigation-right">
                    <a href="index.php" class="item">Links</a>
                    <a href="chat.php" class="item">Chat</a>
                    <a href="login.php" class="item">Login</a>
                    <a href="register.php" class="item">Register</a>
                    <a href="usercp.php" class="item">Settings</a>
                    <a href="#" class="item hosting-dropdown">Account
                     <i class="fa fa-caret-down"></i></a>
                        <li class="dropdown">
                            <a href="login.php">Login</a>
                            <a href="register.php">Register</a>
                            <a href="usercp.php">Settings</a>
                            <a href="sys/logout.php">Logout</a>
                        </li>
                    <a href="sys/logout.php" class="button-primary">Logout</a>
                </div>
            </div>
        </div>
            

Answer 1

Если было довольно сложно прочитать ваш код 3000 строк css, но я сделал вам рабочий пример. Вы можете найти его в jsFiddle .

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

 <ul class="dropdown">
    <li><a href="login.php">Login</a></li>
    <li><a href="register.php">Register</a></li>
    <li><a href="usercp.php">Settings</a></li>
    <li><a href="sys/logout.php">Logout</a></li>
 </ul>

теги 'li' должны быть помещены внутри ' ul ', как указано выше.

Весь «выпадающий» контейнер должен быть помещен в «hosting-dropdown», который открывает и закрывает «dropdown». Таким образом, вы можете настроить положение контейнера «выпадающий» относительно кнопки «хостинг-выпадающий».

 <div id="dropdown" class="item hosting-dropdown">
      <span>Account<i class="fa fa-caret-down"></i></span>
      <ul class="dropdown">
          <li><a href="login.php">Login</a></li>
          <li><a href="register.php">Register</a></li>
          <li><a href="usercp.php">Settings</a></li>
          <li><a href="sys/logout.php">Logout</a></li>
     </ul>
 </div>

Раскрывать и открывать раскрывающийся список можно с помощью небольшой jQuery функции:

$('document').ready(function() {
    $('#dropdown').click(function() {
    $(this).toggleClass('opened');
  })
})

И CSS:

.hosting-dropdown { 
  display: inline-block;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
}  

.dropdown {
  position: absolute;
  right: 0;
  top: 55px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 15px;
  margin: 0;
  display: none; 
}

.hosting-dropdown.opened .dropdown {
  display: block;
}

.dropdown li {
  list-style: none;
  padding: 5px 0;
}

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
}

.content {
  height: 2000px;
  width: 100%;
  background-color:#fff
}

#main-navigation .navigation-left {
  padding: 27px 0;   
}
#main-navigation .navigation-right{
  padding: 35px 0; 
}

Если вы Есть вопросы, пожалуйста, свяжитесь со мной.