html - HTML - 水平滑块CSS最佳方法

105 1


#all-sections{


 display:inline-flex;


}


.main, .about, .professional, .fun-stuff, .blog, .contact{


height:100vh;


position: relative;


display:block;


width:100vw;


}



.main{


 background-color:white;


 transform: translateX(0%);


}



.about{


 background-color:red;


 transform: translateX(-100%);


}



.professional{


 background-color:purple;


 transform: translateX(-200%);


}



.fun-stuff{


 background-color:black;


 transform: translateX(+100%);


}



.blog{


 background-color:blue;


 transform: translateX(+200%);


}



.contact{


 background-color:rgb(1, 235, 21);


 transform: translateX(+300%);


}

<section id="all-sections">


<section class="main">


<header>


<ul id="menu-list">


 <button onclick="toAbout()" id="about">About</button>


 <button onclick="toProf()" id="professional">Professional</button>


 <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>


 <button onclick="toBlog()" id="blog">Blog</button>


 <button onclick="toContact()" id="contact">Contact</button>


</ul>


</header>


</section>



<section class="about"></section>



<section class="professional"></section>



<section class="fun-stuff"></section>



<section class="blog"></section>



<section class="contact"></section>

时间: 原作者:

85 3

由于每个部分的位置已经设置为relative,意味着将relative定位到上一节,因此可以将其他部分设置为left: 0


* {


 margin: 0;


}



#all-sections{


 display:inline-flex;


}


.main, .about, .professional, .fun-stuff, .blog, .contact{


 height:100vh;


 position: relative;


 left: 0


 display:block;


 width:100vw;


}



.main{


 background-color:white;


}



.about{


 background-color:red;


}



.professional{


 background-color:purple;


}



.fun-stuff{


 background-color:black;


}



.blog{


 background-color:blue;


}



.contact{


 background-color:rgb(1, 235, 21);


}

<section id="all-sections">


<section class="main">


<header>


<ul id="menu-list">


 <button onclick="toAbout()" id="about">About</button>


 <button onclick="toProf()" id="professional">Professional</button>


 <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>


 <button onclick="toBlog()" id="blog">Blog</button>


 <button onclick="toContact()" id="contact">Contact</button>


</ul>


</header>


</section>



<section class="about"></section>



<section class="professional"></section>



<section class="fun-stuff"></section>



<section class="blog"></section>



<section class="contact"></section>

如果希望导航栏始终可见,可以将该元素设置为position: fixed,它不会在滚动时移动。


#menu-list {


 position: fixed;


 z-index: 9999;


}



* {


 margin: 0;


}



#all-sections{


 display:inline-flex;


}



.main, .about, .professional, .fun-stuff, .blog, .contact{


 height:100vh;


 position: relative;


 left: 0


 display:block;


 width:100vw;


}



.main{


 background-color:white;


}



.about{


 background-color:red;


}



.professional{


 background-color:purple;


}



.fun-stuff{


 background-color:black;


}



.blog{


 background-color:blue;


}



.contact{


 background-color:rgb(1, 235, 21);


}

<section id="all-sections">


<section class="main">


<header>


<ul id="menu-list">


 <button onclick="toAbout()" id="about">About</button>


 <button onclick="toProf()" id="professional">Professional</button>


 <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>


 <button onclick="toBlog()" id="blog">Blog</button>


 <button onclick="toContact()" id="contact">Contact</button>


</ul>


</header>


</section>



<section class="about"></section>



<section class="professional"></section>



<section class="fun-stuff"></section>



<section class="blog"></section>



<section class="contact"></section>

原作者:
...