Sticky menubar as an alternative to PM Notify

Post by **Martin_K** » 27 Mar 2013, 11:29

& Guest Register bar

It doesn't do the PM notify business, but

I have a sticky menu with a couple of prominent colourful buttons right hand side, with Join and Info Site visible to visitors. It includes Twitter and Facebook links and a dropdown menu with site navigation. As the eye is drawn to the top right (the reason why drive on the left hand side in the UK), this is a good place to put your most important links as buttons.

The Sticky menu keeps these buttons visible all the time a visitor is browsing the site.

All based on good design principles, I think.

Javascript removes the Twitter and Facebook links when the menu becomes sticky. The buttons should become lighter on hover to fit in with my design, I think, not darker as currently. You can tailor make custom pages and links to these to suit the various user groups, to give each group the two most important links you want them to see.

You can grab the code off my site if you wish, or I can paste it into this topic if anyone is interested.

Site: http://opgo.co.uk/forum

Post by **Stoker** » 27 Mar 2013, 16:10

Looks great. Im using some of it on my dev style.
Please post it so people can grap it

Post by **Martin_K** » 28 Mar 2013, 20:28

Thanks for the compliment. I'll post up, and try to explain the workings, but maybe I should post up my own Paypal Donate button with it.

It raised a few challenges overall, one was working out the CSS from another site, for the Twitter and Facebook buttons. The other was making sure that when the menubar goes transparent, that the buttons and menus do not also go transparent.

The jquery for making items from the menu appear or disappear is very simple and my first actual jquery programming from scratch, and I found a nice script on stackoverflow.com to make the menubar sticky.

Before that I did try various jquery plugins that all claim to be 'lightweight' but had problems with all of them being 'jerky' when implimented, and this was as smooth as I got it. CSS transitions provide some of the nice hover effects in the menu.

The dropdown menu was created from a free menu from http://css3menu.com/apple-black.html and I used http://users.tpg.com.au/j_birch/plugins/superfish/ superfish.js along with hoverintent.js to control the speed of/animation of the menu, and to make the menu respond to deliberate mouse actions to activate it.

I can leave the dropdown menu for another day, as there all sorts of menus available out there, and will produce the code for the rest of it, when I can work out exactly what I did and why (and when I get the time).