*MENU色の変更
https://www.jqueryscript.net/animation/jQuery-Based-One-Page-Scroll-Web-Template-smooth-scroll-js.html
smooth-scroll.js is a jQuery plugin which makes it easy to create a one page scrolling website/web application with a sticky header navigation. Clicking on the menu item will scroll the webpage into its corresponding content section with a smooth scrolling effect.
1
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="smooth-scroll.js"></script>
2
<div class="main"> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#gallery"><a href="https://www.jqueryscript.net/gallery/">Gallery</a></a></li> <li><a href="#info">Info</a></li> <li><a href="#contacts">Contacts</a></li> </ul> </nav> <section id="home"><h2>home</h2></section> <section id="about"><h2>about</h2></section> <section id="gallery"><h2>gallery</h2></section> <section id="info"><h2>info</h2></section> <section id="contacts"><h2>contacts</h2></section> </div>
3
* { box-sizing: border-box } .main { position: relative; max-width: 960px; background-color: #e3e3e3; margin: 10px auto; padding: 20px 10px; } .main nav { position: fixed; width: auto; margin-left: -20px; margin-top: -20px; padding: 10px; text-align: center; background-color: #34495e; box-shadow: 0 1px 5px rgba(0,0,0,0.3); } .main nav:before { content: ""; display: block; position: absolute; bottom: -10px; left: 0; width: 10px; height: 10px; -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0); background-color: #4A6988; z-index: -1; } .main ul { padding: 0; margin: 0; } .main nav li { display: inline; margin: 10px; list-style-type: none; width: 100%; } .main nav a { text-decoration: none; color: #fff; text-transform: uppercase; font-size: 1.1em; display: inline-block; } section { padding-top: 10px; height: 500px; width: 100%; background-color: #B2B2B2; margin: 20px 0; } section h2 { color: #fff; text-align: center; font-size: 30px; text-transform: uppercase; } #home { background-color: #27ae60; } #about { background-color: #2980b9; } #gallery { background-color: #8e44ad; } #info { background-color: #e67e22; } #contacts { background-color: #e74c3c; }