6

I am working to develop an intranet portal on SharePoint 2013. I want to create a drop down menu like attached image. I have following strategy in mind

  1. Remove the Title Menu with CSS
  2. Write my Own HTML/CSS to create Drop Down menu like in the attached image.

Kindly guide, if I am working in the right direction. Thanks in advance.

Title

0

I don't recommend to replace the SharePoint menus and I'm not sure what you try to replace here, but maybe the following is a starting point for you.

Via CSS you could hide the title bar content (#suiteBarLeft {display:none}). But to add new HTML Content you have to alter the basic aspx sites of SharePoint - this is usaually a bad idea. So the best way would be to use jQuery/Javascript (then you are compatible with SharePoint 2016/online as well).

I'm not sure how technically firm you are... Here is a quick and dirty option (for a single page):

  • Go to a Page with webparts (e.g. a list or a web part page)
  • Click on the little gear wheel on the right top and choose "edit page"
  • Click on "add a web part"
  • Choose a script editor from media and content
  • Click on Edit Snipptet
  • Insert Your Javascript

Try something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
    $('#suiteBarLeft').html('Your Menu stuff');
</script>

If this is what you wanted:

  • Better put the code into a seperate file placed in the site assets (you have to use a content editor webpart instead of a script editor)
  • if you want to deploy it on every site, don't use a webpart, but load your Javascript via a custom action.

With JS it would be something like this:

Site siteOBJ = ctx.Site;
UserCustomAction customActionOBJ = siteOBJ.UserCustomActions.Add();
customActionOBJ.Location = "ScriptLink";
customActionOBJ.ScriptSrc = "[PATH_TO_YOUR_SITE]/SiteAssets/js/myMenu.js";
customActionOBJ.Sequence = 1000;
customActionOBJ.Update();
ctx.ExecuteQuery();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.