[英]How do I add content (writings) to my website apart from my side navigation bar?
[英]How do I add a 'fill up' dot navigation style vertically on my html/css website
我正在创建我的第一个 html css 网站,并想在我的页面上垂直添加“填充”点导航样式,以便我的访问者知道他们在哪个页面上。
查看我链接的网站以进行澄清。
https://tympanus.net/Development/DotNavigationStyles/
我认为我应该使用 js,但我不知道如何将它实际编码到我的网站中。
这是我的网站代码。
HTML:
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
</section>
我的部分示例以指示布局和页面更改。
CSS:
.container{
widows:100%;
height:100%;
/* CSS Smooth Scroll */
overflow-y:scroll;
scroll-behavior:smooth;
scroll-snap-type:y mandatory;
}
.navbar{
position:fixed;
top:0;
z-index:1;
display:flex;
width:100%;
height:60px;
background:rgba(0,0,0,0.7);
}
.navbar ul{
display:flex;
list-style:none;
width:100%;
justify-content:center;
}
.navbar ul li{
margin:0 1rem;
padding:1rem;
}
我要添加什么 JS 代码以及如何将其链接到 HTML 和 CSS?
如果我单击第二个点,它会填满,进入该页面然后取消填充,但第一个点保持红色(活动),因此它们不是过渡。
在我的 html 中为点:
<script src="dot-nav.js"></script>
在我的 js 文件中
// listen for clicks on the navbar
document.querySelector('.navbar').addEventListener('click', (e) => {
// ignore it if the click isn't on an anchor element
if (e.target.tagName.toLowerCase() === 'a') {
// remove the 'active' class from all of the nav anchors
document.querySelectorAll('.navbar a')
.forEach(e => e.classList.remove('active'));
// add the 'active' class to the clicked element
e.target.classList.add('active');
}
});
CSS 为点:
/* position the navbar center right */
.navbar{
position:fixed;
right:32px;
top:50%;
transform: translateY(-50%);
}
/* style the individual nav items */
.navbar a {
/* make them little circles */
display: block;
border-radius: 50%;
border: 1px solid white;
width: 20px;
height: 20px;
/* with some space between them */
margin: 20px 0;
/* hide the text content */
text-indent: -999px;
overflow: hidden;
/* establish positioning conext for the ::after pseudo-elements (below)*/
position: relative;
}
/* the "fill" */
.navbar a::after {
/* won't render without a 'content' rule */
content:"";
/* red fill */
background-color: #ff0000;
/* zero height until it's active */
position: absolute;
bottom: 0;
height: 0;
left: 0;
right: 0;
width: 100%;
/* animate the height when it changes */
transition: height 0.3s ease;
}
/* active and hovered elements */
.navbar a:hover::after,
.navbar a.active::after {
/* change the height to 100%.
the transition rule above will cause this to animate */
height: 100%;
}
这是我认为您所要求的基本实现。
javascript 仅用于添加/删除active
的 css class。 一切都在 CSS 中真正发生。 我在代码中添加了注释来解释它是如何工作的,但是如果您有任何问题,请随时联系我。
// listen for clicks on the navbar document.querySelector('.navbar').addEventListener('click', (e) => { // ignore it if the click isn't on an anchor element if (e.target.tagName.toLowerCase() === 'a') { // remove the 'active' class from all of the nav anchors document.querySelectorAll('.navbar a').forEach(e => e.classList.remove('active')); // add the 'active' class to the clicked element e.target.classList.add('active'); } });
html, body { font-family: sans-serif; letter-spacing: 2px; margin: 0; padding: 0; } ul { list-style: none; padding: 0; margin: 0; } /* position the navbar center right */.navbar { position: fixed; right: 32px; top: 50%; transform: translateY(-50%); } /* style the individual nav items */.navbar a { /* make them little circles */ display: block; border-radius: 50%; border: 1px solid white; width: 20px; height: 20px; /* with some space between them */ margin: 20px 0; /* hide the text content */ text-indent: -999px; overflow: hidden; /* establish positioning conext for the::after pseudo-elements (below)*/ position: relative; } /* the "fill" */.navbar a::after { /* won't render without a 'content' rule */ content: ''; /* white fill */ background-color: #fff; /* zero height until it's active */ position: absolute; bottom: 0; height: 0; left: 0; right: 0; width: 100%; /* animate the height when it changes */ transition: height 0.3s ease; } /* active and hovered elements */.navbar a:hover::after, .navbar a.active::after { /* change the height to 100%. the transition rule above will cause this to animate */ height: 100%; } /* make the sections occupy the full screen height */ section { height: 100vh; background: tomato; color: bisque; display: grid; place-items: center; }
<div class="container"> <nav class="navbar"> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="home">home</section> <section id="about">about</section> <section id="services">service</section> <section id="contact">contact</section> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.