Плавающая панель на боковой части сайта

Разработка Плавающая панель на боковой части сайта

Нет прав для скачивания
Плавающая панель на боковой части сайта.
Обзор Обсуждение
Пишем нашу разметку:
HTML: 
<div id="wrapper">      
              <div class="screen">
                <div class="list">
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                   
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                   
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                 
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                   
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                 
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                   
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                 
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                   
                    <div class="item">
                        <div class="img"></div>
                        <span></span>
                        <span></span>
                        <span></span>                  
                    </div>
                </div>  
</div>
  <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

  <!-- Side Panel -->
<div class='side-panel hidden-login'>
    <div class='sp-item display-docker'>
      <p><i class='fa icon-display'></i></p>
    </div>
    <div class='top-docker'>
        <div class='sp-item account-item ty-dropdown-box'>
            <div class='sp-item-title sp-item-account ty-dropdown-box__title cm-combination'> <a rel="nofollow" href="/p/my-account.html"><span class='sprite sprite-icon_acount main-nav-icon'/></a>
                <div class='sp-item-tip'>Tài khoản<br/> của tôi</div>
            </div>
        </div>
        <div class='sp-item follow-orders-item ty-dropdown-box'>
            <div class='sp-item-title ty-dropdown-box__title cm-combination'> <a href='/p/my-orders.html' rel='nofollow'><span class='sprite sprite-icon_following main-nav-icon'/></a>
                <div class='sp-item-tip'>Tra cứu<br/> đơn hàng</div>
            </div>
        </div>
        <div class='sp-item blog-item'>
            <div class='sp-item-title'>
                <a href='/p/cart.html' rel='nofollow'> <span class='sprite sprite-icon_cart_2 main-nav-icon'/> </a>
                <div class='sp-item-tip'>Giỏ hàng</div>
            </div>
        </div>
        <div class='sp-item news-item ty-dropdown-box'>
            <div class='sp-item-title ty-dropdown-box__title cm-combination'> <a href='/p/checkout.html' rel='nofollow'><span class='sprite sprite-icon_news_2 main-nav-icon'/></a>
                <div class='sp-item-tip'>Thanh toán</div>
            </div>
        </div>
         <div class='sp-item blog-item'>
            <div class='sp-item-title'>
                <a href='https://iris-tips.blogspot.com/search?&max-results=6' rel='nofollow'> <span class='sprite sprite-icon_blog main-nav-icon'/> </a>
                <div class='sp-item-tip'>Tin tức</div>
            </div>
        </div>
    </div>
    <div class='middle-docker'>
        <div class='sp-item service-nk'>
            <div class='sp-item-title'> <a href='/p/bao-hanh-doi-tra.html' rel='nofollow'><span class='sprite sprite-icon_delivery main-nav-icon'/></a>
                <div class='sp-item-tip'>Giao nhận<br/> tiện lợi</div>
            </div>
        </div>
        <div class='sp-item service-nk'>
            <div class='sp-item-title'> <a href='/p/huong-dan-mua-hang.html' rel='nofollow'><span class='sprite sprite-icon_set_up main-nav-icon'/></a>
                <div class='sp-item-tip'>Tư vấn<br/> tận tình</div>
            </div>
        </div>
        <div class='sp-item service-nk'>
            <div class='sp-item-title'> <a href='/p/bao-hanh-doi-tra.html' rel='nofollow'><span class='sprite sprite-icon_change main-nav-icon'/></a>
                <div class='sp-item-tip'>Đổi trả<br/> dễ dàng</div>
            </div>
        </div>
        <div class='sp-item service-nk'>
            <div class='sp-item-title'> <a href='/p/cam-ket-ban-hang.html' rel='nofollow'><span class='sprite sprite-icon_after_market main-nav-icon'/></a>
                <div class='sp-item-tip'>Hậu mãi<br/> chu đáo</div>
            </div>
        </div>
        <div class='sp-item service-nk'>
            <div class='sp-item-title'> <a href='/p/dat-hang-thanh-toan.html' rel='nofollow'><span class='sprite sprite-icon_payment main-nav-icon'/></a>
              <div class='sp-item-tip'>Thanh toán<br/> linh hoạt</div>
            </div>
        </div>
    </div>
    <div class='bottom-docker'>
   <div class='sp-item contact-nk'>
            <div class='sp-item-title contact-nk'> <a href='tel:01234567890' rel='nofollow'><span class='sprite sprite-icon_hotline main-nav-icon'/></a>
                <div class='sp-item-tip'>Hotline</div>
            </div>
        </div>
        <div class='sp-item'>
            <div class='sp-item-title'> <a href='https://iris-tips.blogspot.com/p/contact.html' rel='nofollow'><span class='sprite sprite-icon_chat main-nav-icon'/></a>
                <div class='sp-item-tip'>Liên hệ</div>
            </div>
            <div/>
        </div>
        <a href="#top" id="smoothup"><div class='sp-item scroll-top-page-item'>
            <div class='sp-item-title'><span class='sprite sprite-icon_top main-nav-icon'/>
                <div class='sp-item-tip'>Lên đầu trang</div>
            </div>
        </div></a>
    </div>
</div>
Пишем стиль:
CSS: 
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
*{margin:0;padding:0}
body{background:#e6e6e6;width:100%;height:100%;font:12px "Open Sans",sans-serif}
#wrapper{width:50%;height:1100px;overflow:hidden;margin:20px auto;background:#fff;border:1px solid #c6c6c6}
div.screen{height:1100px;overflow:hidden;background:transparent;margin:15px}
.list{margin-top:36px;text-align:left}
.item{height:115px;margin-left:115px;clear:both}
.item .img,.item span{background:#f0f0f0}
.item .img{float:left;width:96px;height:81px;margin-left:-113px}
.item span{height:11px;width:320px;margin-bottom:19px;float:left}
.item span:nth-of-type(3){width:95px;margin-bottom:0}
a:link{color:#e76e66;text-decoration:none;outline:none;transition:all 0.25s}
a:visited{color:#666;text-decoration:none}
a:link:hover{color:#666;text-decoration:none}
a:visited:hover{color:#e76e66;text-decoration:none}

/* Side Panel */
.side-panel{position:fixed;width:40px;top:35%;right:0;background-color:#37393e;z-index:99999999;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;-ms-transition:all 0.3s ease 0s}
.side-panel.hidden-login .sp-item-popup .sp-item-sub-popup{margin-top:0}
.side-panel .sp-item{position:relative;display:block}
.side-panel .sp-item.scroll-top-page-item{margin-bottom:10px}
.side-panel .sp-item.blog-item{margin:8px 0 0}
.side-panel .sp-item .sp-item-title{cursor:pointer;padding:2px 0;z-index:12;margin:2px 0;position:relative;display:block}
.side-panel .sp-item .sp-item-title span{font-size:11px;display:block;color:#fff;text-align:center}
.side-panel .sp-item .sp-item-title span.cart-num,.side-panel .sp-item .sp-item-title span.compare-num{height:16px;right:15px;top:0;width:16px;line-height:16px;background-color:red;border-radius:50%;color:#fff;display:inline-block;font-size:10px;position:absolute;text-align:center;vertical-align:middle;font-weight:700}
.side-panel .sp-item .sp-item-title span.main-nav-icon{display:block;margin:0 auto}
.side-panel .sp-item .sp-item-title span.sprite{height:30px;width:30px}
.side-panel .sp-item .sp-item-title span.sprite-icon_acount{background-position:-46px 0}
.side-panel .sp-item .sp-item-title span.sprite-icon_following{background-position:-48px -37px}
.side-panel .sp-item .sp-item-title span.sprite-icon_cart_2{background-position:-46px -73px}
.side-panel .sp-item .sp-item-title span.sprite-icon_news_2{background-position:-128px -38px}
.side-panel .sp-item .sp-item-title span.sprite-icon_comparing{background-position:-91px -385px}
.side-panel .sp-item .sp-item-title span.sprite-icon_blog{background-position:-47px -111px}
.side-panel .sp-item .sp-item-title span.sprite-icon_delivery{background-position:-160px -675px}
.side-panel .sp-item .sp-item-title span.sprite-icon_hotline{background-position:-200px -300px}
.side-panel .sp-item .sp-item-title span.sprite-icon_set_up{background-position:2px -375px}
.side-panel .sp-item .sp-item-title span.sprite-icon_change{background-position:-158px -770px}
.side-panel .sp-item .sp-item-title span.sprite-icon_after_market{background-position:0 -415px}
.side-panel .sp-item .sp-item-title span.sprite-icon_payment{background-position:-46px -298px}
.side-panel .sp-item .sp-item-title span.sprite-icon_chat{background-position:-46px -334px}
.side-panel .sp-item .sp-item-title span.sprite-icon_top{background-position:-46px -373px}
.side-panel .sp-item .sp-item-title span.sprite-logo-nk{background-position:0 -856px;height:27px;width:158px;margin:9px 0 0}
.side-panel .sp-item .sp-item-title span.sprite-cart-3{background-position:-1px -755px;width:31px;height:27px;position:absolute;right:12px;top:10px}
.side-panel .sp-item .sp-item-title:hover{background-color:#ffe700}
.side-panel .sp-item .sp-item-title:hover .sp-item-tip{-webkit-animation-name:sp-item-tip;animation-name:sp-item-tip}
.side-panel .sp-item .sp-item-title .sp-item-tip{font-family:'Open Sans',sans-serif;font-size:12px;line-height:normal;display:flex;display:-webkit-flex;display:-moz-flex;flex-direction:column;-webkit-flex-direction:column;-moz-flex-direction:column;justify-content:center;opacity:0;position:absolute;right:70px;top:0;width:85px;height:35px;padding:0 5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;color:#fff;background-color:#6a6a6a;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px rgba(0,0,0,0.2);box-shadow:0 0 5px rgba(0,0,0,0.2);-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;visibility:hidden}
.side-panel .sp-item .sp-item-title .sp-item-tip:after{border:5px solid transparent;content:"";position:absolute;top:12px;right:-8px;border-left-color:#6a6a6a}
.side-panel .top-docker .account-item,.side-panel .top-docker .cart-item,.side-panel .top-docker .news-item,.side-panel .top-docker .comparing-item{display:none}
.side-panel .middle-docker .service-nk{display:none}
.side-panel.extend{top:0;width:55px;bottom:0}
.side-panel.extend .sp-item .sp-item-popup{right:55px}
.side-panel.extend .sp-item .sp-item-title:hover .sp-item-tip{-webkit-animation-name:sp-item-tip-extend;animation-name:sp-item-tip-extend}
.side-panel.extend .display-docker p .icon-display:after{content:"\f103"}
.side-panel.extend .top-docker{position:absolute;top:40px;width:100%}
.side-panel.extend .top-docker .account-item,.side-panel.extend .top-docker .cart-item,.side-panel.extend .top-docker .news-item,.side-panel.extend .top-docker .comparing-item{display:block}
.side-panel.extend .middle-docker{position:absolute;top:45%;width:100%}
.side-panel.extend .middle-docker .service-nk{display:block}
.side-panel.extend .bottom-docker{bottom:0;position:absolute;width:100%}
.side-panel .display-docker p{text-align:center;background:#ffe700 none repeat scroll 0 0;margin:0 0 10px 0;cursor:pointer;padding:6px 0}
.side-panel .display-docker p .icon-display:after{color:#fff;content:"\f102";font-size:14px;font-weight:700}
.side-panel .bottom-docker .contact-nk{display:none}
.side-panel.extend .bottom-docker .contact-nk{display:block}
.sprite{display:inline-block;vertical-align:middle;font-size:0!important}
.sprite{background-image:url(https://3.bp.blogspot.com/-RvDjO4SegH8/WkSG4YqvqII/AAAAAAAAFc4/F2Q60-1Kcj0M8Jf2ALCe63Eu2zQxOMsFQCLcBGAs/s1600/sprite_iris_tips.png);background-repeat:no-repeat}
.display-docker{height:40px;}
.side-panel .hidden-login{margin:0 auto;text-align:center;}
.side-panel .sp-item .sp-item-title{min-width:40px;max-width:55px;}
@keyframes sp-item-tip{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:40px;visibility:visible}}
@-webkit-keyframes sp-item-tip{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:40px;visibility:visible}}
@keyframes sp-item-tip-extend{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:55px;visibility:visible}}
@-webkit-keyframes sp-item-tip-extend{from{opacity:0;right:70px;visibility:hidden}to{opacity:1;right:55px;visibility:visible}}
Придаем динамики немного:
JavaScript: 
jQuery(document).ready(function( $ ){
$('.display-docker').click(function() {
    if($('.side-panel').hasClass('extend'))
    {
        $('.side-panel').removeClass('extend');
    }
    else
    {
       $('.side-panel').addClass('extend');
    }
  });
});
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#smoothup') .fadeOut();
        } else {
            $('#smoothup') .fadeIn();
        }
    });
    $('#smoothup').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
        });
});
Смотрим наше результат:
fg26.gif
Автор
baltun
Скачиваний
1
Просмотры
723
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
Обсудить ресурс

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ