Css 将侧边栏菜单更改为右侧

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

然而，我需要这个菜单在我的页面的右侧

我已经解决了大部分代码工作。我将菜单从右侧滑出，但仍有两件事出错：

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

2即使菜单现在位于右侧，页面仍从左侧推送

看起来是这样的：

我已经缩小了范围，并且我发现这段代码是导致页面内容仍然向右推的原因。不幸的是，我对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>

有人能帮我修复这个代码，这样页面内容就会被推到左边吗？

---

非常感谢您的帮助

你住在哪里？您发布的CSS只是幻灯片操作，不知道模板上使用的类，我们无法提供太多帮助。是的，就是这样^Thank@HelioBentzen。我只需要弄清楚如何从右到左推送所有内容。你有一些url向我们展示预览吗？好的，我不确定我是否完全理解JSFIDLE，但我包含了与侧边栏相关的所有代码：