Identifying the components of a floating toolbar / toolbox

Hi all,

I have a basic understanding of html and how and where things typically link in a website. I am not very familiar with css, jquery, ajax, hooks, floats, etc... etc...  but I like to tinker.

What I am looking to essentially duplicate can be found at www dot tripplite dot com. Am I right in calling this a floating toolbar? Would it still be called a sidebar? As I have been reading up on this stuff.. I have come to see a sidebar as a widget that is a primary part of the website page. I only want this element to truly float above the site, regardless of the content below it.

To start, I would just like to find out how to identify the files required to make this object work. Where does the CSS go, is there php? where do the images go? etc...
I really just need help finding the parts.

Once I can for the most part duplicate this thing, I am sure I can figure out how to change the text and links. I have inspected this element and it's code already but can't gleam any clues as to it's "total" construction. The next step will be sizing the visible bar when it is collapsed. I might want to add a small logo or icon to the bottom, etc. If it is based on some graphic files, great! I can edit those to achieve what i need.

Can anyone help point me in the right direction?

The website I am looking to implement this on is built on Wordpress, but self-hosted, and runs on a linux server. Apache v.2.2.21, PHP v.5.2.17. Please ask if you need any other information from me.
TimberJonDirector of ITAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
First off: if you are using WordPress, there are plugins that will add a floating sidebar to your site.  Just putting that out there.

>> I have come to see a sidebar as a widget that is a primary part of the website page.

Ehhh.  A sidebar is better defined as a column to the left or right of the main content of the page.  Widgets are blocks of text or code than can be placed where ever they are supported.  In CMS terms, you usually have widgets placed within a sidebar but headers, footers, and content areas can also be widgetized.

The element you are referring to is more accurately called a floating sidebar and specifically it is responding to the onhover event to slide in or out.

>> I only want this element to truly float above the site, regardless of the content below it.

Here's a pretty good tutorial in two parts (a bit Dreamweaver-specific but not terribly so):

http://www.youtube.com/watch?v=wuTstiiz4fg
http://www.youtube.com/watch?v=vToXQiUlOlc

It focuses more on a visible menu but the placement and the floating behavior are what I want you to see.  Once you have that down, you will add JQuery to the mix, specifically the hover stuff

http://api.jquery.com/hover/

In the end, you'll have something like this:

CSS:
#sidenav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#sidenav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#sidenav a span{margin:0 10px 0 0;}
#sidenav a{color:#fff;font-size:14px;text-decoration:none;}

Open in new window


JQuery:
$(function(){
    $('#sidenav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

Open in new window


HTML:
<div id="sidenav">
<ul>
<li><a href=""><span>01</span> Home</a></li>
<li><a href=""><span>02</span> Page 1</a></li>
<li><a href=""><span>03</span> Page 2</a></li>
<li><a href=""><span>04</span> Page 3</a></li>
<li><a href=""><span>05</span> Page 4</a></li>
</ul>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TimberJonDirector of ITAuthor Commented:
I will read up on this at lunch. I immediately plugged all that into www.jsfiddle.com (which I just found today) and I can see a visual representation of what you posted. Does this match? http://jsfiddle.net/TVwAv/90/

I actually have been using Dreamweaver for years (mostly only for editing) so I might understand more of the tutorial material.

The only sidebar plugin I found for wordpress sites self-hosted is the Strx floater at: http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/screenshots/
The few dozen plugins I looked over seem to be specific to social media icons, displaying posts, recently changed items, list of categories or just a static area for navigation items.
This is a corporate website.

I won't totally shoot down trying to use a plugin though. I wonder if a static sidebar would be a place to start to get what I want, but since most of them are designed by someone else.. and usually tailored, I thought it might be a better use of time if I tried to instead work one up from scratch or clone one that is already functional.

I will get back soon. Thank you.
0
Jason C. LevineDon't talk to me.Commented:
"I immediately plugged all that into www.jsfiddle.com (which I just found today) and I can see a visual representation of what you posted. Does this match? http://jsfiddle.net/TVwAv/90/"

Yep, that's what it is.  You can see I'm using 100% for the height.  Change that part of the CSS to whatever size you would want it to be and it should shrink to match.

"The few dozen plugins I looked over seem to be specific to social media icons, displaying posts, recently changed items, list of categories or just a static area for navigation items."

Yes but the technique of embedding the floating sidebar is what's important, right?  Once you understand the structure of the plugin, changing the contents would be trivial...
0
TimberJonDirector of ITAuthor Commented:
Ok watched the tutorials. I might need to hit up that guys site to see if he has additional material on those.

I agree on your last comment. I suppose I will snag a plugin that is the closest thing to what I need, and try to tweak it. Thanks man.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.