Vyjíždějící menu pomocí jQuery.

 2012-01-29 00:00:00
 Dmitry Burobin

V tomto článku vytvoříme velice pohledné vyjíždějící menu pomocí jQuery.

Toto menu bude obsahovat název a popis pro každý prvek. Bude vyjíždět odspodu, a uvidíme ikonku a popis. Použijeme CSS3 vlastnosti pro efekty odstínu a jQuery pro funkčnost.

Sada ikonek je od Luna Grey - http://dryicons.com/free-icons/preview/luna-grey-icons/

Ke konečnému archivu, se zdrojovým kódem, k tomuto článku ikonky přikládat nebudu, jelikož autor zakazuje jejích šíření. Název souborů jsem nechal stejný, takže potřebujete jen stáhnout ikonky a uložit je do složky images.

Ukázka!

Menu

Označení

Menu se bude nacházet uvnitř kontejneru. Bude se skládat z neuspořádaného seznamu s prvky odkazů uvnitř. Prvky odkazů budou obsahovat dva span: jeden pro název a druhý pro popis. Taky použíjeme prvek i pro ikonky.

<div class="container">
    <
ul id="menu">
        <
li>
            <
a>
                <
class="icon_about"></i>
                <
span class="title">About</span>
                <
span class="description">
                    
Learn about us and our services
                
</span>
            </
a>
        </
li>
         <
li>
            <
a>
                <
class="icon_work"></i>
                <
span class="title">Work</span>
                <
span class="description">
                    
See our work and portfolio
                
</span>
            </
a>
        </
li>
        <
li>
            <
a>
                <
class="icon_help"></i>
                <
span class="title">Help</span>
                <
span class="description">
                    
Talk to our support
                
</span>
            </
a>
        </
li>
         <
li>
            <
a>
                <
class="icon_search"></i>
                <
span class="title">Search</span>
                <
span class="description">
                    
Search our website
                
</span>
            </
a>
        </
li>
    </
ul>
</
div>
Nezapomeňte opravit odkazy na svoje.

CSS

Začneme zaoblením rohů kontejneru. Kontejner bude mít relativní polohu, jelikož samotné menu je absolutní. A budeme potřebovat schovat část s popisem pomocí overflow:hidden. Vytvoříme odstíny a zaobleníme rohy pomocí CSS3.


.container{
    
width:900px;
    
height:130px;
    
margin:0 auto;
    
position:relative;
    
overflow:hidden;
    
border:3px solid #fff;
    
background-color:#fff;
    
-moz-box-shadow:1px 1px 6px #000;
    
-webkit-box-shadow:1px 1px 6px #000;
    
-moz-border-radius:0px 0px 20px 20px;
    -
webkit-border-bottom-left-radius:20px;
    -
webkit-border-bottom-right-radius:20px;
    
border-radius:0px 0px 20px 20px;
}
ul#menu{
    
list-style:none;
    
position:absolute;
    
bottom:0px;
    
left:20px;
    
font-size:36px;
    
font-familyHelveticaArialsans-serif;
    
font-weightbold;
    
color:#999;
    
letter-spacing:-2px;
}
ul#menu li{
    
float:left;
    
margin:0px 10px 0px 0px;
}
ul#menu a{
    
cursor:pointer;
    
position:relative;
    
float:left;
    
bottom:-95px;
    
line-height:20px;
    
width:210px;
}

Teď se podívame na třídy pro ikonky:


.icon_about,
.
icon_work,
.
icon_help,
.
icon_search{
    
width:64px;
    
height:64px;
    
display:block;
    
left:140px;
    
top:50px;
    
position:absolute;
}
.
icon_about{
    
background:transparent url(../images/id_card.pngno-repeat top left;
}
.
icon_work{
    
background:transparent url(../images/globe.pngno-repeat top left;
}
.
icon_help{
    
background:transparent url(../images/help.pngno-repeat top left;
}
.
icon_search{
    
background:transparent url(../images/find.pngno-repeat top left;
}

CSS pro název a popis vypadají takto:


ul#menu span.title{
    
display:block;
    
height:26px;
    
text-shadow:1px 1px 1px #000;
    
color:#B7B7B6;
    
text-indent:10px;
}
ul#menu span.description{
    
width:140px;
    
height:80px;
    
background-color:#B7B7B6;
    
border:3px solid #fff;
    
color:#fff;
    
display:block;
    
font-size:24px;
    
padding:10px;
    -
moz-box-shadow:1px 1px 6px #000;
    
-webkit-box-shadow:1px 1px 6px #000;
    
box-shadow:1px 1px 6px #000;
    
-moz-border-radius:10px;
    -
webkit-border-radius:10px;
    
border-radius:10px;
}

Též chceme, aby oba spany měnili barvu pozadí a textu, takže nadefinujeme pro ně třídy:


ul#menu a:hover span.description{
    
background-color:#54504F;
}
ul#menu a:hover span.title{
    
color:#54504F;
}

jQuery

Kód jQuery je opravdu jednoduchý, jelikož děláme jen dvě veci: vyjíždějící prvek a ikonku.


$(document).ready(function(){
    $(
'#menu li').hover(
        function () {
            var 
$this = $(this);
            $(
'a',$this).stop(true,true).animate({
                    
'bottom':'-15px'
                
}, 300);
            $(
'i',$this).stop(true,true).animate({
                    
'top':'-10px'
                
}, 400);
        },
        function () {
            var 
$this = $(this);
            $(
'a',$this).stop(true,true).animate({
                    
'bottom':'-95px'
                
}, 300);
            $(
'i',$this).stop(true,true).animate({
                    
'top':'50px'
                
}, 400);
        }
    );
});

Proto, aby se prvek hýbal měníme dolní pozici a animujeme ji. Pro ikonky měnime hodnotu top a zvětšujeme čas, jelikož chceme udělat menší zpoždění.

To je vše.

Zdroj: www.tympanus.net
Archiv: menu.zip
Systém Orphus
Napište komentář.
Celkem komenrářů(31)
Haroreab - 2017-11-07  20:54:17
 Cialis Wirkt Nicht Tun [url=http://cheapviasales.com]viagra[/url] Best Prices For Prescription Viagra Do Low Cost Viagara Pills Work
Haroreab - 2017-11-07  20:54:16
 Cialis Wirkt Nicht Tun [url=http://cheapviasales.com]viagra[/url] Best Prices For Prescription Viagra Do Low Cost Viagara Pills Work
Haroreab - 2017-11-07  20:54:15
 Cialis Wirkt Nicht Tun [url=http://cheapviasales.com]viagra[/url] Best Prices For Prescription Viagra Do Low Cost Viagara Pills Work
Haroreab - 2017-11-07  20:54:14
 Cialis Wirkt Nicht Tun [url=http://cheapviasales.com]viagra[/url] Best Prices For Prescription Viagra Do Low Cost Viagara Pills Work
Haroreab - 2017-11-05  07:12:45
 Amoxicillin And Allergic And Reaction Bentyl In Inte
et [url=http://howtogetvia.com]viagra online pharmacy[/url] Eoro Med Online Cialis O Levitra Yahoo Pacific Care Pharmacy Vanuatu
Haroreab - 2017-10-29  17:02:10
 Viagra Online Generic Fast Delivery Order Prednisone Canada [url=http://levibuying.com]cheapest levitra 20mg[/url] Buy Betnovate No Presc Uk Generic For Keflex Amoxicillin For Flu
Haroreab - 2017-10-29  17:02:09
 Viagra Online Generic Fast Delivery Order Prednisone Canada [url=http://levibuying.com]cheapest levitra 20mg[/url] Buy Betnovate No Presc Uk Generic For Keflex Amoxicillin For Flu
Haroreab - 2017-10-29  17:02:08
 Viagra Online Generic Fast Delivery Order Prednisone Canada [url=http://levibuying.com]cheapest levitra 20mg[/url] Buy Betnovate No Presc Uk Generic For Keflex Amoxicillin For Flu
Haroreab - 2017-10-29  17:02:07
 Viagra Online Generic Fast Delivery Order Prednisone Canada [url=http://levibuying.com]cheapest levitra 20mg[/url] Buy Betnovate No Presc Uk Generic For Keflex Amoxicillin For Flu
Haroreab - 2017-10-26  04:23:34
 Clavamox Without A Prescription Cephalexin For Dogs Non Perscription Achat Amoxicillin Pharmacie A Bon Compte France [url=http://bestviaonline.com]viagra online[/url] Diarrhea With Amoxicillin Alli Orlistat
Jeffpoonia - 2017-10-20  23:46:36
 Progesterone Can I Purchase Best Website No Doctor [url=http://cheapestcial.com ]cialis price[/url] Zithromax Patent
Haroreab - 2017-10-20  22:43:33
 Priligy Fast Shipping [url=http://cheapviafast.com]viagra[/url] Viagra Levitra Und Cialis
Haroreab - 2017-10-20  22:43:31
 Priligy Fast Shipping [url=http://cheapviafast.com]viagra[/url] Viagra Levitra Und Cialis
Haroreab - 2017-10-20  22:43:30
 Priligy Fast Shipping [url=http://cheapviafast.com]viagra[/url] Viagra Levitra Und Cialis
Haroreab - 2017-10-20  22:43:29
 Priligy Fast Shipping [url=http://cheapviafast.com]viagra[/url] Viagra Levitra Und Cialis
Haroreab - 2017-10-12  15:15:31
 Priligy 90 Mg Prospecto Cialis 20 Mg [url=http://howmuchisvia.com]viagra[/url] Online Apotheke Tamoxifen
Haroreab - 2017-10-12  15:15:30
 Priligy 90 Mg Prospecto Cialis 20 Mg [url=http://howmuchisvia.com]viagra[/url] Online Apotheke Tamoxifen
Haroreab - 2017-10-12  15:15:29
 Priligy 90 Mg Prospecto Cialis 20 Mg [url=http://howmuchisvia.com]viagra[/url] Online Apotheke Tamoxifen
Haroreab - 2017-10-12  15:15:28
 Priligy 90 Mg Prospecto Cialis 20 Mg [url=http://howmuchisvia.com]viagra[/url] Online Apotheke Tamoxifen
Haroreab - 2017-10-09  05:54:01
 Benazepril 20 [url=http://cialtobuy.com]buy cialis[/url] Tadacip Buy Online
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.