Question

在Word Press主题（redxunlite）中将水平导航栏转换为垂直导航栏

HTML

<nav id="redxunlite-navigation" class="main-navigation animated nav-down swingInX" role="navigation">

    <div class="container">
        <a class="blog-text" href="http://10.65.2.15/tsg/" rel="home">TSG Client Management System</a>

        <ul class="mobile-menu">
            <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-35"><a href="http://10.65.2.15/tsg/">MTS Clients</a></li>
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://10.65.2.15/tsg/ncss/">NCSS Clients</a></li>
            <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://10.65.2.15/tsg/article/">Inventory Sheet</a></li>
        </ul>

        <ul class="main-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-35"><a href="http://10.65.2.15/tsg/">MTS Clients</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://10.65.2.15/tsg/ncss/">NCSS Clients</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://10.65.2.15/tsg/article/">Inventory Sheet</a></li>
        </ul>

        <div class="toggles">
            <div class="nav-toggle toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- /toggles -->
        <div class="clearfix"></div>

    </div>
</nav>

以下是相关导航栏上应用的HTML。请在这方面帮助我，以便我们管理

CSS

.main-navigation {
  color: #111;
  background: #fff;
  width: 100%;
  z-index: 9999;
  position: fixed;
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1);
  top: 0;
  /* transition: top 0.3s ease-in-out; */
  min-height: 64px;
  -webkit-transition: all 150ms ease 0;
  -moz-transition: all 150ms ease 0;
  -o-transition: all 150ms ease 0;
  -ms-transition: all 150ms ease 0;
  transition: all 150ms ease 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
main, nav, section, summary {
  display: block;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section, summary {
  display: block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  font-size: 16px;
  line-height: 1.6;
  overflow-x: none;
  font-family: Roboto, Georgia;
  height: 100%;
  max-height: 100%;
  color: #424242;
  font-weight: 400;
  background: #fff;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

如何通过CSS进行垂直导航。我们可以将水平导航栏转换为wordpress主题中的垂直导航栏

将水平导航栏转换为Word Press主题中的垂直导航栏（redxunlite）

0 个答案: