Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
ანიმირებული მენიუ საიტის საზღვრებზე

ცოტახნის წინ წავაწყდი საკმაოდ საინტერესო მენიუს ერთ-ერთ საიტზე. ამიტომ დღეს განვიხილავთ როგორ შეიძლება მზგავსი მენიუს რეალიზება მოვახდინოთ ჩვენს საიტებზე.
HTML
ნავიგაცია შედგენილი იქნება არანუმირირებული სიისგან, რომელიც nav ელემენტში იქნება მოთავსებული. class ატრიბუტუს გამოყენებით დავადგენთ რომელი იკონი უნდა იქნეს გამოყენებული ამ ელემენტისთვის
<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>menu</span></a>
    <ul>
        <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>
        <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>
        <li><a href="#" class="bt-icon icon-lock">Lock</a></li>
        <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>
        <li><a href="#" class="bt-icon icon-star">Favorite</a></li>
    </ul>
</nav>


ეხლა კი ჩვენი ნამუშევარი გავაფორმოთ.
ანიმირებული მენიუ საიტის საზღვრებზე
CSS
მიაქციეთ ყურადღება რომ კოდი ბრაუზერული პრეფიქსებით, შეგიძლიათ ნახოთ არქივში. გამოვიყენებთ თავისებურებას box-sizing:
*,
*:after,
*::before {
    box-sizing: border-box;
}


ვუთითებთ body-ს და ძირითადი კონტეინერის საერთო სტილს:
body  {
    background: #04a466;
}

.container {
    padding: 80px;
}


დაშორებებს შორის შეგვიძლია გამოვიყნოთ ჩვენთვის სასურველი ადგილი.
ნავიგაციის ძირითადი ელემენტი იქნება ფიქსირებული იმის მიხედვით რომელ მაგალითს გავუშვებთ. მენიუს გაშლისას, ვცვლით ჩარჩოს ზომას. თავიდან ჩარჩოს სიმაღლე 0 ის ტოლი იქნება შემდეგ კი ჩვენ მას ვაფართოებთ 0,3 წამის შეფერხებით:
.bt-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

მენიუს გახსნისას ვცვლით სიმაღლეს და ვაყენებთ მას 100% მნიშვნელობაზე, ხოლო ჩარჩოს ვცვლით 90px მარცხნივ და 30px ყველა დანარჩენი მიმართულებით. ფონის ფერი ვსვავთ RGBA ფორმატით:

.bt-menu.bt-menu-open {
    height: 100%;
    border-width: 30px 30px 30px 90px;
    background-color: rgba(0,0,0,0.3);
    transition: border-width 0.3s, background-color 0.3s;
}

შემდეგ ვიყენებთ ერთ ფინტს: javascript ის გამოენებით ვამატებთ უჩინარ ელემენტს რომელზე დაკლიკებისასაც, ჩვენს მიერ შექმნილი ჩარჩო გაქრება, ის გაიშლება მთელ გვერძე.

.bt-overlay {
    position: absolute;
    width: 100%;
}

მენიუს გახსნისას, ვაფართოებთ ელემენტების მონაცემებს:
.bt-menu-open .bt-overlay {
    height: 100%;
}

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    user-select: none;
    transition: background-color 0.3s;
}


მენიუს გამოჩენისას, ვამუქებთ ძირითად ნაწილს. დანარჩენი ორი ნაწილი იქნება შექმნილი ფსევდო-ელემენტებით. მენიუს გახსნისას შუა ხაზი გაქრება:

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}

ფსევდო-ელემენტი განთავსებულია აბსოლიტურად და მისი სიმაღლე ისეთივე იქნება როგორიც საწყის ელემენტს აქვს -100%:
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    transition: transform 0.3s;
}

იმისათვის რომ პოზიციონირება, იყენებდეს თვისებას translateY:
.bt-menu-trigger span:before {
    transform: translateY(-250%);
}

.bt-menu-trigger span:after {
    transform: translateY(250%);
}

.bt-menu-open .bt-menu-trigger span:before {
    transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
    transform: translateY(0) rotate(-45deg);
}

არანუმირირებული სიები იკონკებით განთავსებულია ფიქსირებულად და განვათავსოთ ეკრანის მარცხენა კიდეში:

.bt-menu ul {
    position: fixed;
    top: 75px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 90px;
    list-style: none;
    backface-visibility: hidden;
}

მოდით მენიუს ელემენტებს მივცეთ ბაფის სახე მდებარეობა display: block, ასევე სიგანე:
.bt-menu ul li,
.bt-menu ul li a {
    display: block;
    width: 100%;
    text-align: center;
}

სიის ყველა ელემენტი თავდაპირველად იქნება დამალული, ანიმაცია გამოჩნდება მოგვიანებით:
.bt-menu ul li {
    padding: 16px 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}

მოდით ეხლა ყველა ელემენტი განვათავსოთ ცენტრში მარცხენა მხარეს, სანამ ისინი არ აისახებიან (-100% - Y ზე):

.bt-menu ul li:first-child {
    transform: translate3d(-100%,200%,0);
}

.bt-menu ul li:nth-child(2) {
    transform: translate3d(-100%,100%,0);
}

.bt-menu ul li:nth-child(3) {
    transform: translate3d(-100%,0,0);
}

.bt-menu ul li:nth-child(4) {
    transform: translate3d(-100%,-100%,0);
}

.bt-menu ul li:nth-child(5) {
    transform: translate3d(-100%,-200%,0);
}

მენიუს გახსნისას სიის ელემენტები გამოჩნდებიან, ხოლო შემდეგ ვიყენებთ მსუბუქად გამოჩენის ეფექტს. ასევე ვცვლით transform მნიშვნელობას 0 ნდე, 3D ეფექტის მისაღებად:
.bt-menu.bt-menu-open ul li {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
    transform: translate3d(0,0,0);
}

ეხლა დავკავდეთ ბმულებით. შრიფტების მაგიერ გამოვიყენებთ იკონკებს. ვუთითებთ შრიფტის ზომას 0, და ვხდით მას უჩინარს:
.bt-menu ul li a {
    display: block;
    outline: none;
    color: transparent;
    text-decoration: none;
    font-size: 0px;
}

ვაგროვებთ ფსევდო-ელემენტების ტექსტის ზომას, კომელსაც შეიცავენ იკონკები. მნიშვნელობა em აქ არ იმუშავებს, ამიტომ ვუთითებთ ზომას პიქსელებში:

.bt-menu ul li a:before {
    color: #04a466;
    font-size: 48px;
    transition: color 0.2s;
}

მაუსის მიტანისას მათ ფერს ვხდით თეთრს:
.bt-menu ul li a:hover:before,
.bt-menu ul li a:focus:before  {
    color: #fff;
}

იკონკას ოდნავ ვაპატარავებთ, იმისათვის თუ მომხმარებელი ათვალიერებს საიტს მობილური მოწყობილობით:
@media screen and (max-height: 31.125em) {
    .bt-menu ul li a:before {
        font-size: 32px;
    }
}


სტილებთან ყველაფერს მოვრჩით გადავდივართ ჯავასკრიპტზე.
javascript
ჩვენი სკრიპტი ძალიან მარტივია, ბმულზე დაკლიკებისას ჩვენ ვამაგრებთ ან ვხსნით მიმაგრებას კლასებს bt-menu-open ან bt-menu-close
თავისუფალ ადგილას დაკლიკებისას, მენიუ დაიხურება. ჩვენ ასევე უნდა ვუზრუნველყოთ შეხების მოვლენა:
(function() {
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    }

    function init() {

        var menu = document.getElementById( 'bt-menu' ),
            trigger = menu.querySelector( 'a.bt-menu-trigger' ),
            // тип события (если мобильное устройство, то используются события нажатий)
            eventtype = mobilecheck() ? 'touchstart' : 'click',
            resetMenu = function() {
                classie.remove( menu, 'bt-menu-open' );
                classie.add( menu, 'bt-menu-close' );
            },
            closeClickFn = function( ev ) {
                resetMenu();
                overlay.removeEventListener( eventtype, closeClickFn );
            };

        var overlay = document.createElement('div');
        overlay.className = 'bt-overlay';
        menu.appendChild( wrapper );

        trigger.addEventListener( eventtype, function( ev ) {
            ev.stopPropagation();
            ev.preventDefault();

            if( classie.has( menu, 'bt-menu-open' ) ) {
                resetMenu();
            }
            else {
                classie.remove( menu, 'bt-menu-close' );
                classie.add( menu, 'bt-menu-open' );
                overlay.addEventListener( eventtype, closeClickFn );
            }
        });

    }

    init();

})();


ესეც ასე, მორჩა! იმედი მაქვს ეს გაკვეთილი გამოგადგებათ!


გადაწერე: თქვენ არ შეგიძლიათ ფაილების გადმოწერა სერვერიდან


















-1
ავტორი: admin ნანახია: 695 | კომენტარი: 0 | Other | 15-04-2014, 22:50
ანიმირებული მენიუ საიტის საზღვრებზე
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



����������� ������


© 2009-2012 Powered By Geodles.Com