Question

我最近购买了一个带有扩展侧边栏的模板，它从左侧滑出，如下所示：

enter image description here

但是，我需要将此菜单放在页面的右侧。

我已经找到了大部分代码工作。我让菜单从右侧滑出，但仍然有两个错误：

1）页面内容不会像应该的那样被推到左侧（菜单只是在内容的顶部滑出），因为

2）即使菜单现在在右侧，页面仍然是从左侧推送的。

看起来像这样：

enter image description here

我缩小了范围，我发现这段代码是导致页面内容仍然被推向右边的原因。不幸的是，我不太了解CSS知道这是什么或意味着什么：

.step-right {
    -webkit-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
    -moz-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
    -o-transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);
    transition:all 550ms cubic-bezier(0.645,0.045,0.355,1.000);

    /* easeInOutCubic */
    -webkit-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
    -moz-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
    -o-transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
    transition-timing-function:cubic-bezier(0.645,0.045,0.355,1.000);
    /* easeInOutCubic */
}

.step-right.active {
    -webkit-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
    -moz-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
    -o-transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);
    transition:all 450ms cubic-bezier(0.250,0.460,0.450,0.940);

    /* easeOutQuad */
    -webkit-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
    -moz-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
    -o-transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);
    transition-timing-function:cubic-bezier(0.250,0.460,0.450,0.940);

   /* easeOutQuad */
   -moz-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
   -webkit-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
   -o-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
   -ms-transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
   transform:scale(1) rotate(0deg) translate(250px,0px) skew(0deg,0deg);
}

以下是菜单的HTML：

<!-- Navigation header -->
<header class="main custom-scroll" style="">
<!-- #header-scrollarea adds custom scrollbar for header -->
<div id="header-scrollarea">

<!-- navigation -->
<nav class="main-nav">
<ul class="site-nav">
<!-- li class active for active page link add gumby-trigger=#id to target drawer with child navigation -->
    <li class="active"><a href="" class="toggle" gumby-trigger="#home-sub">Home<span>We Start Here</span></a>
        <ul id="home-sub" class="drawer">
            <li class="active"><a href="index.html">Home Default</a></li>
            <li><a href="home-two.html">Home Extended</a></li>
            <li><a href="home-work.html">Home Work / AJAX</a></li>
        </ul>
    </li>
    <li><a href="" class="toggle" gumby-trigger="#about-sub">Studio<span>Read More About Us</span></a>
        <ul id="about-sub" class="drawer">
            <li><a href="about.html">About Us</a></li>
            <li><a href="about-alt.html">About Us Alt</a></li>
        </ul>
    </li>
    <li><a href="" class="toggle" gumby-trigger="#work-sub">Portfolio<span>Some Recent Work</span></a>
        <ul id="work-sub" class="drawer">
            <li><a href="folio-stripe.html">Folio Stripe</a></li>
            <li><a href="folio-grid.html">Folio Grid</a></li>
            <li><a href="folio-grid-alt.html">Folio Grid Alt</a></li>
            <li><a href="folio-single.html">Folio Single</a></li>
            <li><a href="folio-single-alt.html">Folio Single Alt</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Contact<span>Get In Touch With Us</span></a></li>
</ul>
</nav>
</div>
</header>

<!-- back to top button displays after 850px vertical scroll value in ../js/main.js -->
<div class="back-to-top">
    <a id="top-trigger">
    <i class="fa fa-angle-up"></i>
    </a>
</div>
</div>

<!-- Main content block - all page content -->
<div class="content custom-scroll">
<!-- blocker active with active header -->
<div class="blocker">
</div>
<!-- #scrollarea adds custom scrollbar for main content -->
<div id="scrollarea">
    <!-- action class for animating page content when header is active -->
    <div class="action step-right">
        <!-- superslides -->
        <section class="home-slider">
            <!-- #crumbs for page title bar and top navigation add abs class to make crumbs stick to top(background slideshow) -->
            <div id="crumbs" class="abs">
                <div class="row large dark">
                <div class="six columns">
                    <!-- page title/statement -->
                    <h6 class="sub-heading"></h6>
                </div>
                <div class="six columns text-right">
                    <!-- top on-page nav -->
                    <ul class="nav-icon-list">
                        <li><a class="search-btn"><span>Search</span></a></li>
                        <li><a class="search-btn"><span>Search</span></a></li>
                        <li><a class="search-btn"><span>Search</span></a></li>
                    </ul>
                    <!-- header trigger -->

                    <div class="trigger">
                        <div class="trigger-box">
                            <a class="toggle" gumby-trigger="header.main" id="trigger">
                            <i class="fa fa-bars active"></i>
                            <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

任何人都可以帮我修复此代码，以便将页面内容推向左侧吗？非常感谢帮助！

将边栏菜单更改为右侧

0 个答案: