Keep in mind that my solution is just that! It is a Visual Studio 2008 solution for a site definition. As I said earlier though, you do not have to do it this way. With that in mind, to duplicate what I have, you need to at least have the following things done:
- An images folder in the Master Page Gallery. (It is just a doc library!)
- The stylesheets you want to use loaded into the Master Page Gallery. (I used 5)
- A doc library called Scripts in the root of the site.
Yes, it is not complete and there is a cool reason for this. If you look back at the code for the master page, I left the site actions control there but in a hidden div element. Part of the script will use some code to get the href elements of the hidden site settings and add it to the main navigation at the end. I think that is slick don't you!
Here is the code for the side menu:
This is the code for the accordion style menu on the right. It is neat and again can be changed as needed. The stylesheets handle the formatting for this.
So there you have the code! As you can see I show how I add the site settings links to the main menu and then I load the accordion menu and setup the "buttons" to allow the accordion functionality to work. This could be modified to just a click event if desired. The next thing that I do here is check the width of the screen to determine which of the loaded stylesheets should be set as active. Remember that I load all of them in the master page. This just determines which one to set.
There are some other things here that I use to make things look better. In list view pages, I try to keep the list views from scrolling off the page to ensure that the footer is always at the bottom and that items do not scroll under it. You will find a try/catch block here that wraps the list view in a scrollable div and also sets the header row to fixed so that it functions similar to locked rows in Excel. This function was for a specific listview and should be changed or removed. I did not take the time to set a fixed height for the content div so I just used some math to sort of guess how tall it should be.
The other function of note that I left in here is the sitesettings function. If you wanted to create a button or some other method to run it, the function opens the real site actions where it is so in my case I chose not to add this.
The styles that I used are carried maybe a bit too far as the toolbar dropdowns are black with red hover like the main menu, but I wanted to show that you could do it and I kind of like it!
Well, that is it for this series of posts! I would really like your comments and feedback!