Request for help with creating links in dropdown menu in personal portfolio

HTML-CSS
1

Hello. I’m almost finished with my personal portfolio and have one more change to make. I’m trying to create a drop down menu which becomes activated when the width of the screen is 995px. The dropdown menu appears beautifully, but I’m unsure of how to create links (that work) that will take me down to each section of my portfolio. The html for the dropdown menu is here:

    <select>
      <option value="" selected ="selected">Select</option>
      <option value="#s1">About</option>
      <option value="#s2">Experience</option>
      <option value="#s3">Education</option>
      <option value="#s4">Projects</option>
      <option value="#s5">Skills</option>
      <option value="#s6">Contact</option>
    </select>

The link to my personal portfolio is here: https://codepen.io/ksirgey/pen/zaMQdB?editors=1100

I hope I’ve explained the problem clearly enough. Please let me know if I need to explain it in more detail. Thanks a lot.

2

Hi,
This is a very good looking portfolio.

1 Like
3

Hi @ksirgey

First of all the design looks very nice, and the problem you are facing is common, the basic structure of a navigation link whether its top bar or sidebar, it has a basic structure :

<ul>
    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a></li>
</ul>

From this structure you can navigate through the sections as you wish through href="#s1"
From this you can make a navigationbar using flex properties and also you can adjust the width and make it as a sidebar with a "menubar" icon

4

@Sujith3021 Thank you for actually answering the question.

@ksirgey I’m sorry I missed that. I still think it looks good. It will be even better following @Sujith3021’s advice.

5

This article has an interesting history of the two techniques to use anchors to link to something on the page. The preferred method is using an id…

And CSS-tricks has a great discussion on different ways to do the nav ‘lists’

Check out the associated links at the bottom for further discussions…

6

Thank you for sharing. I recently read that <a name> is not used in HTML5, and that is one reason the Id is placed in a section or div.

1 Like
7