Мне нужно изменить свое меню в отзывчивое меню - PullRequest
Новая
       30

Мне нужно изменить свое меню в отзывчивое меню

0 голосов
/ 27 мая 2018

Я просто использовал WordPress Nav Menu в своем шаблоне, и я не хочу редактировать HTML-код. Я хочу превратить его в адаптивное меню, чтобы оно переходило в раскрывающееся меню на мобильном телефоне.Вот код HTML и CSS, который я использую.Теперь я могу редактировать только CSS и больше не иметь доступа к HTML. 

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
        <ul id="menu-menu-2" class="nav navbar-nav">
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-84 nav-item"><a title="Home" href="http://example.com/" class="nav-link">Home</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-147 nav-item"><a title="ABOUT" href="http://example.com/about/" class="nav-link">ABOUT</a></li>
            <li class="hvr-float menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-437 nav-item"><a title="Leagues" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-437">Leagues<span class="downarrow"></span></a>
                <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-437" role="menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-sp_table menu-item-411 nav-item"><a title="Chiefs" href="http://example.com/table/chiefs/" class="dropdown-item">Chiefs</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142 nav-item"><a title="Kama'aina" href="http://example.com/leagues/kamaaina/" class="dropdown-item">Kama’aina</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143 nav-item"><a title="Keiki" href="http://example.com/leagues/keiki/" class="dropdown-item">Keiki</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-144 nav-item"><a title="Kings" href="http://example.com/leagues/kings/" class="dropdown-item">Kings</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-429 nav-item"><a title="Season Archives" href="http://example.com/season-archives/" class="dropdown-item">Season Archives</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-463 nav-item"><a title="Regular Season" href="http://example.com/regular-season/" class="dropdown-item">Regular Season</a></li>
                </ul>
            </li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-139 nav-item"><a title="GALLERY" href="http://example.com/gallery/" class="nav-link">GALLERY</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-119 nav-item">
                <a href="http://example.com" class="nav-link"><img src="http://example.com/wp-content/uploads/2017/11/logo.png" class="hvr-bounce-in" width="250px"></a>
            </li>
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom menu-item-89 nav-item"><a title="Shop" href="#" class="nav-link">Shop</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-137 nav-item"><a title="CONTACT" href="http://example.com/contact/" class="nav-link">CONTACT</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-post_type menu-item-object-page menu-item-138 nav-item"><a title="FAQs" href="http://example.com/faqs/" class="nav-link">FAQs</a></li>
            <li class="hvr-underline-reveal menu-item menu-item-type-custom menu-item-object-custom menu-item-88 nav-item"><a title="Register" href="http://hoopshawaii.leagueapps.com/leagues" class="nav-link">Register</a></li>
        </ul>
    </div>
</div>
</nav>

1 Ответ

0 голосов
/ 27 мая 2018

Я бы посоветовал вам использовать bootstrap, это действительно облегчает вашу жизнь,

Однако вы можете делать некоторые трюки, используя медиа-запросы, создавать два меню, главное меню, мобильное меню, использовать что-то вроде @media screen.. .main-menu display: none.

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

http://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/

...