time view (right sidebar)

gamba!タイムライン2

by Masahiro Morita

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui right vertical very wide sidebar menu" id="sidebar">
    <div class="item">
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>
       あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/>あああああああ<br/></div>
</div>
<div class="ui left vertical red inverted visible sidebar menu push">
    <div class="header item">
        <!--<span class="ui right floated red large label">&nbsp;<i class="mail icon"></i></span>-->
        <span class="ui right floated transparent large label">&nbsp;<i class="mail outline icon"></i></span>
        <div class="ui floating dropdown">
            <i class="user icon"></i> 森田昌宏 <i class="dropdown icon"></i>
            <div class="menu">
                <a href="#" class="item"><span><i class="user icon"></i>プロフィール</span></a>
                <a href="#" class="item"><span><i class="setting icon"></i>設定</span></a>
                <a href="#" class="item"><span><i class="sign out icon"></i>ログアウト</span></a>
            </div>
        </div>
    </div>
    <a href="#" class="active item"><span><i class="users icon"></i>グループ１</span></a>
    <a href="#" class="item"><span><i class="users icon"></i>グループ２</span></a>
    <a nref="#" class="item"><span><i class="users icon"></i>グループ３</span></a>
</div>

<!-- right sidebar -->

<div class="ui inverted top fixed main menu">
<div...

CSS

.container { max-width: 70%; }
.ui.comments {
    max-width: 100%;
}
.main.container {
    padding: 50px 10px 10px 10px;
}

JavaScript

$('.dropdown').dropdown();
$('.sidebar').sidebar();
$('#sidebar').sidebar('setting', 'context', '#main_content')