Floating Quick Navigation

Give it a rest already! ...(Your pointer finger that is)...

I get tired of constantly scrolling and having to go to the top of the page to get to my tabs while working on my site. One of my favorite tips I got from Jensocial is for floating images. It's a great way to show content on every page (or use to get around). Be sure to read the original post on JS for more info.

 

Here's an example of the Floating Quick Navigation I made to zip around and give the old pointer finger a little break.

 

 

I made buttons to go to the top of the page, back a page, go to the home page, go to my profile page and go to the bottom of the page (along with an icon tray so the buttons have a common background. Remove it if you want). The codes are very simple so they play nice with others, but I'm sure you could use Jens' animated scroll and my image source if you wanted to. Though we are somewhat of a dysfunctional family sometimes, most are eager to help each other.....so here's a small contribution from me if you are interested:

 

  • Copy the attached text file.
  • Replace my URL with yours in the Hover Home Button and Hover Member Page Button. Make sure you keep the /profiles for the member page.
  • Copy & paste your revised code into My Network / Tools / Custom Code (mine works fine on the top).

 

I made a few versions so you can pick something that works for you. If you want to change the icons or tray, click on the image you like, copy the URL and replace the image source in the existing code.

 

I have also attached a text file & button to "Go Forward" if you would rather use it in lieu of one of the other buttons.

 

If you use this tip, post a link to your site or a screenshot if it's a private network. I'd love to see how it looks on other themes! Enjoy!

 

Optional Images

 

Icon Trays:

 

 

Blue (#0d1962):

 

Dark Gray (#333333):

 

Pink (#be1176):

 

Red (#bf0000):


Tags: back, bottom of page, floating images, my page, network navigation, profile page, quick navigation, top of page

Views: 892

Attachments:

Replies to This Discussion

Permalink Reply by M.Tariq Malik on November 8, 2011 at 4:40am

Wowwwwwwwww. Great tip 

 

I have use this at my site http://vustudents.ning.com/

 

Thanks

Permalink Reply by Fire-Tech on November 8, 2011 at 6:53pm

Thanks. I'm glad you like it :)

Permalink Reply by GirlRiders on November 8, 2011 at 11:08am
Nice job!
Permalink Reply by Fire-Tech on November 8, 2011 at 6:55pm

Thanks GR. The funny thing is that when I was thinking of a pink for girls, you popped in my head. The pink you use certainly stands out so I went with that (or something pretty close)...

Permalink Reply by GirlRiders on November 8, 2011 at 8:06pm

hehe, happy to inspire :)  BE1176 is right on the money actually

Permalink Reply by OregonShout _YoUNITY on November 9, 2011 at 2:38am

very interesting...

 

Permalink Reply by Mind's Eye on November 9, 2011 at 7:13pm

Thank you Fire-Tech.  I really like this Nav.  Two thumbs up.

Permalink Reply by Fire-Tech on November 9, 2011 at 7:30pm

No problem. I'm glad you like it :)

Permalink Reply by Mind's Eye on November 9, 2011 at 7:35pm

There are a couple other things I would like to do with it one would be to change it to jquery *help* so I can put it in a js file and takes up less space that is one for sure.

Permalink Reply by Fire-Tech on November 19, 2011 at 11:25pm

Very true. I'm not that well versed in jquery and wanted to keep it simple. Originally I was trying to make the page down have a smooth scroll, but it kept breaking other codes.

The gray fits your site pretty well. Looks good!

Permalink Reply by Yio Capi on February 17, 2013 at 6:49am

Thank you, work it perfect! good job.

Permalink Reply by Fire-Tech on February 17, 2013 at 2:24pm

Thanks Yoi. I'm glad you like it :)

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips