Борьба с несколькими CSS-вещами для моего меню

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

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

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

@media (max-width: 767px) {
.scroll-to-top {
    display: none;
}
.show-menu {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    width: 100%;
    height: 300px;
    z-index: 999;
    overflow-y: scroll;
    -webkit-transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
}}

У меня были проблемы с работой прокручиваемого меню, но в конце концов я обнаружил добавление "height: xx;" часть решила эту проблему..

Я не очень разбираюсь во всем этом, но стараюсь учиться на редактировании существующих примеров и т. Д.

Кто-нибудь может увидеть что-нибудь очевидное?

[Решаемые]

2

(То же меню, что и раньше.)

Я нашел это прошлой ночью, которое я добавил на свой сайт:

@media (min-width: 768px) {.dropdown-menu li:hover .menu {visibility: visible;}}
@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}

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

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


3

(то же самое меню)

При создании моей темы на моем сайте элементы меню 3-го уровня отображаются в виде маркированного списка под ссылкой 2-го уровня.

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

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul>';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

}

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

Любая помощь приветствуется, и я могу предоставить больше кусков кода / ссылок, если это необходимо!:)

Большое спасибо!

1 ответ

2: Вам нужно добавить этот код jquery под тегом script:

if(screen.width<=768){
$('.dropdown').on('click',function(){
    $('.dropdown-menu').toggle();
});
}

И вы должны удалить стиль, который вы только что опубликовали в своем вопросе.

3: это код для него:

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a ', !empty($childbutton['sub_buttons']) ? 'class="dropdown-toggle1"' : '',' href="#"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul class="dropdown-menu1" role="menu" style="display:none;position:relative;border:none;box-shadow:none;">';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

И вы должны добавить этот код jquery (как в 2):

$('.dropdown-toggle1').on('click',function(){
        $('.dropdown-menu1').toggle();
    });

Примечание: я использовал событие click в этих элементах списка, поэтому я должен сделать якорь href="#". Если вы хотите, чтобы они появлялись при наведении курсора, вы должны сделать это с помощью CSS, как это было в вашей второй проблеме.

Другие вопросы по тегам