jQuery menu (část 4)

 2012-01-31 00:00:00
 Dmitry Burobin

V prvních třech částech jsme rozebrali základní principy práce selektorů a ukázal jsem několik příkladů. V tomto článku zkusím akcentovat Váši pozornost na realizaci JavaScript menu.

Slide menu

Dva slide-menu na stránce: nahoře a dolu. Ukázka!

Slide menu

Kliknutím na odkaz s třídou btn-class, vzjíždí panel s menu. Částečně se daný příklad vyskytuje v třetí části, takže nebudu ho rozebírat detailně, uvédu jenom JavaScript kód s poznámkami:


<script type="text/javascript">
// Když se stránka načte
$(document).ready(function(){
    
// když zmačkneme tlačítko s třídou btn-slide (horní menu)
    
$(".btn-slide").click(function(){
        
// vysouváme/schováváme panel s id = panel1
        
$("#panel1").slideToggle("slow");
        
// Měníme třídu odkazu
        
$(this).toggleClass("active");
        
// a nic neděláme dál (abysme nepřešli na odkazovanou stránku)
        
return false;
    });
 
    
// když zmačkneme tlačítko s třídou "btn-slide2" (spodní menu)
    
$(".btn-slide2").click(function(){
        
//  vysouváme/schováváme panel s id = panel2
        
$("#panel2").slideToggle("slow");
        
// Měníme třídu odkazu
        
$(this).toggleClass("active2");
        
// a nic neděláme dál (abysme nepřešli na odkazovanou stránku)
        
return false;
    });
});
</script>

Slide menu 2

Ukázka!

Slide-menu zleva a zprava stránky. Zaprvé připravíme HTML:


<div class="left">
    <!-- 
Obsah menuschováváme ho -->
    <
div class="panel">
        <
ul>
           <
li><a href="#" title="Prvek 1">Prvek 1</a></li>
           <
li><a href="#" title="Prvek 2">Prvek 2</a></li>
           <
li><a href="#" title="Prvek 3">Prvek 3</a></li>
        </
ul>
        <
ul>
           <
li><a href="#" title="Prvek 1">Prvek 1</a></li>
           <
li><a href="#" title="Prvek 2">Prvek 2</a></li>
           <
li><a href="#" title="Prvek 3">Prvek 3</a></li>
        </
ul>
        <
ul>
           <
li><a href="#" title="Prvek 1">Prvek 1</a></li>
           <
li><a href="#" title="Prvek 2">Prvek 2</a></li>
           <
li><a href="#" title="Prvek 3">Prvek 3</a></li>
        </
ul>
    </
div>
    <!-- 
Panel s tlačítkem -->
    <
class="slide"><a href="#" class="btn-slide">Menu</a></p>
</
div>

Měli byste dostat toto:

Slide menu

Teď vytvořime zpracování události pro odkaz s třídou btn-slide:


// zpracování události pro odkaz s třídou btn-slide
$(".btn-slide").toggle(function(){
    
// ... první kliknutí na odkaz
    // vracíme false
    
return false;
},function(){
    
// ... druhý kliknutí na odkaz
    // vracíme false
    
return false;
});

Pak potřebujeme najít prvek s třídou panel a vysunout ho na 120 pixelů:


// jdeme na dvě úrovně nahoru, uvnitř prvku (div s třídou left/right) nacházime potřebný prvek a přidáváme mu 120px k šířce.
$(this).parent().parent().find(".panel").animate({"width""+=120px"}, "slow");
// zaměňujeme třídi tlačítka (pro změnu šipky)
$(this).toggleClass("active");

Spojujeme všechno dohromady:


$(document).ready(function(){
    $(".btn-slide").toggle(function(){
        $(this).parent().parent().find(".panel").animate({"width""+=120px"}, "slow");
        $(this).toggleClass("active"); return false;
    },function(){
        $(this).parent().parent().find(".panel").animate({"width""-=120px",opacity"hide"}, "slow");
        $(this).toggleClass("active"); return false;
    });
});

Drop-down menu.

Ukázka!

Jedna z nejběžnějších realizaci menu je vodorovně vypadávající menu, určitě ho můžeme udělat pomocí CSS, ale tento článek je o jQuery. Začneme HTML:

Drop-down


<div class="topmenu">
    <
ul>
        <
li><a href="#" title="Меню 1">Menu 1</a>
            <
ul>
               <
li><a href="#" title="Prvek 1.1">Prvek 1.1</a></li>
               <
li><a href="#" title="Prvek 1.2">Prvek 1.2</a></li>
               <
li><a href="#" title="Prvek 1.3">Prvek 1.3</a></li>
            </
ul>
        </
li>
        <
li><a href="#" title="Меню 2">Menu 2</a>
            <
ul>
               <
li><a href="#" title="Prvek 2.1">Prvek 2.1</a></li>
               <
li><a href="#" title="Prvek 2.2">Prvek 2.2</a></li>
               <
li><a href="#" title="Prvek 2.3">Prvek 2.3</a></li>
            </
ul>
        </
li>
        <
li><a href="#" title="Меню 3">Menu 3</a>
            <
ul>
               <
li><a href="#" title="Prvek 3.1">Prvek 3.1</a></li>
               <
li><a href="#" title="Prvek 3.2">Prvek 3.2</a></li>
               <
li><a href="#" title="Prvek 3.3">Prvek 3.3</a></li>
            </
ul>
        </
li>
    </
ul>
</
div>

Dál potřebujeme přidat funkci pro událost hover pro prvky li:


$('.topmenu ul li').hover(
    function() {
        
// ...
    
},
    function() {
        
// ...
    
}
);

A zobrazujeme pod-menu:


// nacházime prvek ul a voláme animaci slideDown
$(this).find('ul').slideDown();
// měníme pozadí vybraného prvku, tím že přidáváme třídu active
$(this).addClass("active");

A spojime to dohromady:


$(document).ready(function(){
    $(
'.topmenu ul li').hover(
        function() {
            $(
this).addClass("active");
            $(
this).find('ul').stop(truetrue); 
            $(
this).find('ul').slideDown();
        },
        function() {
            $(
this).removeClass("active");
            $(
this).find('ul').slideUp('fast');
        }
    );
});

Drop-down AJAX menu.

Ukázka!

Vodorovně vypadávající menu s načtením prvků Ajax-em. Zaprvné potřebujeme samotné menu:


<div class="topmenu">
    <
ul>
        <
li id="menu1"><a href="#" title="Menu 1">Menu 1</a></li>
        <
li id="menu2"><a href="#" title="Menu 2">Menu 2</a></li>
        <
li id="menu3"><a href="#" title="Menu 3">Menu 3</a></li>
    </
ul>
</
div>

A připravime soubory pro pod-menu, nechť to budou menu1.html, menu2.html a menu3.html - podle id oppovídajících prvků menu (nejspíš dané prvky se budou generovat dynamický, ale pro ulehčení příkladu použijeme statické stránky):

Drop-down

Příklad menu1.html:


<ul>
    <
li><a href="#" title="Prvek 1">Prvek 1</a></li>
    <
li><a href="#" title="Prvek 2">Prvek 2</a></li>
    <
li><a href="#" title="Prvek 3">Prvek 3</a></li>
</
ul>

Teď, jako v předchozím příkladu, potřebujeme zpracovát událost hover:


$(document).ready(function(){
    $(
'.topmenu ul li').hover(
        function() {
            
// ... tuto část ještě dopišeme
            
$(this).addClass("active");
        },
        function() {
            
// necháme tak jak to je
            
$(this).removeClass("active");
            $(
this).find('ul').slideUp('fast');
        }
    );
});

Teď potřebujeme načíst potřebné prvky menu pomocí AJAX:


// dostáváme id aktivního prvku
var id = $(this).attr('id');
// zapisujeme prvek do proměnné
var li = $(this);
$.
ajax({
     
// formujeme jméno vyžadující AJAXem stránky
     
url'ajax/'+id+'.html',
     
beforeSend: function(){
          
// před tím než splnít činnost měníme třísu prvku - zobrazujeme loading obrázek
          
li.addClass('loading');
     },
     
success: function(data){
          
// vyplňujeme pod-menu
          
li.append(data);
          
// ukazujeme co jsme dostali
          
li.find('ul').slideDown();
          
// odstraňujeme loading obrázek
          
li.removeClass('loading');
     }
});

Spojime to:


(document).ready(function(){
    $(
'.topmenu ul li').hover(
        function() {
            
// ověřujeme jestli nebýl načten nějaký prvek už předtím
            
if ($(this).find('ul').length == 0) {
                var 
id = $(this).attr('id');
                var 
li = $(this);
                $.
ajax({
                    
url'ajax/'+id+'.html',
                    
beforeSend: function(){
                         
li.addClass('loading');
                    },
                    
success: function(data){
                         
li.append(data);
                         
li.find('ul').stop(truetrue); 
                         
li.find('ul').slideDown();
                         
li.removeClass('loading');
                    }
                });
            } else {
                $(
this).find('ul').stop(truetrue); 
                $(
this).find('ul').slideDown();
            }
            $(
this).addClass("active");
        },
        function() {
            $(
this).find('ul').slideUp('fast');
            $(
this).removeClass("active");
        }
    );
});

Drop-down dvojité menu.

Ukázka!

Vertikální vypadávající menu:

Drop-down


$(document).ready(function(){
    
    $(
'.topmenu ul li').hover(
        function() {
            $(
this).find('ul:first').stop(truetrue);
            $(
this).find('ul:first').slideDown();
        },
        function() {
            $(
this).find('ul:first').slideUp('fast');
        }
    );
    
// všem prvkům menu s vnořenymi prvky přidej symbol &amp;raquo;
    
$('.topmenu li:has(ul)').find('a:first').append('&amp;raquo;');
});

Float menu.

Ukázka!

Plavoucí menu.

Float menu

Teď postupně - začneme tím, že potřebujeme dostávát informace o současné poloze menu:


// dostáváme informaci z css o poloze horního(pravého) menu
menu1 parseInt($(".right").css("top").substring(0,$(".right").css("top").indexOf("px")));
// Polohu spodního(levého) menu vypočítame z rozměru okna (96 podle oka) 
menu2 = $(window).height() - 96;

Dále potřebujeme napsat funkci pro událost scroll:


$(window).scroll(function () {
// Zde budeme řídit naše menu
});

A naplň:


$(window).scroll(function () {
    
// zjištění nové polohy menu
    
offset1 menu1 + $(document).scrollTop() + "px";
    
offset2 menu2 - $('.left .panel').height() + $(document).scrollTop() + "px";
 
    
// posouváme prvky na nové místi
    
$('.right').animate({top:offset1},{duration:500,queue:false});
    $(
'.left').animate({top:offset2},{duration:1000,queue:false});
});

Taky přidame zobrazení/schovávání prvků pod-menu:


// pro všechny prvky a, kteři se nacházejí v li s vnořeným seznamem ul
$('.panel ul li:has(ul) a').click(function() {
    
// jdeme ku předku, nacházíme ul a zobrazujeme/schováváme ho
    
$(this).parent().find('ul').slideToggle();
    return 
false;
});
// tlačítko + schovává vše ul vnořené do li
$('a.plus').click(function(){
   
// jdeme ku předku, nacházime další prvek, hledáme v něm ul li ul a uplatňujeme efekt slideUp
   
$(this).parent().next().find('ul li ul').slideUp('fast');
   return 
false;
});
// tlačítko - zobrazuje všechny ul vnořené do li
$('a.minus').click(function(){
   
// jdeme ku předku, nacházime další prvek, hledáme v něm ul li ul a uplatňujeme efekt slideDown
   
$(this).parent().next().find('ul li ul').slideDown('slow');
   return 
false;
});

To je pro dnešek vše, děkuji za pozornost. Dál se podívame na základy AJAXu.
Tu ještě mate archiv se všema příklady

Zdroj:http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

title=
Systém Orphus
Napište komentář.
Celkem komenrářů(37)
Ronweix - 2017-11-17  20:40:45
 Extra Super Cialis [url=http://buyonlinecial.com]cialis buy online[/url] Cialis Professional India
Jeffpoonia - 2017-11-17  07:54:27
 Order Deltasone Cheapest Nonprescription Bactrim [url=http://cialtobuy.com ]cialis online[/url] Cheap Viagra Online Ozz Pills
Jeffpoonia - 2017-11-17  07:54:26
 Order Deltasone Cheapest Nonprescription Bactrim [url=http://cialtobuy.com ]cialis online[/url] Cheap Viagra Online Ozz Pills
Jeffpoonia - 2017-11-17  07:54:25
 Order Deltasone Cheapest Nonprescription Bactrim [url=http://cialtobuy.com ]cialis online[/url] Cheap Viagra Online Ozz Pills
Jeffpoonia - 2017-11-17  07:54:23
 Order Deltasone Cheapest Nonprescription Bactrim [url=http://cialtobuy.com ]cialis online[/url] Cheap Viagra Online Ozz Pills
Ronweix - 2017-11-04  20:44:59
 Propecia Online Pharmacy Canada Viagra Cialis Naturale Ajanta Pharma Limited Kamagra [url=http://cheapviafast.com]viagra prescription[/url] Compro Viagra En Valencia Classification Of Amoxicillin Viagara Samples Ove
ight
Ronweix - 2017-11-04  20:44:58
 Propecia Online Pharmacy Canada Viagra Cialis Naturale Ajanta Pharma Limited Kamagra [url=http://cheapviafast.com]viagra prescription[/url] Compro Viagra En Valencia Classification Of Amoxicillin Viagara Samples Ove
ight
Ronweix - 2017-11-04  20:44:56
 Propecia Online Pharmacy Canada Viagra Cialis Naturale Ajanta Pharma Limited Kamagra [url=http://cheapviafast.com]viagra prescription[/url] Compro Viagra En Valencia Classification Of Amoxicillin Viagara Samples Ove
ight
Ronweix - 2017-11-04  20:44:55
 Propecia Online Pharmacy Canada Viagra Cialis Naturale Ajanta Pharma Limited Kamagra [url=http://cheapviafast.com]viagra prescription[/url] Compro Viagra En Valencia Classification Of Amoxicillin Viagara Samples Ove
ight
Ronweix - 2017-10-30  22:45:36
 By Fish Amoxicillin Photos De Pilules Amoxil [url=http://cheaplevi.com]levitra billig[/url] Maxalt Obtenez Dapoxetine Online No Prescription Rxmeds Hub
Ronweix - 2017-10-15  16:44:59
 Viagra Scaduto Conseguenze Mediche [url=http://bestviaonline.com]online pharmacy[/url] Generique Kamagra 100mg Comprare Viagra Online Italia Cialis Crea Dependencia
Ronweix - 2017-10-15  16:44:57
 Viagra Scaduto Conseguenze Mediche [url=http://bestviaonline.com]online pharmacy[/url] Generique Kamagra 100mg Comprare Viagra Online Italia Cialis Crea Dependencia
Ronweix - 2017-10-15  16:44:56
 Viagra Scaduto Conseguenze Mediche [url=http://bestviaonline.com]online pharmacy[/url] Generique Kamagra 100mg Comprare Viagra Online Italia Cialis Crea Dependencia
Ronweix - 2017-10-15  16:44:55
 Viagra Scaduto Conseguenze Mediche [url=http://bestviaonline.com]online pharmacy[/url] Generique Kamagra 100mg Comprare Viagra Online Italia Cialis Crea Dependencia
Ronweix - 2017-10-13  18:16:18
 Propecia Comparativa [url=http://cheapvia50mg.com]viagra online prescription[/url] Cialis Legal Ohne Rezept Prezzo Kamagra Turchia Medicina Cialis Informacion
Ronweix - 2017-10-11  20:38:31
 Effexor Online Order Cephalexin Caps Amoxil 20mg Uk [url=http://cheapestcial.com]online pharmacy[/url] Want To Buy Bentyl Formulex Levitra Wholesale No Prescription High Dose Amoxicillin
Ronweix - 2017-10-11  20:38:30
 Effexor Online Order Cephalexin Caps Amoxil 20mg Uk [url=http://cheapestcial.com]online pharmacy[/url] Want To Buy Bentyl Formulex Levitra Wholesale No Prescription High Dose Amoxicillin
Ronweix - 2017-10-11  20:38:29
 Effexor Online Order Cephalexin Caps Amoxil 20mg Uk [url=http://cheapestcial.com]online pharmacy[/url] Want To Buy Bentyl Formulex Levitra Wholesale No Prescription High Dose Amoxicillin
Ronweix - 2017-10-11  20:38:28
 Effexor Online Order Cephalexin Caps Amoxil 20mg Uk [url=http://cheapestcial.com]online pharmacy[/url] Want To Buy Bentyl Formulex Levitra Wholesale No Prescription High Dose Amoxicillin
Ronweix - 2017-10-08  09:38:43
 Orislat Buy Online Canadian Ems [url=http://levibuying.com]cheapest levitra 20mg[/url] Prednisolone Order Online Australia Amoxicillin E
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.