Исправить положение изображения без ** положения: фиксировано ** - PullRequest
Новая
       9

Исправить положение изображения без ** положения: фиксировано **

1 голос
/ 09 апреля 2020

У меня есть панель SideMenu. Заголовок бокового меню содержит изображение и под ним содержимое. Это прокручиваемый. Я хочу сделать прокручиваемое меню, а не изображение. Я не могу использовать position: fixed , потому что это сворачиваемое меню и некоторые другие причины. Как сделать прокручиваемым только содержимое?

CODE 

document.write('<div> <img style="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');

document.write('<div class="scroll">'+

document.write(
    '<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
    '<div class="show list-unstyled" id="X1">'+
       '<a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Site 1 </a> '+
       '<a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Site 2 </a> '+
    '</div>'
);
document.write('</div>');

Я пытался установить отдельный DIV, но не работает

CSS

.scroll {
  max-height: 500px;
  overflow-y: scroll;
  background: #000000;
}

#sidebar {
  min-width: 210px;
  max-width: 210px;
  background: #000000;
  color: #fff;
  transition: all 0.3s;
}

ПОЛНЫЙ КОД 

#sidebar {
  min-width: 210px;
  max-width: 210px;
  background: #000000;
  color: #fff;
  transition: all 0.3s;
}


#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar.active , button div a {
  padding-left: 30px;
  margin-left: 0;
  font-size: 0.9em;
  font-family: Verdana;
  background: #ffffff;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}
#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 0;
  background: #000000;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

ПОЛНЫЙ КОД 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Collapsible sidebar using Bootstrap 4</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style.css">
  <!-- <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
  <link rel="stylesheet" type="text/css" href="CSS/Nav.css">
  <link rel="stylesheet" type="text/css" href="CSS/Card.css"> -->
  <!-- <link rel="stylesheet" type="text/css" href="CSS/Buttons.css"> -->
  <!-- Font Awesome JS -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <div class="wrapper">

      <nav id="sidebar">
        <script src="C-NavigationBar.js"></script>
        <script src="JavaScript/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>

           var y = document.getElementById(1);
           y.className += " w3-show";
           y.previousElementSibling.className += " w3-theme ";

              function myAccFunc(n) {
                var x = document.getElementById(n);
                if (x.className.indexOf("w3-show") == -1) {
                  x.className += " w3-show";
                  x.previousElementSibling.className += " w3-theme ";
                } else {
                  x.className = x.className.replace(" w3-show", "");
                  x.previousElementSibling.className =
                  x.previousElementSibling.className.replace("w3-theme", "");
                }
              }

              var editor = ace.edit("editor");
              editor.setTheme("ace/theme/twilight");
              editor.session.setMode("ace/mode/c_cpp");
              editor.setReadOnly(true);
              editor.resize();
        </script>
      </nav>


      <div id="content">

          <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">

                  <button style="width:auto;"type="button" id="sidebarCollapse" class="btn btn-dark">
                      <i class="fas fa-align-justify"></i>
                      <span>Menu</span>
                  </button>



              </div>
          </nav>



      </div>
  </div>

  <!-- jQuery CDN - Slim version (=without AJAX) -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  <script type="text/javascript">
      $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
              $('#sidebar').toggleClass('active');
          });
      });
  </script>
  </body>

</html>

РЕДАКТИРОВАТЬ 

var myArray = [

  ["Site1.php", 0],
  ["Site1.php", 0],
];

var X = window.location.href.substring(window.location.href.lastIndexOf("/")+1);
var i;
for (i = 0; i < myArray .length; i++) {
 if (X == myArray [i][0]) {
   myArray [i][1] = 'active';
 break;
}
}
function Previous() {
  window.location.href = myArray [i-1][0];
}
function Next() {
  window.location.href = myArray [i+1][0];
 }

document.write('<div> <img 
class="header"tyle="width:80%;margin:10%;"src="Files/Logo.png"/> <hr> </div>');

document.write(
'<button class="list" href="#X1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Home </button>'+
'<div class="show list-unstyled" id="X1">'+
  '<a href="'+myArray [0][0]+'" class="'+myArray [0][1]+'" > 1 </a> '+
  '<a href="'+myArray [1][0]+'" class="'+myArray [1][1]+'" > 2</a> '+
'</div>'

);

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Я получаю эту ошибку, поэтому перед исправлением или повторением проблемы. Мне нужно решить следующие ошибки. Так что, если вы можете приложить файлы кода, было бы здорово. enter image description here

0 голосов
/ 09 апреля 2020

Я бы посоветовал вам использовать Jquery для достижения того, что вы хотите.

Сначала установите положение: фиксированное.

Но, как вы сказали, я не могу взять положение зафиксировано, потому что меню складное. Теперь в игру вступает jquery.

Везде, где вы написали функцию «свертывания», добавьте еще одну строку кода jquery, чтобы скрыть изображение заголовка.

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

Когда все двери закроются, создайте свои умные.

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

Нет похожих вопросов

...