0

First off, my limitations. I do not have access to the master page(s) or global css (either using SPD or not...). Nor do I have the ability to use managed or global navigation. This is a Team Site and Publishing Features are locked down so I cannot turn them on. So the site in question only has access to "Top Nav Links" which does not allow drag and drop on the site, or layered drop downs in the site settings. I also do not have access to this particular site collection with PowerShell, so those methods are out.

That being said, I am looking for a way to set up a drop down menu. Methods should be JavaScript/jQuery and CSS and most likely using a SP List to determine what links will be used for the top nav and drop downs. (CSOM and REST methods would also work as long as instructions are clear in snippets)

While annoying, the limitations are prohibitive and as such I realize that I will need to apply the js via a SEWP or via file on a CEWP per page I want this nav bar to visible on.

I have spent quite a lot of time looking this up, but it seems everything is forcing the use of master pages/css or just styles currently existing drop downs.

Anyone have any ideas on how to do this? Code snippets greatly appreciated so I do not need to try and develop this from scratch.

Thanks!

EDIT I have come up with a partial solution, but need some help in getting the drop down portion working:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript">
function loadBlogs() {
    var ul1 = document.getElementById("zz14_RootAspMenu");
    var li1 = document.createElement("li");
    li1.appendChild(document.createTextNode("Blogs"));
    li1.setAttribute("id", "TNBlogsDD");
    li1.setAttribute("class", "static");
    ul1.appendChild(li1);
    var li2 = document.getElementById("TNBlogsDD");
    var ul2 = document.createElement("ul");
    var br = document.createElement("br");
    ul2.setAttribute("id", "dropList");
    li2.appendChild(br);
    li2.appendChild(ul2);       
    var li3 = document.createElement("li");
        li3.setAttribute("id", "dlItem1");
        var a1 = document.createElement("a");
            a1.appendChild(document.createTextNode("Google")); //Name of Link Location
            a1.setAttribute("href", "http://www.google.com"); //For URL of link
            li3.appendChild(a1);
        ul2.appendChild(li3);
        document.getElementById("ul2").style.display = "none";

    li1.addEventListener("onmouseover", dropListOn);
    li1.addEventListener("onmouseout", dropListOff);
};
function dropListOn () {
    document.getElementById("dropList").style.display = "block";
};
function dropListOff () {
    document.getElementById("dropList").style.display = "none";
};
$(document).ready(loadBlogs);
</script>

Any assistance in editing this so Google does not appear initially and works onmouseover and disappears onmouseout would be appreciated

  • What kind of permissions do you have on the site? – sssreddy Oct 8 '18 at 22:51
  • I have full control on the site as I am a site owner on this particular farm as opposed to admin on the farm. – Chris Fells Oct 9 '18 at 14:56
0

If I'm understanding this correctly what you wish to achieve is to have a drop down menu off a header in the top bar navigation? If so this can be achieved using site settings>Look and Feel>Navigation

From here you can click global navigation> Add header> Add link. This will add all the links as a drop down when hovering above the header. Sorry if I've misunderstood it's a bit late in the day and my mind is cooked.

  • Global Nav is not an option as the farm has it locked down for this site collection. Thus I only have "Top Nav Links" If I had Global, or access to the Master Pages this would be a snap. :) Thanks for looking. – Chris Fells Oct 2 '18 at 15:10
  • Which version of SP are you using? – Kirito Oct 2 '18 at 15:19
  • SharePoint 2013 (Its in the tags) :) – Chris Fells Oct 2 '18 at 15:22
0

So took a while, and it may not be as clean as it could be... but here it is, the working answer to the problem:

<script src=".../jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">

function loadBlogs() {
var imInIt = 0;

    var ul1 = document.getElementById("zz14_RootAspMenu");
    var li1 = document.createElement("li");

    li1.appendChild(document.createTextNode("Blogs"));
        li1.setAttribute("id", "TNBlogsDD");
        li1.setAttribute("class", "static");
        li1.setAttribute("onmouseenter", "dropListOnPrime()");
        li1.setAttribute("onmouseleave", "dropListOffPrime()");
     ul1.appendChild(li1);

    var li2 = document.getElementById("TNBlogsDD");
    var div1 = document.createElement("div");
        div1.setAttribute("id", "dropListDiv");
        div1.setAttribute("style", "position:absolute; margin-left: -10px; margin-top:10px; padding:7px; z-index:500; display:none; border: solid 1px silver;");
        div1.setAttribute("onmouseenter", "dropListOn()");
        div1.setAttribute("onmouseleave", "dropListOff()");
     li1.appendChild(div1);

    var divThis = document.getElementById("dropListDiv");
    var ul2 = document.createElement("ul");
        ul2.setAttribute("id", "dropList");
        divThis.appendChild(ul2);

    var li3 = document.createElement("li");
        li3.setAttribute("id", "dlItem1");
        li3.setAttribute("style", "display:block;");
        var a1 = document.createElement("a");
            a1.appendChild(document.createTextNode("Blog 1"));              
            a1.setAttribute("href", ".../blog/default.aspx");
         li3.appendChild(a1);
     ul2.appendChild(li3);

    var li4 = document.createElement("li");
        li4.setAttribute("id", "dlItem2");
        li4.setAttribute("style", "display:block;");
        var a2 = document.createElement("a");
            a2.appendChild(document.createTextNode("Blog 2"));
            a2.setAttribute("href", ".../Blog/default.aspx");
         li4.appendChild(a2);
     ul2.appendChild(li4);

    var li5 = document.createElement("li");
        li5.setAttribute("id", "dlItem3");
        li5.setAttribute("style", "display:block;");
        var a3 = document.createElement("a");
            a3.appendChild(document.createTextNode("Blog 3"));
            a3.setAttribute("href", ".../Blog/default.aspx");
         li5.appendChild(a3);
     ul2.appendChild(li5);
};

function dropListOnPrime () {
    document.getElementById("dropListDiv").style.display = "block";
    imInIt = 0;
};

function dropListOffPrime () {
        setTimeout(function(){
            if (imInIt!=1){
                document.getElementById("dropListDiv").style.display = "none";
            };
        },1500);
};

function dropListOn () {
    imInIt = 1;
};

function dropListOff () {
    imInIt = 0;
    setTimeout(function(){document.getElementById("dropListDiv").style.display = "none";},10);
};

$(document).ready(loadBlogs);

Thanks to everyone for looking.

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.