Свернутая боковая панель по умолчанию

Question

Я новичок в веб-приложениях, поэтому я не знаю HTML, CSS и JS достаточно хороших, чтобы решать проблемы самостоятельно. Я следовал некоторому руководству по YT, чтобы создать складную боковую панель, но я не знаю, почему она свернута по умолчанию, и я не могу открыть ее. Я думаю, что проблема в том, что я не знаю, что именно происходит в моем коде. Можете ли вы сказать мне, что я делаю неправильно, и помочь мне понять, как это должно работать?

HTML:

<div id="wrapper">
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
                    <i class="fa fa-fw fa-gamepad"></i> Select something</a>
                <ul class="collapse list-unstyled">
                    <li>
                        <a href="#">Link1</a>
                    </li>
                    <li>
                        <a href="#">Link2</a>
                    </li>
                    <li>
                        <a href="#">Link3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-user"></i> My profile</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-question-circle"></i> FAQ</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-sign-out-alt"></i> Logout</a>
            </li>
        </ul>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
        <!-- some code -->
    </div>
</div>

CSS:

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

#sidebar-wrapper .sidebar-header {
    padding: 20px;
    background: var(--black);
}

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    transition: 0.15s;
    color: black;
}

#wrapper.menuDisplayed #sidebar-wrapper{
    width: 250px;
}

#wrapper.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}

.sidebar-nav{
    padding: 0;
    list-style: none;
}

.sidebar-nav li{
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a{
    display: block;
    text-decoration: none;
    color: var(--gray);
}

.sidebar-nav ul li a {
    font-size: 0.9em;
    display: block;
    color: var(--lightGray)
}

.sidebar-nav li a:hover{
    color: #fff;
    background: var(--gray);
}

.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: var(--deepBlue);
}

JS:

$("#menu-toggle").click(function(e){
    e.preventDefault();
    $("#wrapper").toggleClass("menuDisplayed");
});

Answer 1

Вы должны добавить класс menuDisplayed к вашему #wrapper. тогда он может отображаться по умолчанию.

<div id="wrapper" class="menuDisplayed">

полный пример можно найти здесь: http://jsfiddle.net/9ojvnutc/

Answer 2

Хорошо, я расскажу вам, как добиться того, чего вы хотите (2 метода), а затем я объясню, как работает ваш код.

метод 1

в вашем первом div ( #wrapper), добавьте класс menuDisplayed:

<div id="wrapper" class="menuDisplayed">

метод 2

, вы также можете изменить свой CSS, чтобы сделать то, что вы хотите, и сделать «отображаемое меню» стиль по умолчанию:

1. замените "menuDisplayed" на "menuHidden" во всем коде, чтобы он продолжал иметь смысл семантически
2. , обновлял стили для #sidebar-wrapper, давая ему значение, отличное от 0 для ширины.

#sidebar-wrapper{
    z-index: 1;
    position: fixed;
    width: 250px;
    height: 100%;
    overflow-y: hidden;
    transition: 0.15s;
    background-color: var(--black) ;
    font-size: 1em;
}

теперь также измените стили для #page-content-wrapper, чтобы освободить место для боковой панели:

#page-content-wrapper{
    width: 100%;
    position: absolute;
    padding: 15px;
    padding-left: 250px; /* leaving 250px of space on the left */
    transition: 0.15s;
    color: black;
}

следующий шаг - сделать так, чтобы у закрытой боковой панели были правильные стили:

#wrapper.menuHidden #sidebar-wrapper{
    width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}

#wrapper.menuHidden #page-content-wrapper {
    padding-left: unset; /* clears the attribute that gave space to the sidebar */
}

---

Теперь я объясню, как работает ваш код (перед изменением поведения боковой панели):

your CSS сообщает браузеру, что элемент с идентификатором sidebar-wrapper должен иметь нулевую ширину (поэтому он не появляется при загрузке страницы), но также говорит, что элемент с идентификатором sidebar-wrapper должен иметь ширину 250 пикселей, когда внутри другого элемента есть идентификатор wrapper и класс menuDisplayed.

маги c находится в вашем javascript: он говорит браузеру переключить menuDisplay класс элемента с идентификатором wrapper, который активирует стиль CSS, который делает вашу боковую панель шириной 250 пикселей, и поэтому он появляется. при повторном переключении класс menuDisplayed удаляется из элемента с идентификатором wrapper, и ваша боковая панель возвращается к ширине, равной 0.

$("#menu-toggle").click добавляет прослушиватель событий для события click используя jQuery. когда происходит событие (кто-то щелкает элемент с идентификатором menu-toggle), выполняется функция обратного вызова:

function(e){
    e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
    $("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}

Answer 3

Вы можете добавить класс menuDisplayed на панель навигации (с идентификатором #wrapper) изначально, поэтому при загрузке страницы он будет отображаться.

<div id="wrapper" class="menuDisplayed">