将垂直导航更改为水平页面导航

Question

我试图修改一个垂直scrool到水平scrool的网页。我在css文件中添加了overflow-y：hidden;在体内但似乎还不够。您对如何进行此修改有任何想法。

这里是HTML结构：

<span id="s1"></span>  
<span id="s2"></span>  
<span id="s3"></span>  

<!-- the big container -->  
<div id="wrap">  

    <!-- navigation -->  
    <ul id="nav">  
        <li><a href="#s1">Splash</a></li>  
        <li><a href="#s2">Lorem Schnapsum</a></li>  
        <li><a href="#s3">Credits</a></li>  
    </ul>  

    <!-- slide 1 -->  
    <div id="slide1">  
        <div class="slide_inside">  

        </div> <!-- /.slide_inside-->         
    </div> <!-- /#slide1 -->  

    <!-- slide 2 -->  
    <div id="slide2">  
        <div class="slide_inside">  

        </div> <!-- /.slide_inside-->             
    </div> <!-- /#slide2 -->  

    <!-- La slide 2 -->  
    <div id="slide3">  
        <div class="slide_inside">              

        </div> <!-- /.slide_inside-->         
    </div> <!--  /#slide3 -->  
</div>

这里是CSS：

/* General */
body {
overflow-y: hidden;
    margin: 0;
    padding: 0;
    color:#fff;
    font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: #000;
}

h2 {
    margin-top:0;
    font-size: 2em;
    font-weight:bold;
    color: #eca603;
}

a {
    font-weight:bold;
    color:#fff;
}


/* Wrapper */
#wrap {

    position: relative;
    top:0;
    -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    -ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    -o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}


/* Nav */
#nav {
    position: fixed;
    top: 0; left:0; right: 0;
    padding: 1em 0;
    margin:0;
    background: #000;
    text-align:center;
    font-size: 1em;
    z-index:10;
}
#nav li {
    display: inline;
    margin:0;
}
#nav a {
    display: inline-block;
    margin: 0 3em;
    color: #eee;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 0 5px #fff;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}


/* slides */
#slide1, #slide2, #slide3 {
    height: 1000px;
    padding-top:100px;
    -webkit-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1);
    -moz-transition: background-position 1.4s cubic-bezier(.49,.22,.52,1.35);
    -ms-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
    -o-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
    transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}

#slide1 { background:url(images/slide1-bg.jpg) center 0 no-repeat fixed; }
#slide2 { background: url(images/slide2-bg.jpg) center 0 no-repeat fixed; }
#slide3 { background: url(images/slide3-bg.jpg) center 0 no-repeat fixed; }


/* Slides contents */
.slide_inside {
    width: 770px;
    margin: 0 auto;
    position: relative;
    background-color: rgba(0, 0, 0, .6);
    padding: 50px;
}

#slide1 .slide_inside {
    text-align: center;
    background-color: transparent;
}
#slide2 .slide_inside p {
    width: 500px;
    text-align: justify;
}
#slide3 .slide_inside {
    margin-top: 50px;
}


/* Troopers & clone */

#trooper, #clone {
    position: absolute;
    left:-180px; top: 300px;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -moz-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -ms-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    -o-transition: all 1.4s cubic-bezier(.49,.22,.52,1);
    transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
#clone {
    left: -280px;
    top: 400px;
}


/* targeted elements */

#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; -webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: -280px; top: 300px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg); }

#s2:target ~ #wrap { top:-1000px; }
#s2:target ~ #wrap #nav li:first-child + li a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
#s2:target ~ #wrap #trooper { left: -180px; top: -100px; -webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-ms-transform: rotate(-7deg);-o-transform: rotate(-7deg);transform: rotate(-7deg); }
#s2:target ~ #wrap #clone { left: -350px; top: 50px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg);transform: rotate(0deg); }


#s3:target ~ #wrap { top:-2150px; }
#s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -800px;-webkit-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-ms-transform: rotate(-15deg);-o-transform: rotate(-15deg);transform: rotate(-15deg); }


/* some social styles */

.fb-like { top: -5px; }
.or_follow { display: inline-block; vertical-align:top; margin-left: 135px; margin-right: 5px; }