2013のトップリンクバーをボタン風にデザインしてみた(osloテーマで)

SharePoint2013のトップリンクバーって、なんだか地味ですよね。
そんなところにナビゲーションがあったんだ?!って感じで。

特にosloテーマの場合サイドリンクバーがないだけに、もうちょっと自己主張させてもいいかも・・・、と思い、CSSでボタン風にデザインしてみました。(ついでに「リンクの編集」メニューも隠してみました)

20150427

余談ですが、SharePoint2013だとサイドリンクバーやトップリンクバーにこの「最近使った項目」ってやつが出てしまうのがなんとも・・・しかもこれ最近「使った」ではなく「作った」なんですよね・・・というわけで、これを隠すやり方についてもおいおい書きます。

さて、ソースコードはこんな感じです。

.ms-core-listMenu-horizontalBox {
    padding-top: 20px;
    width: 100%;
}
.ms-core-listMenu-horizontalBox li.static {
    padding: 0.5em 1.5em;
    vertical-align: middle;
    display: inline-block;
}
.ms-core-listMenu-horizontalBox li.static.selected, .ms-core-listMenu-horizontalBox li.static:hover {
    background-color: #0072c6;
}
.ms-core-listMenu-horizontalBox li.static:hover > a, .ms-core-listMenu-selected, li.dynamic:hover .menu-item-text, li.static.dynamic-children:hover > span > span{
    color: #fff !important;
}
.ms-core-listMenu-horizontalBox a.static {
    display: table-cell;
    text-align: center;
}
.ms-core-listMenu-horizontalBox a.selected {
    font-weight: bold;
}
.static.ms-verticalAlignTop.ms-listMenu-editLink.ms-navedit-editArea{
    display: none;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item{
    margin-right: 0;
}
ul.dynamic{
    box-shadow: none;
    left: 0 !important;
    width: 150px !important;
    padding: 0;
}
li.dynamic{
    display: block !important;
    width: 100%;
    padding: 5px;
}
li.dynamic:hover{
    background: rgba(136, 179, 215, 0.84);
}
li.dynamic::before,
li.dynamic::after,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
li.dynamic,
.ms-core-listMenu-horizontalBox li.static,
.ms-core-listMenu-horizontalBox li.static::before,
.ms-core-listMenu-horizontalBox li.static::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

なお、上記CSSではこちらの記事を参考に、マウスオーバーでボタンの色がフワッと変わるようなエフェクトも入れています。
CSSのみで実装するボタンデザインやホバーエフェクト 20+α | NxWorld.

サイトデザインの参考にしていただけるとうれしいです!

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中