Omnomnom.com

by Vladimir

HTML

<div class="menu">
    <span href="#">Профиль</span>
    <span href="#">Избранное</span>
    <span class="logo">Omnomnom.com</span>
    <div class="clear"></div>
</div>
<div class="search-wrapper">
    <input type="button" class="select-tag" value="Выбрать" />
<input class="search" placeholder="Поисковый запрос" />
    <input type="button" value="Искать" />
</div>
<div class="tags">
    <b class="selected">Лучшие</b>
    <b>Последние</b>
    <b>Web->PHP</b>
    <b>Web->HTML</b>
    <b class="selected">Web->CSS</b>
    <b class="selected">Web->Javascript</b>
</div>
<div class="wrapper">
<div class="content">
    <article>
        <time>22.08.32013</time> <b>admin</b> <b><u>Web->Javascript</u></b>
        <div class="text">
            <p>Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.</p>
            <p>The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.</p>
        </div>
        <div class="tag-list"><em>Javascript, jQuery</em></div>
    </article>
    <article>
        <time>22.08.32013</time> <b>admin</b> <b><u>Web->CSS</u></b>
        <div class="text">
            <p>Играет роль в том случае, когда пользователи подключают свою собственную 
    таблицу стилей. Если возникает противоречие, когда стиль автора страницы и 
    пользователя для одного и того же элемента не совпадает, то <span class="attribute">!important</span> позволяет повысить приоритет стиля. </p>
  <p>При использовании пользовательской таблицы стилей или одновременном применении 
    разного стиля автора и пользователя к одному и тому же селектору, браузер 
    руководствуется...

CSS

body {
    font: 12px/14px Verdana;
}
.logo {
    float: right;
}
.menu {
    background: #000;
    color: #FFF;
    font-weight: bold;
    padding: 5px;
}
.wrapper {
    margin: 5px 0;
}
.search {
    width: 80%;
}
.tags {
    position: absolute;
    display: none;
    background: #EEE;
    padding: 10px;
    outline: 1px solid #000;
}
.tags b {
    padding: 5px;
    cursor: pointer;
}
.tags b.selected {
    background: #888;
    color: #000;
}
.content {
    width:68%;
    margin: 0 0 0 2%;
    float: left;
}
.sidebar {
    width:24%;
    margin: 0 0 0 2%;
    padding: 2%;
    float: left;
    background: #DDD;
}
article {
    background: #EEE;
    padding: 5px;
    margin: 0 0 10px;
}
.clear {
    clear: both;
}

JavaScript

$('.select-tag').click(function() {
      $('.tags').toggle(); 
});
$('.tags b').click(function() {
   $(this).toggleClass('selected'); 
});