» » JQuery - варіант кругового меню

JQuery - варіант кругового меню
JQuery - варіант кругового меню

У цій статті я збираюся показати як можна створити бісерну навігацію на jQuery. Чому бісерну? - Та тому що пункти меню будуть йти навколо міхура, як бісер навколо браслета. HTML код меню:
<div class="navigation" id="nav"> 
                <div class="item user"> 
                    <img src = "images / bg_user.png" alt = "" width = "199" height = "199" class = " circle "/> 
                    <a href="#" class="icon"> </ a> 
                    <h2> User </ h2> 
                    <ul> 
                        <li> <a href="#"> Profile </ a> </ li> 
                        <li> <a href="#"> Properties </ a> </ li> 
                        <li> <a href="#"> Privacy </ a> </ li> 
                    </ ul> 
                </ div> 
                <div class="item home"> 
                    <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/> 
                    <a href = "#" class = "icon"> </ a> 
                    <h2> Home </ h2> 
                    <ul> 
                        <li> <a href="#"> Portfolio </ a> </ li> 
                        <li> <a href="#"> Services </ a> </ li> 
                        <li> <a href="#"> Contact </ a> </ li> 
                    </ ul> 
                </ div> 
                <div class="item shop"> 
                    <img src = "images / bg_shop.png" alt = "" width = "199" height = "199" class = "circle" /> 
                    <a href="#" class="icon"> </ a> 
                    <h2> Shop < / h2> 
                    <ul> 
                        <li> <a href="#"> Catalogue </ a> </ li> 
                        <li> <a href="#"> Orders </ a> </ li> 
                        <li> < a href = "#"> Offers </ a> </ li> 
                    </ ul> 
                </ div> 
                <div class="item camera"> 
                    <img src = "images / bg_camera.png" alt = "" width = "199" height = "199" class = "circle" /> 
                    <a href="#" class="icon"> </ a> 
                    <h2> Photos </ h2> 
                    <ul> 
                        <li> <a href = "#"> Gallery </ a> </ li> 
                        <li> <a href="#"> Prints </ a> </ li> 
                        <li> <a href="#"> Submit </ a> < / li> 
                    </ ul> 
                </ div> 
                <div class="item fav"> 
                    <img src = "images / bg_fav.png" alt = "" width = "199" height = "199" class = "circle" /> 
                    <a href="#" class="icon"> </ a> 
                    <h2> Love </ h2> 
                    <ul> 
                        <li> <a href="#"> Social </ a> </ li> 
                        <li> <a href="#"> Support </ a> </ li> 
                        <li> <a href="#"> Comments </ a> </ li> 
                    </ ul> 
                </ div> 
            </ div> 
        </ div>


надаємо стиль меню
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 
        <STYLE> 
            * { 
                margin: 0; 
                padding: 0; 
            } 
            body { 
                font-family: Arial; 
                background: # fff url (images / bg.png) no-repeat top left; 
            } 
            . title { 
                width: 548px; 
                height: 119px; 
                position: absolute; 
                top: 400px; 
                left: 150px; 
                background: transparent url (title . png) no-repeat top left; 
            } 
            a.back { 
                background: transparent url (back.png) no-repeat top left; 
                position: fixed; 
                width: 150px; 
                height: 27px; 
                outline: none; 
                bottom: 0px; 
                left : 0px; 
            } 
            # content { 
                margin: 0 auto; 
            }         </ style>


Підключаємо js скрипти
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script> 
        <script type = "text / javascript" src = "jquery.easing.1.3.js"> </ script> 
        <script type="text/javascript"> 
            $ (function () { 
                $ ('# nav> div'). hover ( 
                function () { 
                    var $ this = $ (this); 
                    $ this.find ('img'). stop (). animate ({ 
                        'width': '199px ', 
                        'height': '199px ', 
                        'top': '-25px', 
                        ' left ':'-25px ', 
                        'opacity'   () {  var $ this = $ (this); $ this.find ('ul'). fadeOut (500);    $ this.find ('img'). stop (). animate ({ 'width': '52px ', 'height': '52px ',    'top': '0 px ',  'left': '0 px ',   'opacity': '0 .1 '    }, 5000, 'easeOutBack');     $ this.find ('a: first, h2 '). removeClass (' active ');                 }             );             });         </ script>


Ось і все... Скачати безкоштовно скрипт


scripts
927 10.11.13



Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера