程式化的导航栏，其中一个元素与内容对齐

Question

我有一个独特的布局，我正在建立，但我没有足够的经验与CSS自己完成它。也许有人可以帮助我？

我想要一个页面，在一个约700像素宽的中心垂直框中显示内容。内容将是垂直列出的个人帖子（想想Tumblr）。这不是汗水，但困难的部分是导航栏。

该栏将包含指向年份的链接，当前年份选择在中间，前几年在左边，在右边几年之后，整个shebang占据页面宽度的100％。我想要的当前选定年份与内容列一样宽。当用户点击不同年份时，将显示该年份，其他年份将相应更改（我可以处理的部分）。

这是一个例子，让您更好地了解我在说什么。

这是可能的吗？有关如何实现这一目标的任何想法？ （忽略右边每年都是2010年的事实。应该是2012年，2013年，2014年）

Answer 1

我认为jQuery Tabs可以解决这个问题：http://jqueryui.com/demos/tabs/

Answer 2

你可以像css http://divitodesign.com/css/how-to-dropdown-css-menu/

的下拉菜单一样构建它

或者在单击它​​时使用php switch语句设置变量。当页面重新加载并且在url中传递变量时，使用它将当前类设置为您想要的年份。