Report Blog Entry
Using tabs with only html and css is tricky,
when clicked you navigate to the top of a hashed div strictly.
However;
If you add some clever margins and relatively place your links.
You can make a nice tabbed display that eloquently scrolls me thinks.
The panels stay hidden until you click an <a>.
The href is set to a div's id with a hash that way,
Your browser navigates to /profile#id and displays,
the divs with the info you'd like to convey.
There's comments in the code that should explain it mostly
But here's a link to the codepen so you can see it closely
And adding credit where credit is due,
I was inspired by this dude's clues.
<!-- Wrapper for whole element -->
<div class="panel-container">
<!-- Links/buttons that switch which panel is targeted -->
<a class="panel-button" href="#about">About Me</a>
<a class="panel-button" href="#interests">Interests</a>
<a class="panel-button" href="#music">Music</a>
<a class="panel-button" href="#meet">Meet</a>
<!-- This the panel that is displayed -->
<div class="panel" id="about" style="display: none">
<!-- This panel is used as a child element so that when
navigated to the page snaps tothe top of the parent ,
"panel", while giving enough space so that the user
can still see the navigation buttons.-->
<div class="panel-border">
</div>
</div>
<div class="panel" id="interests" style="display: none">
<div class="panel-border">
</div>
</div>
<div class="panel" id="music" style="display: none">
<div class="panel-border">
</div>
</div>
<div class="panel" id="meet" style="display: none">
<div class="panel-border">
</div>
</div>
</div>
<style>
/*========Panel Styles==========*/
.panel:target {
display: block !important;
}
/* move button down so that it is still visible when
page navigates to new target */
.panel-button {
position: relative;
top: 45px;
margin-top: -40px;
}
/* Push content down to adjust for button position */
.panel {
margin-top: 5px;
padding-top: 50px;
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )