“Collapsing Site Navigation”

折りたたみメニューは垂直ナビゲーションバーとコンテンツ領域外のスライドが含まれています。メニュー項目の上にマウスを移動すると、画像が上から下にスライドし、サブメニューが下から上にスライドします。サブメニュー項目のいずれかをクリックすると、メニュー全体を折りたたんで、カードデッキのようにコンテンツ領域をスライドして表示させます。

JavaScript

jQueryフレームワーク、jquery-1.4.2.min.jsおよびcollapsing-site-navigation.jsの.jsファイルを<script>タグ内のsrc属性に指定する記述が必要です。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="collapsing-site-navigation.js"></script>

index-#.htmlファイルに基本的な値を使用してスクリプト機能を初期化するコードも記述します:

HTML

HTMLはclassとid cc_menuとmain containerで構成されます。ここですべての垂直メニュー項目とメインコンテンツをdivで配置します。

<div style="z-index:5;">
  <div>
    <img src="images/img1.jpg" alt="" />
    <span class="cc_title">Main page</span>
    <span class="cc_submenu">Main page <span>welcome to  our site</span></span>
  </div>
</div>
<div style="z-index:4;">
  <div>
    <img src="images/img2.jpg" alt="" />
    <span class="cc_title">about us</span>
    <span class="cc_submenu">about us<span>who we are</span></span>
  </div>
</div>
<div style="z-index:3;">
  <div>
    <img src="images/img3.jpg" alt="" />
    <span class="cc_title">services</span>
    <span class="cc_submenu">services <span>& solutions</span></span>
  </div>
</div>
<div style="z-index:2;">
  <div>
    <img src="images/img4.jpg" alt="" />
    <span class="cc_title">partners</span>
    <span class="cc_submenu">partners <span>parnters list</span></span>
  </div>
</div>
<div style="z-index:1;">
  <div>
    <img src="images/img5.jpg" alt="" />
    <span class="cc_title">locations</span>
    <span class="cc_submenu">locations <span>our contacts</span></span>
  </div>
</div>

最初の項目は「5」のz-indexを取得します。次の項目からz-indexを減少させていきます。最後の項目が最も低い層にして折りたたみ式のカードデッキを作成します。
次にページの内容を記述します:

<div id="cc_content" class="cc_content">
  <section class="cc_content_1">
    ..............<!-- ここに内容を入れます -->
  </section>
  <section class="cc_content_2">
    ..............<!-- ここに内容を入れます -->
  </section>
  <section class="cc_content_3">
    ..............<!-- ここに内容を入れます -->
  </section>
  <section class="privacy">
    ..............<!-- ここに内容を入れます -->
  </section>
  <section class="read_more">
    ..............<!-- ここに内容を入れます -->
  </section>
</div>
<span id="cc_back" class="cc_back">back to menu</span>
<span id="cc_back" class="cc_back_page">back to page</span>
<a href="#" id="privacy">Privacy policy</a>

CSS

.cc_menu {
    width:979px;
    height:591px;
    position: absolute;
    overflow:hidden
}
.cc_item{
    text-align:center;
    width:195px;
    height:591px;
    float:left;
    background:#171717;
    position:relative;
    margin-right:1px;
}
span.cc_title{
    color:#fff;
    line-height:46px;
    font-size:30px;
    top:224px;
    left:14px;
    position:absolute;
    background:#272727;
    width:167px;
    display:block;
    z-index:11;
}
.cc_item div{
    cursor:pointer
}
.cc_submenu{
    display:block;
    width:163px;
    margin:0;
    padding:0;
    height:0px;
    overflow:hidden;
    text-align:left;
    position:absolute;
    left:0px;
    bottom:-32px;
    background:url(../images/bg_opacity.png) repeat;z-index:13;
}
.cc_submenu{
    color:#fff;
    font-size:30px;
    cursor:pointer;
    padding:16px;
    line-height:44px;
    text-transform:uppercase
}
.cc_submenu span{
    display:block;
    font-size:20px;
    color:#c5c5c5;
    line-height:26px;
    padding-top:8px;
}
.cc_item img{
    position:absolute;
    width:195px;
    height:591px;
    top:-591px;
    left:0px;
}
.cc_content{
    width:783px;
    height:591px;
    position:absolute;
    left:-800px;
    background:#171717;
    overflow:hidden;
}
.cc_content section{
    width:100%;
    text-transform:none;
    font-size:12px;
    line-height:18px;
    display:none
}
span.cc_back, .cc_back_page{
    position:absolute;
    top:11px;
    right:-140px;
    cursor:pointer;
    font:14px Arial, Helvetica, sans-serif; color:#171717;
    line-height:35px;
    text-transform:uppercase;
    padding:0 18px;
    background:#feb400;
}
.privacy, .read_more{
    width:887px;
    position:absolute;
    right:-980px; top:0;
    background:#171717;
    z-index:20;
    padding:0 46px;
}
.read_more{
    z-index:19
}

Comments are closed.