Position vs float to achieve the effect like this

Hey guys,

I'm copying a navigation bar on the right of this web site: http://www.stikwood.com/ (the yellow slide-out button one).

I'm not exactly going to make it slide out but the real button to control content display on the left. It would be a canvas and fetching content corresponding to buttons clicked.

On narrow screens I would push the navigation down to the button.

Do you think using position or float property is best suit for this job.

Currently I'm experimenting with positioning and it work fine so far but I would like to seek the best practice.

Thank you,

 

I don't understand what you plan to do with it, but that would be position: fixed;. Then if you wanted to make it side in and out you could toggle a class that removes/add's a negative transform, left/right, or margin.

 

Yeah definitely position fixed. Also you mentioned about best practices, I would suggest checking out Bootstrap. It has good guidelines on how to design a website.

 

No, it really doesn't. Bootstrap is one of the most horrible contraptions being pushed at the moment. Endless bloat, no regard for standards, misuse and abuse of classes, ids and elements, and a fuckton of superfluous code doing work that should be done by about a tenth of the offending code.

 

Funny, the other day I was thinking of doing something similar. It's not really the same and can be improved upon. I added the speech bubble to make it look like theirs:

http://jsfiddle.net/TX55G/267/

 

Thanks guys for the inputs,

As far as I do a research, I think position is the best fit for this situation [test on chrome and safari for ios].

I'm not going to do a clicking slide-in, slide-out menu. I just run across that site the day I was looking for design pattern inspiration.

My project is real application like Skype or something I want to put it into a browser. There are a lot of buttons to be clicked. Each button represents huge JavaScript function, when you clicked they blow up the page. I want them to rearranged neatly at the bottom when displaying on narrower screens.

Something like this perhaps: http://edankwan.com/experiments/smashing-mega-scene/

 

It's position fixed.
There you go:

#contact_module {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(340px);
transition: transform 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
z-index: 10;
}

You can enhanced with javascript for older browsers

I hope I helped.