0

我需要一些有关如何完成此操作的帮助/指导，我要做的是在单击单个链接后使 div 从左侧滑出到右侧。但到目前为止，我正在努力解决它，所以我的问题是如何做到这一点？

这就是我到目前为止所拥有的。

CSS：

.main-header {
  width: 1020px;
  height: 50px;
  background: #555;
  border: 2px solid #444;
  border-top: none;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    border-radius: 0 0 25px 25px;
    -moz-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
  position: fixed;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  top: 0;
}
.main-header h1 { width: 1020px; float: left; text-align: center; }
.toggle-menu {
  width: 44px;
  height: 44px;
  padding: 6px 0 0 12px;
  margin: 0;
  border-right: 2px solid #444;
  position: absolute;
  top: 0;
  color: #FFF;
  font-size: 26px;
  text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9);
  cursor: pointer;
}
.page-wrap { float: left; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
.main-nav-check { display: none; }
.main-nav {
  width: 0;
  position: fixed;
  top: 100px;
  overflow: hidden;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.main-nav .default_logo {
  width: 150px;
  height: 120px;
  padding: 0;
  margin: 0 0 0 15px;
  background: url(../images/Profiles/default_logo1.png) no-repeat 0 0;
  border: 2px solid #444;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
  float: left;
}
.main-nav a {
  padding: 5px 15px;
  margin: 0 0 0 169px;
  border-bottom: 1px solid #444;
  display: block;
  position: relative;
  top: 12px;
  color: #15ADFF;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9);
}
.main-nav a:hover, .main-nav a:focus { background: rgba(204, 204, 204, 0.2); border-right: 7px solid #15ADFF; color: #111; }
#main-nav-check:checked + #main-nav { width: 350px; }
.close-menu { display: none; }
#main-nav-check:checked ~ .page-wrap .open-menu { display: none; }
#main-nav-check:checked ~ .page-wrap .close-menu { display: block; }

HTML：

<input type="checkbox" class="main-nav-check" id="main-nav-check" />
            <nav class="main-nav" id="main-nav">
                <div class="default_logo"></div>
            <a href="#">Profile Settings</a>
            <a href="#">Recent Updates</a>
                        <a href="#logoff">Sign Out</a>
            </nav>
            <div class="page-wrap">
                <header class="main-header">
                <label for="main-nav-check">
                        <div class="toggle-menu" title="Options">☰&lt;/div>
                    </label>
            </header>
            </div>

如果我单击左侧的链接，比如“配置文件设置”，我正在尝试将其设置为，一个新的 div 会打开并滑出到右侧。一旦从左侧单击链接，我将需要在右侧 div 中显示内容的每个单独链接，但我正在努力解决它。如果有人可以提供 jsfiddle，我将不胜感激和/或回复额外的代码以使这项工作正常进行，我将再次非常感谢。

这是我到目前为止所拥有的 jsfiddle：http: //jsfiddle.net/xP9wy

4

2 回答 2

1

试试这个改变 http://jsfiddle.net/xP9wy/4/

HTML

   <nav class="main-nav" id="main-nav">
         <div class="leftside"> 
                        <div class="default_logo"></div>
                        <a href="#profile" class="head">Profile Settings</a>
                        <a href="#updates" class="head">Recent Updates</a>
                        <a href="#logoff">Sign Out</a>
         </div>

            <div class="rightside">
                <div id="profile" class="section"> profile </div>
                <div id="updates" class="section"> updates</div>                   
            </div>
    </nav>

CSS

#main-nav-check:checked + #main-nav { width: 750px; }

.leftside{
 float:left;
 width: 350px;   

}

.rightside{
   margin-top:5px;
   float:right;
   width:350px;
}

.rightside .section{

    border:#ccc 1px solid;
    display:none;
    margin-left:10px;
    padding:10px;
}

Javascript

$(document).ready(function(){
    $('a.head').click( function(){
       var a = $(this) ;
       var section = $( a.attr('href') );
       section.removeClass('section');
       $('.section').hide();
       section.addClass('section');

        if(! section.is(':visible') ){
              section.fadeIn(500);
        };
    });

});
于 2013-08-12T23:30:00.367 回答
0

我的示例并不完美，主要是 css，但我认为这与您正在寻找的内容相符。

jsFiddle在这里

主要思想是使用 jQuery 的.append()方法将新元素附加到 DOM，然后使用标准的 jQuery 选择器和方法（在链中）根据需要重新定位。

$('.page-wrap').append('<div id="proset"></div>');

和

$('#proset')
    .hide()
    .css({
        'background-color':'yellow',
        'position':'absolute',
        'left':'150',
        'padding':'20px 10px',
    })
    .html('Click in Me')
    .slideDown(1500);

请注意，由于注入了新元素，因此您必须使用.on()事件处理程序来捕获点击事件等。

这里有一些链接可以为动画添加一些额外的 jQuery sparkle：

滑动元件

各种动画

于 2013-08-12T23:23:12.220 回答