/    Sign up×
Community /Pin to ProfileBookmark

Tab menu

Copy linkTweet thisAlerts:
Apr 10.2020

Hi, I have created a while ago a tab menu on my portfolio.
The problem now is that I feel like I could have been coded better…
What I did was to have all the div positioned absolute places 1 on top of each other and with JS remove and add a class that had opacity 0 and 1. [Here](https://codepen.io/raul-rogojan/pen/eYOzvRd?editors=0010) is a more specific example.

Do you have any idea on how I could structure my code and code this better?
Here is the portfolio: https://rogojan-raul-portfolio.netlify.com/

to post a comment
CSSHTMLJavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertApr 10.2020 — It is not the answer you want...

"Dead sea rolls" is IMHO not a good way to navigate. But it is just a personal opinion.

If it is used, I think it should always be a top navigation visible (or hamburger). Not only when scrolled down. And the anchors should stay at top. Not showing two sides.

But again, I have seen som good "dead sea rolls" but they are rare. Very rare... IMHO :-)
Copy linkTweet thisAlerts:
@codyhillauthorApr 11.2020 — @sibert#1617235 so how would you display a portfolio section?
Copy linkTweet thisAlerts:
@sibertApr 12.2020 — Just showing portfolio stuff. Nothing else. Not the bottom of previous section and top of the next.

Regardless if you use "dead-sea-rolls" or not - every page or section should show ONE content.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-04-12/1586672769-576874-image.png]

There is tons of examples on Google.

One not-so-popular example: https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...