サイトのメニュー バーをモバイル デバイス向けに改善しようとしています..現在持っているので、他のページへのリンクを表示するクリックして開く小さなドロップダウン メニューに縮小します..
私が最初に見つけた問題は、メニューが画面サイズよりも長く、スクロールして残りのコンテンツを表示できなかったことでした.
何が起こっているのかというと、メニューを問題なく開いて、アイテムを選択し、メニュー内をスクロールすることはできます.ショーのメニューの背景..
@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>';
}
前に述べたように、私はこのことについてあまり知識がありませんが、上記のコードがメニューを構築していると思います..
必要に応じて、より多くのコードチャンク/リンクを提供できます! :)
どうもありがとう！