okedo

Theme 20 : Okedo (updated)

theme garden // best viewed in Chrome

- Features :

  • 1 side picture (auto width to 150px)
  • sliding and fading description
  • sliding navigation menu
  • sliding title & is the refresh/home button
  • 2 column posts
  • bigger post in permalink (250-> 400, 400->500)
  • fading notes & time ago on hover, permalinks.
  • bigger post in permalink
  • stylished scrollbar (chrome)

- In option :

  • Music player container
  • 1 column post
  • endless scrolling 
  • bigger post size (400px)
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 :)