frycu.com

Dziś wpadłem na pomysł wrzucenia tutoriala na proste menu rozwijane w jQuery. Menu rozwijanych w jQuery jest naprawde sporo i jest w czym wybierać, ale nigdzie nie znalazłem tutoriala, w którym byłoby pokazane jak wrzucić obrazek w menu i zmieniać go w zależności czy kursor jest nad anchorem czy nie.Przy tworzeniu menu rozwijanego skorzystam już z gotowego skryptu o nazwie Droppy.Do stworzenia naszego menu, będziemy również potrzebować jQuery w najnowszej wersji.

A więc do dzieła:

1. Najpierw robimy szkielet naszego menu:

<ul>
<li><a href=”#”>Menu 1</a>
<ul>
<li><a href=”#”>Podmenu 1</a></li>
<li><a href=”#”>Podmenu 2</a></li>
<li><a href=”#”>Podmenu 3 z podmenu</a>
<ul>
<li><a href=”#”>Kolejne podmenu</a></li>
<li><a href=”#”>Kolejne podmenu</a></li>
</ul>
</li>
<li><a href=”#”>Podmenu 4</a></li>
</ul>
</li>
<li><img src=”images/menu-podzial.png” alt=””/></li>
<li><a href=”#”>Menu 2</a></li>
<li><img src=”images/menu-podzial.png” alt=””/></li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Szersze Podmenu 1</a></li>
<li><a href=”#”>Szersze Podmenu 2</a></li>
<li><a href=”#”>Szersze Podmenu 3</a></li>
<li><a href=”#”>Szersze Podmenu 4</a></li>
</ul>
</li>
<li><img src=”images/menu-right.png” alt=”” /></li>
</ul>

2. Tworzymy plik menu.js w którym będziemy mieć funkcje odpowiedzialna za menu:

function mainmenu(){}

$(document).ready(function(){
mainmenu();

$(function() {
$(‘#nav’).droppy({speed: 100});
});

});

3. W sumie to by wystarczyło do stworzenia menu rozwijanego, jednak musimy nadać temu odpowiedni wygląd, a więc musimy zdefiniować odpowiednie style w CSS. Do tego potrzebujemy zdefiniować odpowiednie klasy w naszym menu:

<ul id=”nav”>
<li class=”act”><a href=”#” class=”ccc”>Menu 1</a>
<ul class=”back”>
<li class=”toppodmenu”><a href=”#” class=”short”>Podmenu 1</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 2</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 3 z podmenu</a>
<ul class=”back”>
<li class=”podmenu”><a href=”#” class=”short”>Kolejne podmenu</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Kolejne podmenu</a></li>
</ul>
</li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 4</a></li>
</ul>
</li>
<li class=”act”><img src=”images/menu-podzial.png” alt=””/></li>
<li class=”act”><a href=”#” class=”ccc”>Menu 2</a></li>
<li class=”act”><img src=”images/menu-podzial.png” alt=””/></li>
<li class=”act”><a href=”#” class=”ccc”>Menu 3</a>
<ul class=”back”>
<li class=”toppodmenu”><a href=”#”>Szersze Podmenu 1</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 2</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 3</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 4</a></li>
</ul>
</li>
<li class=”rog”><img src=”images/menu-right.png” alt=”” /></li>
</ul>

I dopisać do tego CSS:

* {
margin:     0;
padding:     0;
}

img {
border:     0px;
}

li {
font-family:         Tahoma, Helvetica, Arial, “MS Trebuchet”, sans-serif;
font-size:             14px;
color:                #00572A;
}

#header {
height:     100px;
width:         400px;
margin:     0 auto;
margin-top:    10px;
}

a {
font-family:         Helvetica, Arial, “MS Trebuchet”, sans-serif;
font-size:             11px;
text-decoration:    none;
margin-top:            16px;
}

#header .menu {
background:     url(images/menu-bg.png) repeat-x;
height:         48px;
}

#header .menu img.left {
float: left;
}

#header .menu img.right {
float: right;
}

#nav, #nav ul {
font-family:             Helvetica, Arial, sans-serif;
letter-spacing:         1px;
margin:                    0;
padding:                0;
list-style-type:        none;
list-style-position:    outside;
position:                relative;
line-height:            30px;
z-index:                10;
}

#nav .podmenu a, #nav .toppodmenu a {
margin:             0;
display:            block;
padding:            0px 5px;
color:                #ffffff;
text-decoration:    none;
background:            #004b8f;
border-top:            1px solid white;
opacity:             0.9;
filter:             alpha(opacity=90);
}

#nav .act .back li.hover, #nav .act .back a:hover {
background:            #004b8f;
height:                30px !important;
opacity:             0.95;
filter:             alpha(opacity=95);
}

#nav .toppodmenu a {
border:     0px;
opacity:     0.9;
filter:     alpha(opacity=90);
}

#nav a {
display: block;
}

#nav a.ccc {
font-family:        Tahoma, Arial, sans-serif;
font-size:            14px;
color:                 #fff;
margin:                0;
float:                left;
border:                0;
padding:            10px;
}

#nav a.ccc:hover, #nav li.hover {
background:        url(images/blue.png) repeat-x;
}

#nav ul.back a:hover {
background-color:        #3773a9;
color:                    #ffffff;
}

#nav li {
float:        left;
position:    relative;
}

#nav li.act {
height:     48px;
}

#nav li.podmenu {
float:        left;
position:    relative;
}

#nav li.toppodmenu {
margin-top:    19px;
float:        left;
position:    relative;
}

#nav li.rog {
float: right;
}

#nav ul {
position:    absolute;
display:    none;
width:        70px;
top:        23px;
left:        0px;
}

#nav li ul a {
width:    220px;
height:    auto;
float:    left;
}

#nav li ul a.short {
width:    160px;
height:    auto;
float:    left;
}

#nav ul ul {
top:    auto;
}

#nav li ul ul {
left:            160px;
margin:            0px 0 0 10px;
border-left:     1px solid white;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display:    none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display:    block;
}

I to tyle :) nasze menu wygląda tak.
Jeśli chcecie pobrać pliki (żeby nie musieć tego kopiować) możecie wejść bezpośrednio tu.
Menu działa pod wszystkimi przeglądarkami (IE 6.x +, FF 2.x +, Opera, Safari, Chrome)..