Как оставлять активным пункт меню сайта при открытом модальном окне?

Имеется меню, которое всегда видимое на мобильной версии сайта.

При нажатии на пункт меню открывается модальное окно. При этом меню остаётся видимым.

Сейчас используются псевдоклассы :focus на активных пунктах. Естественно, при нажатии на область за пределами пункта :focus слетает.

Как сделать так, чтобы пока привязанное по ID к пункту меню модальное окно открыто, пункт оставался с :focus, а также чтобы :focus снимался с пункта при закрытии модального окна?

Полагаю, такое возможно только при помощи JS и невозможно только при помощи CSS?

HTML

<div id="nav-foot">
    <div tabindex="1" id="nf-messages" class="nf" title="Сообщение">
        ○○○○○<br />
        Главная
    </div>
    <div tabindex="2" id="nf-menu" class="nf" title="Меню">
        ○○○○○<br />
        Меню
    </div>
</div>

CSS

#nav-foot {position:fixed;bottom:0;left:0;z-index:997;display:table;width:100%;height:56px;font-size:12px;background:#fff;padding:0;margin:0;box-shadow:0 -2px 8px 0 rgba(0,0,0,0.1);}
#nav-foot .nf {display:table-cell;width:20%;color:#8d8d8d;text-align:center;border:0;padding:2px;margin:0;vertical-align:middle;cursor:pointer;}
#nav-foot .nf:focus {color:#aaa;background:#eee;}