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

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 スパークルを追加するためのリンクを次に示します。

スライド要素

さまざまなアニメーション

于 2013-08-12T23:23:12.220 に答える