content panel

Diposting oleh: Admin Referensi Blog pada: Waktu On Line :kak:

widget ini tetap memakai script scrollbar mCSB serta font awesome .

alangkah baiknya merubah tampilan widget ini. dan kurangi struktur susunan yang tak penting .
disini susunan sesuai yang ada di web tersebut , jadi tinggal edit sebagiannya.



<div id="pocp1" class="pocp_left"><!-- BEGIN PULL OUT CONTENT PANEL -->
<div class="pocp"><!-- BEGIN PANEL CONTAINER -->
<div class="pocp_content"><!-- BEGIN PANEL INNER CONTENT -->

<h2>Sliding Menu</h2>
<p>This menu uses a different effect when activated. You can choose the position and the behavior of this panel.</p>
<ul class="pocp_icons">
<li><a href="http://themeforest.net/"><i class="icon-gear"></i>ThemeForest</a></li>
<li><a href="http://codecanyon.net/"><i class="icon-code"></i>CodeCanyon</a></li>
<li><a href="http://audiojungle.net/"><i class="icon-music"></i>AudioJungle</a></li>
<li><a href="http://videohive.net/"><i class="icon-bookmark"></i>VideoHive</a></li>
<li><a href="http://activeden.net/"><i class="icon-lock"></i>ActiveDen</a></li>
<li><a href="http://graphicriver.net/"><i class="icon-tag"></i>GraphicRiver</a></li>
<li><a href="http://android.appstorm.net/"><i class="icon-leaf"></i>Android.Apptorm</a></li>
<li><a href="http://notes.envato.com/"><i class="icon-star"></i>Envato Notes</a></li>
</ul>
<p>In this panel you can add nested toggle elements to show or hide secondary informations.</p>

<ul class="pocp_toggle">
<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>About Us</span>

<div class="pocp_panel">
<p>Aliquam orci velit, auctor tincidunt erat a, pulvinar tristique magna. Praesent sed sagittis tortor, non imperdiet nulla.</p>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>Team</span>

<div class="pocp_panel">
<p>Nunc nisi lacus, porttitor quis dignissim ac, interdum vel ante. Duis ultricies odio eu.</p>
</div>
</li>

<li>
<span class="pocp_toggle_title"><i class="icon-plus"></i>Portfolio</span>

<div class="pocp_panel">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames turpis.</p>
</div>
</li>

</ul>

<h2>Styled Elements</h2>
<p>This item includes many styled elements such as headers, paragraphs, lists, etc.</p>
<p class="dark">This is a text contained into a <strong>dark</strong> container with a border.</p>
<p class="brown">This is a text contained into a <strong>brown</strong> container with a border.</p>
<p class="yellow">This is a text contained into a <strong>yellow</strong> container with a border.</p>
<p class="red">This is a text contained into a <strong>red</strong> container with a border.</p>
<p class="blue">This is a text contained into a <strong>blue</strong> container with a border.</p>
<p class="green">This is a text contained into a <strong>green</strong> container with a border.</p>

<h2>Video</h2>
<p>Ut ligula nibh, tincidunt et dolor vitae, bibendum lectus, et tempus lorem lobortis consectetur neque.</p>
<div class="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FbTQPQfNjBw" frameborder="0" allowfullscreen></iframe>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>

</div><!-- END PANEL INNER CONTENT -->
</div><!-- END PANEL CONTAINER -->
</div><!-- END PULL OUT CONTENT PANEL -->


<style>
body {
  background: transparent; 
}
 

/* 01 MENU CONTAINER */

.pocp_left {
    position: fixed;
    top:0;
    height: 100%;
    z-index: 9999;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:21px;
    -webkit-transition: all 0.4s 0.2s;
    -moz-transition: all 0.4s 0.2s;
    -o-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
}
.pocp_left {
    left:-240px;
}
.pocp_left.pocp_show {
    left:0;
}
.pocp {
    position: relative;
    width: 240px;
    height: 100%;
    background: #191919;
    color: #FFF;/**/
     text-shadow:0px 1px 0px #000000; 
    padding: 0;
    -webkit-transition: all 0.4s 0.2s;
    -moz-transition: all 0.4s 0.2s;
    -o-transition: all 0.4s 0.2s;
    transition: all 0.4s 0.2s;
    -webkit-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
    -moz-box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
    box-shadow: inset rgba(0,0,0,.25) -6px 0 8px;
}

/* CSS3 3D Animations - Chrome & Safari only */

.pocp_left {
    -webkit-perspective: 500;
}
.pocp_left .pocp {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: translateX(-50%) rotateY(90deg);
}
.pocp_left .pocp_active {
    -webkit-transform: rotateY(0deg) translateX(0);
}

/* Optionnal overlay effect */

/* 02 TOGGLE BUTTON */

.pocp_button {
    position: fixed;
    z-index: 9999;
    top: 20px;
    font-size: 14px;
    color: #fff;
    /*text-shadow:1px 1px 1px #000;*/
    text-decoration: none;
    padding: 0 12px;
    background: #191919;
    outline:none;
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s 0.2s;
    -moz-transition: all 0.3s 0.2s;
    -o-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
}
    .pocp_button i {
        font-size: 18px;
        line-height: 32px;
        padding-top: 1px;
        float: left;
    }
    .pocp_button_left {
        left: 20px;
    }
    .pocp_button_left.btn_active {
        left: 260px;
    }

/*  PANEL CONTENT  */

.pocp .pocp_content {
    float: left;
    width:200px;
    padding: 0 20px;
}

/* 1. Basic Typography */

.pocp p,
.pocp h2,
.pocp ul {

}
.pocp p {
   margin: 0 0 21px 0;
   line-height: 21px;
}
.pocp h2 {
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pocp h2 {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 21px;
}
.pocp a {
    text-decoration: none;
    color: #bbbbbb;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}
.pocp a:hover {
    color: #eeeeee;
}

/* 2. Default Lists */

/* 3. Icons Lists */

.pocp .pocp_icons {
    list-style: none;
    padding: 0;
    margin: 0 0 21px -20px;
    color: #eeeeee;
}
.pocp .pocp_icons li {
    padding: 0 20px;
    text-align: left;
    border-radius: 0 3px 3px 0;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
}
.pocp .pocp_icons li:hover {
    background: #0a0a0a;
}
.pocp .pocp_icons a {
    color: #eeeeee;
}
.pocp .pocp_icons i {
    font-size: 14px;
    width: 24px;
    float: left;
}
.pocp .pocp_icons li,
.pocp .pocp_icons i {
    line-height: 28px;
}

/* 4. Styled Lists */
/* 5. Styled Paragraphs */

.pocp .dark, 
.pocp .brown,
.pocp .yellow,
.pocp .red,
.pocp .blue,
.pocp .green {
    padding:0 0 0 12px; 
}
    .pocp .dark {
        border-left:#3B3B3B solid 7px;
    }
    .pocp .brown  {
        border-left:#8D8767 solid 7px;
    }
    .pocp .yellow {
        border-left:#DBA742 solid 7px;
    }
    .pocp .red {
        border-left:#C05D48 solid 7px;
    }
    .pocp .blue {
        border-left:#52878B solid 7px;
    }
    .pocp .green {
        border-left:#808f4d solid 7px;
    }

/* 6. Videos & Images */

.pocp .video_container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 18px;
}
    .pocp .video_container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border:none;
        outline: none;
    }
.pocp iframe {
    border:0;
    outline: none;
    width: 100%;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    margin-bottom: 12px;
}
.pocp img {
    border:none;
}
.pocp .inline_img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    -webkit-box-shadow: 0 2px 3px #000000;
    -moz-box-shadow: 0 2px 3px #000000;
    -o-box-shadow: 0 2px 3px #000000;
    box-shadow: 0 2px 3px #000000;
    margin-bottom:18px;
    margin-top: 6px;
}    

/* 05 FORM ELEMENTS */
/* 06 PANEL TOGGLES */
.pocp .pocp_toggle {
    list-style: none;
    padding: 0;
    margin: 0 0 21px -20px;
}
    .pocp .pocp_toggle li {
        margin-bottom: 9px;
        cursor:pointer;
    }
    .pocp .pocp_toggle .pocp_toggle_title {
        margin:0;
        background: #F1F4F2; /* WARNA NAMPAK KOTAK DROP*/
        border-radius: 0 3px 3px 0;
        padding:6px 9px 6px 20px;
        display: block;
    }
    .pocp .pocp_toggle .pocp_toggle_title:hover,
    .pocp .pocp_toggle .pocp_toggle_title.toggle_active {
        background: #768F8C; /*WARNA HOVER KOTAK DROP */
    }
    .pocp .pocp_toggle .pocp_toggle_title.toggle_active {
        border-radius: 0 3px 0 0;
    }
    .pocp .pocp_toggle .pocp_toggle_title i {
        padding-top: 4px;
        float: right;
    }
    .pocp .pocp_toggle .pocp_panel {
        margin:0 0 9px 0;
        display:none;
        background: #889694; /*WARNA DROP HIDDEN*/
        padding:12px 20px 12px 20px;
        border-radius: 0 0 3px 0;
    }   
    .pocp .pocp_toggle .pocp_panel p {
        margin-bottom:0;
    }   

</style>


<!--SCROLLBAR-->
<link href='https://googledrive.com/host/0B6NRsLHpHmOvY095QnloZDVGRGs' rel='stylesheet'/>

<!--script 1-->
<script src='http://demos.pixelworkshop.fr/pull_out_content_panel/js/jquery.js'></script>

<!--script 2-->
<script src='http://demos.pixelworkshop.fr/pull_out_content_panel/js/pulloutpanel.js'></script>

    <script>
        $(document).ready(function($){
            $('#pocp1').pullOutContentPanel(
                // No options in the demo
            );
        });
    </script>

referensi blog

content panel

Tambahkan komentar Komentator