Question 45273 in Html Question posted in
Some basic documentation can be found here.

How to set position of vertical html menu element on page load

I am developing a website with 30 pages. Each page has two columns: a vertical scrolling menu in the left column and the page content in the right column. Each page has the same html code for the menu:

<div class="nav-scroll-menu">
        <a href="page1.html" class="nav-menu-item">
          Page 1</a>
        <a href="page2.html" class="nav-menu-item">
          Page 2</a>
        <a href="page3.html" class="nav-menu-item">
          Page 3</a>

You can see about 7 or 8 menu items before you have to scroll down to see the rest.

When I scroll down the menu to, say, page 20 and click on the link to take me to page 20, page 20 loads but the menu loads with the first menu link (page 1) at the top. This means that the page 20 menu link is hidden and you need to scroll down to see it.

I would like to have each page load so that its menu link is visible in the menu column.

I thought of giving each menu link an id and then linking to the id. But that would need an href to the id and I’ve already got the href pointing to the page address!

Do I have to resort to Javascript (if so how?), or is there some obvious html/css solution?

Any advice would be appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just figured it out!

    <a href="pageA.html#pageA" class="nav-menu-item" id="pageA">

    etc.


  2. 0

    I think you can use the scrollTop attribute of the element to scroll the menu item to a certain position, provided that you need to calculate how far to scroll, and the calculation of this distance can be calculated according to the page number and the height of the menu item.

    When you click a menu item, you can get the number of menu items.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search