Никита Гущин

Надо, чтобы при нажатии на элемент меню он выделялся другим цветом. Это все получилось сделать.

Странно, что одно работает, а другое - нет. Механизм ведь один и тот-же. Простейшая реализация предполагает сохранение выбранного элемента меню в state:

class MyMenu extends React.Component {

  constructor(props) {
    super(props);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.state = { selectedItem: null };
  }

  handleItemClick(selectedItem) {
    console.log('handleItemClick', selectedItem);
    this.setState({ selectedItem });
  }

  render() {
    const { items } = this.props;
    const { selectedItem } = this.state;
    const { handleItemClick } = this;

    return (
      <ul>
        { items.map( (item, key) => (
            <MenuItem
                key={key}
                item={item}
                isActive={item === selectedItem}
                onClick={handleItemClick}
             />
        )) }
      </ul>
    );
  }
}

И, соответственно, в самом компоненте MenuItem проверяем - если флаг isActive === true, то добавляем класс или еще чего:
Рабочий пример

Никакого JS. Смотрите пример c bottom:0. Работает с любым количеством контента.

Вот еще один способ (тут надо жестко задавать высоту футера)

Потому что при нажатии кнопки выполнится только вот эта конструкция:

function(){
    btn_status = 'номер_кнопки';
}

Чтобы все заработало, при нажатии на кнопку надо вызывать еще и код со свитчем

switch(btn_status){
    // ..
}

Но мне крайне не нравится Ваша конструкция. Во-первых: если вы используете jQuery, то используйте его везде. Вместо:

btn_3.onclick = function(){
    btn_status = '3';
}

Пишите:

$(btn_3).click(function(){
    btn_status = '3';
});

Во-вторых: можно использовать this для смещения кнопки:

$(btn_3).click(function(){
    btn_status = '3';
    $(this).css({
        marginLeft : '5px'
    });
});

Могу предложить такой вариант: у вас будет код, который будет обрабатывать данные (грубо говоря - контроллер) и шаблон, который будет вставлять готовые данные в html (это называется view).

Функция рендера такого шаблона может выглядеть так:

function render($templateName, $templateData)
{
        extract($templateData,EXTR_SKIP);
        ob_start();
        require($templateName);
        return ob_get_clean();
}

В этой функции мы с помощью extract все ключи ассоциативного массива $templateData превращаем в переменные текущей области видимости (они попадут в шаблон). Первый параметр - путь к шаблону.

Вызываться в контроллере она будет примерно так:

$templateVars = array();
$templateVars['data'] = array();
$templateVars['content'] = array(); // итд
while ($templateVars['data'][] = mysqli_fetch_assoc($result));
$html = render('templates/templ1.php',$templateVars);
echo $html;

А код шаблона будет выглядеть примерно так (тот самый файл templates/templ1.php, который мы использовали выше):

<?php for($i = 0; $i != count($data); ++$i) { $row = $data[$i]; ?>
    <div class='panel panel-default'>
        <div class='panel-heading'><h4><?=$row['title']?></h4></div>
        <div class='panel-body story'>
            <?=$content[0]?>
            <div class='clearfix'></div>
            <hr>
            <div class='row'>
                <p class='col-xs-6 text-left'>
                      <a href='post.php?id=<?=$row['id']?>'>Прочитать</a>
                </p>
                <p class='col-xs-6 text-right'>
                      <span class='glyphicon glyphicon-comment'><?=$row['countcomments']?></span>
                </p>
            </div>
        </div>
    </div>
<?php } ?>

Очень желательно ничего с данными в шаблоне не делать.

У меня такое решение: берем прямоугольный блок и сдвигаем его - получается параллелограмм. Но проблема в том, что все содержимое будет тоже сдвинуто (например: обычный текст станет наклонным). Поэтому, внутри мы делаем еще контейнер, который сдвигаем в обратном направлении, и помещаем туда карту (в примере - просто картинка):
jsfiddle.net/Rc6MV/2

PS плохо, только то, что в классе .map появляется магия в виде margin-left: -45px - чтобы сдвинуть блок к началу параллелограмма (нижний левый угол)