Fun with Plugins: Floating Menu

Ever see those navigation menus on the side of a site that just has dots and lets you scroll down the page – usually with a parallax style site? Looks something like this:

So, I wanted to do something like that, but I didn’t want to write any code. (Okay, maybe only a little CSS.) The Floating Menu plugin allowed me to do just that.

Here’s how I did it:

1. Create a Regular WordPress Menu

Go into Appearance > Menu and create a new menu. I’m going to call it “Side Menu” because I want this menu to appear on the right side.

Then, using the Custom Links option under Pages on the left (if you don’t see Custom Links, check the Screen Options at the top right hand corner of the screen.) For my example, I set up four Custom Links. For the first one, you can see below, in the place for URL I have put “#one” and have set my Navigation Label to a ● by putting in the HTML character code, which is

●

. For the next one I made the label a dot again, but put the URL as “#two”. Then I saved the menu.

Click to view larger

2. Install Floating Menu Plugin

Simply search for Floating Menu from Plugins > Add New and click to install it and then activate it.

3. Set Up The Widget

Once you’ve done that, go to Appearance > Widgets and drag the Floating Menu widget to one of your widget areas. Make sure it is a widget area that shows on the page you want the menu to show. It doesn’t matter which widget area it is because our new menu will float independently of that widget area.

Next choose your options within the widget – which menu to show, the width that you want the menu, the location, etc. You can see the settings I used on the left. I chose to keep my menu open and disable the float. And I wanted just grey buttons, so I chose no skin for the theme, although it is nice that it gives you several options. Then be sure to save the widget.

For my particular case, I only wanted to display my menu on certain pages, so I also installed the Display Widget plugin so I could choose what pages to display it on.

4. Set the Content

Next, we need just a tiny bit of CSS code in order to get this whole thing to work. In our page editor, in the TEXT tab (not the visual editor) we are going to put the following code where we want our new menu to scroll to:

 
Top content here
 
More content here
 
Even more content

One nice thing about this menu is that you can put those divs on every page, so the same menu can work for multiple pages even though you only created one menu.

One thing to note here is that the menu can only scroll as far as the page is long, so if one of these divs is near the bottom of the page, you might want to add some padding (or returns) to the bottom so there is more room for scrolling.

5. A Little Formatting

The menu looks okay by itself, but I wanted to style it a little to get it to look just like I wanted, so I added this to my style.css file:

/*
Side Navigation
---------------------------------- */
#dc-floater-2 .tab {display:none;}
.dc-floater-content li a {
	padding: 0 15px;
	font-size: 32px;
	line-height: .5;
}
.dc-floater-content li a:hover,
.dc-floater-content li a:active {
	color: #000;
}

6. Enjoy Your Results!

And now test your page to see how your menu works. You can see how I used it on my client’s site here:

http://www.reynoldsrowella.com/consulting/