Floating Alphabet Menu

This code will create a 'sticky note' at the bottom of the screen for alphabet links. You'll need to play with the number on the line that says "bottom: 50px;" to be sure there is enough room below it for folks to see whatever might be at the bottom of your page. (Or make a blank space at the bottom of the page.)

This little menu will accommodate single letters or little groups like I have here. Don't get too carried away with it - it needs to be small - but you can change the max-width to make it shorter and wider.

The background colors have an extra 2 digits at the ends of them to control the transparencies of the backgrounds. The lower the numbers/letters (00-FF), the more transparent they become. You need this so people will know there is text under the menu. The background color of the float-menu should probably be the same as the page and the color for the links should be your contrasting color. I've changed the background for this tutorial so you can see it.

The CSS for the top of your file - inside <style> tags - inside your <header> OR add it to your CSS file if it won't interfere with anything else you have.

The HTML for your page consists of two 'containers', one to 'group' your menu and the other to stick it to the bottom. You can put it at the top of your list of names where a menu usually is.

Here is some text to make this page longer. :)