Help - Search - Members - Calendar
Full Version: Floating Navbar
MonsterSmallBusiness Forums > MonsterWebDesign > Designing Your Storefront
boatersoutlet
I am trying to find out how to make a scrolling navbar that moves as you scroll down the page. Here is an example:Scrolling navbar If anybody knows or has a suggestion I would be much appreciative. thumbsup.gif
Kraven
QUOTE(boatersoutlet @ Nov 23 2005, 04:00 PM)
I am trying to find out how to make a scrolling navbar that moves as you scroll down the page.  Here is an example:Scrolling navbar  If anybody knows or has a suggestion I would be much appreciative.  thumbsup.gif
[right][snapback]97464[/snapback][/right]


Hi,
Here is a floating menu that floats from the left side, it might be able to be configured to float from the top, like you want.

Dynamic Drive floating menu script

Regards,
Jeff
Obscuria - Darkly Unique Offerings (Coming Jan. 06)
Kman
hmm doesn't do anything on my computer. Which brings up the point, never add anything to your site that isn't going to be useful and visible to all users.
Cannen
I can't remember the site, but there is CSS that you can use that causes the whole page to scroll, except the navbar.
undejj
QUOTE(boatersoutlet @ Nov 23 2005, 04:00 PM)
I am trying to find out how to make a scrolling navbar that moves as you scroll down the page.  Here is an example:Scrolling navbar  If anybody knows or has a suggestion I would be much appreciative.  thumbsup.gif
[right][snapback]97464[/snapback][/right]

The page that you reference is using an IFRAME to hold the contents of the navigational links, and a set of scripts that repositions the IFRAME when the page is scrolled. If you examine their code, you could do the same thing fairly easily.
JuliaMC
I do not know if it is a good idea to use an Iframe for your navigation links. From an SEO standpoint, I believe IFrames are very bad. So placing all of the links to navigate through your site in one, will make the rest of your site virtually unspiderable and unreadable to the search engines. I could be wrong about this, but the last time I checked, IFrames were not very SEO friendly.

I would make sure that by doing something like this, you are not hurting the SE's ability to crawl your site. With that being said, I am afraid I cannot suggest a way to do this, but I would simply throw that factor in the mix when it comes time to implement it.
Drobins
Just today I was looking at products on one of my Manufacturers web sites and they had this menu on the right hand side that floated and scrolled with me as I looked around.

I have to say that it bugged the crap out of me. It was very annoying seeing this thing moving out of the corner of my eye while trying to read.

I am not sure what your customers might feel about it.
Kman
ya i would really suggest against it, its annoying and distracting your customers from the sales process. It it usually done with DHTML I believe if you are curious about how it works. But really do consider what possible benifit this adds to your site besides its kinda neat.

At best it won't increase conversions, at worst its gonna drive people from your site.
boatersoutlet
Thanks everyone for your comments, it seems as though everyone here is against so that would probably be a good barometer on how the customer would feel eh? Thanks again. bigsmile.gif
ArcoJedi
Hey Mike,

I bookmarked your post earlier because I thought there was an easy way to do what you want, but rather than an <iframe /> or a <script /> method, I was looking for a Cascading Style Sheet method. My immediate thought was, {well, why not use "position: fixed;" for the navigation element} but as I looked into it and tested it out, this CSS rule does not work in IE 6.0. It looks really nice in Firefox. worry.gif

Let me explain a little further. I was going to suggest that you create a <div /> tag with your navigation menu for across the top.
CODE
<div class="topnav"> Home | About | View Cart | Login </div>

You would add this into your top of page editor. Then you would add style information to your 'custom.css' file to arrange it in a fixed position.
CODE
.topnav { position: fixed; left: 0px; top: 0px;  }

This would affix it to the location in the browser and as the user scrolled up and down, it would stay in place. The problem is that Internet Explorer 6.0 does not render this properly and reverts to a static position.

It took me a bit of research, but I found a CSS method that will give you an absolute position in IE, and a fixed position in most other browsers. There are other javascript related methods for doing this, but this runs into the same sort of compatibility issues.

For more information and a more detail explanation, a working example, see this link -
http://www.howtocreate.co.uk/fixedPosition.html

Note: I checked the link that you posted above and it appears that the site did an overhaul to their design and the effect you are looking for is no longer on their site. Perhaps they found out that it wasn't all that browser compatible! laugh.gif

I think the group would appreciate it if you tried this out and were successful with it that you would post again and show it off. I think the affect can be done really well. Thanks!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.