okedo

okedo sliding navigation. explanation/tutorial

So basically it’s a table of 1 row and 2 column.

For okedo it’s 3 rows, one for about, one for menu and one for the title, but same concept,basically it goes like that :

<table id=“table”>
<tr id=“row”>
<td><div id=“left”>2 links</div></td>
<td><div id=“right”>
<div class=“link”>link 1</div><div class=“link”>link 2</div>
</div></td>
</tr>
</table>

Then it’s all in the css :) the sliding repose on the webkit transition, width playing, margin-left and overflow on hidden.

So again, basically, it is :

#table
{width:a+b+c px;
overflow:hidden;}

#right
{width:a px;
overflow:hidden;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-out;-moz-transition: all 1.s ease-out;transition: all 1s ease-out;}

#left
{width:b px;
margin-left:-b px;
-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-out;-moz-transition: all 1.s ease-out;transition: all 1s ease-out;}

#row:hover #left
{margin-left:0px;}

#row:hover #right
{padding-left: c px;}

#left is the sliding element, we set its margin-left superior or equal its width so it is positionned “outside” the table.

When we hover #row, #left loose the margin left so it’s “sliding back” next to #right, the slide and not simple appearance is due to the webkit-transition.

For #right it’s just padding on hover of #row :)