如何更改导航菜单悬停以在Wordpress管理员中单击?

时间:2018-06-09 11:17:32

标签: javascript css wordpress

我正在更改Wordpress管理菜单,而不是在悬停时向右侧打开菜单项的子菜单,而是打开父项目下方的下拉列表。我已经为此做了所有必要的CSS更改,除了它仍然只用光标悬停打开,并且也不会保持打开状态。

我需要将管理菜单下拉列表更改为点击而不是悬停。

有人可以建议这里需要的任何JavaScript吗? - 或者CSS,如果合适的话?

非常感谢

一个菜单项的示例代码:

<li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-appearance menu-top-last" id="menu-appearance">
<a href="nav-menus.php" class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-appearance menu-top-last" aria-haspopup="true">
    <div class="wp-menu-arrow">
        <div></div>
    </div>
    <div class="wp-menu-image dashicons-before dashicons-admin-appearance"><br></div>
    <div class="wp-menu-name">Appearance</div>
</a>
<ul class="wp-submenu wp-submenu-wrap" style="">
    <li class="wp-submenu-head ws-nmh-is-new-menu" aria-hidden="true">Appearance
        <span class="ws-nmh-new-menu-flag" data-nmh-menu-url="themes.php"></span>
    </li>
    <li class="wp-first-item">
        <a href="nav-menus.php" class="wp-first-item">Menus</a>
    </li>
    <li class="">
        <a href="themes.php?page=update-theme-options">Theme Options</a>
    </li>
    <li class="">
        <a href="themes.php?page=import-theme-options">Import Theme Options</a>
    </li>
    <li class="">
        <a href="themes.php?page=export-theme-options">Export Theme Options</a>
    </li>
    <li class="">
        <a href="themes.php">Themes</a>
    </li>
    <li class="hide-if-no-customize">
        <a href="customize.php?return=%2Fwp-admin%2Fadmin.php%3Fpage%3Dwpda_vertical_menu_themes" class="hide-if-no-customize">Customise</a>
    </li>
    <li>
        <a href="widgets.php">Widgets</a>
    </li>
</ul>

自定义CSS以及Wordpress现有的CSS:

.wp-menu-arrow {
    display: block !important;
}
#adminmenu li.wp-has-submenu .wp-menu-arrow div::before {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
#adminmenu .wp-has-submenu .wp-menu-arrow div::before {
    content: "\f345";
    color: #adb5bd;
    position: absolute;
    right: 7px;
    top: 13px;
    font-family: dashicons;
    transition: ease-in-out 0.3s;
}
#adminmenu li.wp-has-submenu.opensub .wp-menu-arrow div::before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    color: #FFF;
}
#adminmenu .wp-submenu.wp-submenu-wrap {
    display:block;
}
#adminmenu .opensub .wp-submenu, #adminmenu .wp-menu-open .wp-submenu {
    position: relative;
    height: 100%;
    top: 0px;
    margin-top: 0px !important;
    left: 0;
    text-align: left;
}
#adminmenu .wp-submenu {
    margin-left: 0px;
    box-shadow: none;
}
#adminmenu .wp-not-current-submenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu {
    min-width: 220px;
    width: auto;
}
#adminmenu .wp-submenu .wp-submenu-head {
    padding: 20px 20px 10px;
}

0 个答案:

没有答案