drop down menu in a sharepoint new site page

Question

Hello, Is it possible to create a dropdown menu like the one in the image below on a new site page? Currently, what I am doing is creating a web link on the new page, and to go to the next level , I create a new page and link it, and for the next level, I also create a new page and connect it with a web link so that I can create three levels.

I hope this helps! Let me know if you have any further questions.

Answer 1

Hi @Christos Christopoulos ，

Fortunately, it’s super easy now to add a drop-down menu. On the downside, there’s really only one option to do this.

In the OOTB way, it can only be realized through Edit the navigation menu.

Here are steps:

1.Click Edit button on the navigation bar, Add the link you need.

2.Make the link as sub link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello and thank you for your answer.

I know this procedure but I want to do this inside a blank site page and not in the navigation bar at the home page as you mentioned.

Is this possible?

Answer 3

Hi @Christos Christopoulos ， Try to use this:

$('.menu-trigger').click(function(){
  $(this).toggleClass('active')
  
  // if you really wish to keep the jquery animation you can do this
  // $(this).next('ul').slideToggle()
})
/* you can use the sibling selector '+' to target the list */
.menu-trigger + ul {
  display: none;
}

.menu-trigger.active + ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu-trigger">parent</a>
    <ul>
      <li>
        <a class="menu-trigger">child</a>
        <ul>
          <li>
            <a class="menu-trigger">grandchild</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.