Electric Type


About Us



Building the Sliding Toolbar
by Taylor 14 Nov 1997

Page 1

Just so you know, this article refers to the tool bar found on the frontdoor of an older design of this site. Before you learn how to build it, maybe you should check out what it looked like first.

The toolbar is a ubiquitous element in almost every program that we use to get work done: mail programs, word processors, graphics programs, programming environments, just about everything. It usually puts a program's essential tools within easy reach.

Just think what toolbars could mean for Web-site design: They could contain all the meta information about a site - the navigation and other essential information that has to be there, but that you can't fit on every page without wasting a good chunk of ever-so-important real estate. Instead, float all the information in a toolbar and have it move along with your site.


Well ... there are some small problems with popping up a toolbar in its own window. If you ever go to a site that does that and you quit while the toolbar is up, the next time that you load your browser, your homepage comes up in the itty-bitty little window that the toolbar was in. Not exactly harmful, but godawful annoying. And for some reason, many users find windows popping up from a Web browser to be annoying (even if they don't mind them in non-Web applications).

But the problem remains: The available real estate on a Web page is surprisingly small. Using Navigator 4.0, with all menu palettes extended and pictures and text on the navigation toolbar, on a 640-by-480-pixel monitor, you merely have a 623-by-331 canvas upon which to work. And that's only if the user has the window maximized. So how do you stuff in the site navigation, the ad, the headline, the graphics, the archive link, and the blurbs that tease the story (plus that cross-promotion GIF the folks downstairs talked you into in a moment of weakness) and get everything on the top half of the page so your audience doesn't miss anything?

There's only one direction in which to go: up. Stack your information with CSS-P - that is, positioning with stylesheets. Toolbar Mach II. By positioning regions with CSS-P, then scripting them so that the user can move them out of the way, you are able to make a toolbar that slides in and out of view at the user's command.

next page»

Dynamic HTML  


HTML Basics  





Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!


© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.