For the drop-down listing I used a jQuery plugin called Chosen. This plugin is actually a really great example of a jQuery plugin that not only improves the look of the boring old drop-down list but also improves upon its functionality.
Clicking the drop-down arrow reveals a searchable sub-site listing:
Pressing enter or clicking on a sub-site will automatically navigate you to the root of that site.
To set this up it should be a pretty straight forward process and involves uploading a few resources and then wiring it all up on a page.
- Upload the required assets for the Chosen plugin to a document library in SharePoint e.g. the Style Library/Site Assets. This will include the following files:
chosen.jquery.min.js – Chosen jQuery plugin
chosen.min.css – Chosen jQuery plugin CSS
chosen-sprite.png – Chosen jQuery plugin – sprite
firstname.lastname@example.org – Chosen jQuery plugin – sprite retina displays
jquery-1.11.0.min.js – jQuery Library (not required if already included in your masterpage)
- Create a new file called getSubSites.html within the same directory and paste in the following code. Note: this code can easily be tweaked and as mentioned previously I’m more than certain that there are ways that this could be improved. Also be aware that it may be necessary to update the script and CSS references to reflect the location within your environment.
- Create another file called sortSelect.jquery.js and paste in the following (I believe I originally found this jQuery function on StackOverflow but I couldn’t find the original post – Sorry!)
- The resulting files should appear in the library as shown below. Make a copy of the URL to the getSubSites.html page.
- Browse to or create a page where you would like to add the drop-down. Edit the page and add a Content Editor web part.
- Click the web part context menu and then select Edit Web Part.
- In the web part property pane paste in Content Link box paste in the URL to getSubSites.html
- Expend the Appearance section and set the Chrome Type to ‘None’
- Click Apply and then Save/Publish the page. After the page reloads you should see the following drop-down list appear on the page. If you have any issues at this point it is probably worth double scheckin gthe script/css references in getSubSites.html
Testing this I found that the sub-site results would get trimmed as expected depending on the users level of access. I also used this on Office 365 and found that it worked without a hitch. Depending on the number of sub-sites it may take a moment or two to load, in this case it would probably be a good idea to show some kind of loading animation while the sub-site data is retrieved.