Good morning,
I would like to create a link for each item in my menu on the same page, like this:
<a href="#about">About</a>
and then: <section class="About" id="about">
The problem is that I’m a novice and I can’t do it on my page: https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO
I would like to do it for my menu here is my source code:
<ul>
<li>Home</li>
<li>Coffee</li>
<li>Online Store</li>
<li>About us</li>
<li>Contact us</li>
</ul>
And css
header ul {
display: flex;
align-items: center;
gap: 20px;
color: white;
list-style: none;
}
header ul li {
position: relative;
cursor: pointer;
}
header ul li::after {
content: "";
position: absolute;
width: 0;
height: 2px;
background-color: var(--lightdark);
top: 100%;
left: 50%;
transform: translateX(-50%);
transition: 0.2s width;
}
header ul li:hover::after {
width: 100%;
}
Can you help me ?
thank you
PaulOB
June 10, 2024, 4:09pm
2
Assuming all the links were pointing to elements in the same page you would do this.
<header>
<div class="logo">
Coffee <img src="assets/logo.png" alt="">Beans
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#coffee">Coffee</a></li>
<li><a href="#online">Online Store</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
<div class="buttons">
<button class="shop-cart">
<i class="fa-solid fa-cart-shopping"></i>
</button>
</div>
</header>
Then you would need to add a matching id to the element you want to travel to.
Here it is for the coffee and about IDs.
<div class="footer-col">
<h4 id="coffee">Coffee</h4>
<ul>
<li><a href="#">African Coffee</a></li>
<li><a href="#">Central Amercian Coffee</a></li>
<li><a href="#">South Amercian Coffee</a></li>
</ul>
</div>
<div class="footer-col">
<h4 id="about">company</h4>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
I added the id to the h4 in that section i.e. <h4 id="coffee">Coffee</h4>
Now when you clink the link in the header (<li><a href="#coffee">Coffee</a></li>) you will travel to that section.
Note you will have to style the anchors in the header to white.
e.g.
header ul li a {
color: #fff;
text-decoration: none;
}
Its also a good idea to temporarily highlight the :target section you travel to which you can do that like this:
h4:target {
animation:fade 5s;
}
@keyframes fade {
0% {
background:var(--deepdark);
}
}
Lastly because the jump to link is instant it can be disconcerting for viewers so you can add a small scroll to the target with the following code:
html,body{
scroll-behavior: smooth;
}
2 Likes
Thank you for your help.
I did like this: https://codepen.io/aaashpnt-the-sans/pen/eYaEGPO
On the other hand, to put in place the content of each item on my menu, what is the best solution?
Can you help me with one of my menu items for example this one “Coffee” and like that I can try to do the others.
A big thank you to you because for me it is not easy to set up.
PaulOB
June 10, 2024, 5:16pm
4
If you want to add a new section called coffee then you would do it like this:
<section class="section" id="coffee">
<h2>This is the Coffee section</h2>
stuff....
</section>
Then you would call it like I said before.
<li><a href="#coffee">Coffee</a></li>
The href="#coffee" sends the browser down the page to find an id of coffee which it finds here.
<section class="section" id="coffee">
I’ve fleshed it out a bit and put it in a codepen.
There are other issues you need to consider such as your page getting wider and wider which on my monitor is about 2500px wide and much too spread out. generally you would set a max-width to section so that people can read things more easily. The coffee section I added has a max-width inner element to stop the text going all the way across my 2500px monitor.
Also your review section seems to overlap everything so not sure what you were trying to do there. Absolute positioning should be avoided for content sections that are fluid.
Lastly I notice you are cutting half the screen off with overflow:hidden on smaller window sizes so that will need addressing at some time.
1 Like
Thank you for your help.
For the sections I understood.
On the other hand, for the home link "
Home " the best is to reload the page or do something else because I know that there is a way to do it like this "
<a href="#home" class="active">Home</a> how to set this up?
As for the size for the screen, I don’t know how to do it either because unfortunately I’m a novice and I’m trying to do the best I can.
Thank you for your help.
PaulOB
June 10, 2024, 6:34pm
7
To go to the top of the page you can add an id to the body tag and then the page will scroll back up.
e.g.
<body id="home">
<header>
<div class="logo">
Coffee <img src="assets/logo.png" alt="">Beans
</div>
<ul>
<li><a href="#home">Home</a></li>
etc...
1 Like
Thanks to you, it works.
How can I make each section on one screen and not all the sections visible?
here is my source
PaulOB
June 10, 2024, 8:26pm
11
You don’t need to keep repeating all the styles for those sections. Use the section class on all of them and just use the additional section2 and section3 classes for the different backgrounds.
e.g.
<section class="section" id="coffee">
... etc ...
<section class="section section2" id="onlinestore">
... etc ...
<section class="section section3" id="about">
Then the css just becomes this.
/* coffee section in page link */
html,
body {
scroll-behavior: smooth;
}
.section:target {
animation: fade 5s;
}
@keyframes fade {
0% {
background: var(--deepdark);
}
}
.section {
min-height:calc(100vh - 4rem);
background: #000;
color: #fff;
padding: 2rem 1rem;
scroll-margin-top: 4rem;
}
.section h2 {
text-align: center;
}
.inner {
max-width: 1280px;
margin: auto;
}
/* onlinestore section in page link */
.section2 {
background: var(--deepdark);
}
/* about section in page link */
.section3 {
background: #000;
}
To get it viewport height I added this rule in the above.
.section {
min-height:calc(100vh - 4rem);
}
That will make it fill the viewport apart from its scroll margin top which is needed to stop it going over the fixed header.
1 Like
I did like this but I think my color scheme is not great.
What color schemes would you use for the sections?
/* coffee section in page link */
html,
body {
scroll-behavior: smooth;
}
.section:target {
animation: fade 5s;
}
@keyframes fade {
0% {
background: var(--deepdark);
}
}
.section {
min-height: calc(100vh - 4rem);
background: var(--deepdark);
color: #fff;
padding: 2rem 1rem;
scroll-margin-top: 4rem;
}
.section h2 {
text-align: center;
}
.inner {
max-width: 1280px;
margin: auto;
}
/* onlinestore section in page link */
.section2 {
min-height: calc(100vh - 4rem);
background: var(--moredeep);
color: #fff;
padding: 2rem 1rem;
scroll-margin-top: 4rem;
}
.section2 h2 {
text-align: center;
}
/* about section in page link */
.section3 {
min-height: calc(100vh - 4rem);
background: var(--deepdark);
color: #fff;
padding: 2rem 1rem;
scroll-margin-top: 4rem;
}
.section3 h2 {
text-align: center;
}
system
September 10, 2024, 2:01pm
15
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
