Борьба с несколькими 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']. '"/> ' : '', '', $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']. '"/> ' : '', '', $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']. '"/> ' : '', '', $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']. '"/> ' : '', '', $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, как это было в вашей второй проблеме.