7 つのナビゲーション リンクを含む 1 ページの Web サイトを作成しようとしています。以下の私のフィドルを参照してください。
最初のナビゲーション リンクは左上隅にあり、今のところそのテキストは「ホーム」と呼ばれています。他の 6 つのリンクは、「中央」の div の下にあります。
私は次の効果を達成しようとしています:
- ホームページは常にランディング時に表示されます
- 「中央」の div の下にある 6 つのリンクは、次のロジックに応じて、画面の左側または右側から表示される必要があります。1 番目のトランジションは右側から画面に入り、2 番目のトランジションは左側から画面に入り、その後のすべてのトランジションは別の側に移動します。 .
- 各トランジションは、既存のコンテンツをオーバーラップさせるのではなく、画面から押し出す必要があります。
- ナビゲーション リンクがページ 1 からページ 6 まで順番に探索される場合、リンクがクリックされるたびに遷移が交互に行われます。私の現在のフィドルでは（正しく動作していませんが）、ページ1から6はすべて右側から画面に入り、6から1に戻ると、すべて左側から画面に入ります。これは私が探しているものではありません。左上のホームリンクを除いて、どのリンクがクリックされたかに関係なく、交互のサイドが必要です。
- 別のリンクのコンテンツを表示しているときにホーム リンクがクリックされると、トランジションが画面の上部から表示され、既存のコンテンツが画面の下部から押し出されます。この遷移は、他のすべての div の背後で発生する必要があります。ヘッダーとフッター。
誰かが私を助けることができれば、これにはかなりの時間と研究が必要だったので、本当に感謝しています.
これが私のhtmlです：
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
<a href="sign up url">Sign Up</a>
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
<a href="javascript:;" id="page1" class="links">Page 1</a>
<a href="javascript:;" id="page2" class="links">Page 2</a>
<a href="javascript:;" id="page3" class="links">Page 3</a>
<a href="javascript:;" id="page4" class="links">Page 4</a>
<a href="javascript:;" id="page5" class="links">Page 5</a>
<a href="javascript:;" id="page6" class="links">Page 6</a>
</div> <!--sub_footer-->
<div class="footer">
<p><a href="contactme.php" target="_blank">| Contact |</a>
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
ここに私のCSSがあります
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
これが私のjsです
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
これが私のフィドルです
ありがとう