W tym artykule dowiecie się w jaki sposób stworzyć menu akordeonowe, które funkcjonuje m.in. na stronie www.apple.com. Na tej samej zasadzie działa również moje portfolio, gdzie każda zakładka działa jak osobny dział na stronie (www.waterdesign.pl).
Krok 1 – Struktura html naszej rozwijanej listy
Całe menu akordeonowe oparte jest na liście zagnieżdżonej oraz divach, w których zamieszczane są pozycje drugiego zagłębienia menu oraz ewentualna treść nie będąca listą.
Pojedyncza zakładka od strony htmlowej w naszym przykładzie wygląda następująco:
-
-
<ul>
-
-
<li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>
-
<li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>
-
<li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
</ul>
-
Wygląd:
Pierwsza pozycja w menu (li.kategoria) jest zawsze widoczna. Elementem, który dzięki funkcji javascript będzie chowany, a po kliknieciu na li.kategoria będzie ukazywany jest ul.fade.
Całkowity kod html naszej pokazówki przestawia się tak jak widać to poniżej:
-
-
<div id="page">
-
<ul>
-
<li class="kategoria"><div class="naglowek"><a class="link rss" href="#">Subscribe RSS</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://pl.wikipedia.org/wiki/RSS">RSS – Wikipedia</a></li>
-
<li><a href="http://vivee.info/2009/02/15/jak-wyizolowac-liczbe-subskrybentow-rss-korzystajac-z-feedburnera/">RSS – korzystanie z feedburnera</a></li>
-
<li><a href="http://dobreprogramy.pl/index.php?dz=1&t=95&Czytniki+RSS">Czytniki RSS</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
<li class="kategoria"><div class="naglowek"><a class="link facebook" href="#">Facebook</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://www.facebook.com/">Facebook – Main Page</a></li>
-
<li><a href="http://www.facebook.com/">Facebook – Rejestracja</a></li>
-
<li><a href="http://www.facebook.com/pages/create.php">Facebook – Stwórz swoją stronę</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
<li class="kategoria"><div class="naglowek"><a class="link technorati" href="#">Technorati</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://technorati.com/">Technorati – Main Page</a></li>
-
<li><a href="http://technorati.com/technology/">Technorati – Technology</a></li>
-
<li><a href="http://technorati.com/technology/it/">Technorati – IT</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
<li class="kategoria"><div class="naglowek"><a class="link twitter" href="#">Twitter</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://twitter.com/">Twitter – Main Page</a></li>
-
<li><a href="https://twitter.com/signup">Twitter – Join</a></li>
-
<li><a href="https://twitter.com/viveeinfo">Vivee na Twitterze</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
<li class="kategoria"><div class="naglowek"><a class="link vimeo" href="#">Vimeo</a></div>
-
<ul class="fade">
-
<li>
-
<div class="text">
-
<ul>
-
<li><a href="http://vimeo.com/">Vimeo – Main Page</a></li>
-
<li><a href="http://vimeo.com/join">Vimeo – Join</a></li>
-
<li><a href="http://vimeo.com/upload/video">Vimeo – Upload</a></li>
-
</ul>
-
</div>
-
</li>
-
</ul>
-
</li>
-
-
</ul>
-
</div>
-
Niektóre dodatkowe klasy w htmlu zostały tutaj wprowadzone celowo w celu upiększeń poszczególnych zakładek pierwszego poziomu. Także na klasy typu "twitter", "vimeo", itp w swoich wersjach menu akordeonowego nie musicie zwracać uwagi (chyba, że tak jak tutaj chcecie aby każda zakładka miała inny kolor, ikonkę, itp).
Upiększanie menu, czyli struktura CSS
Jak łatwo jest się domyślić każdy kod CSS, który decydować będzie o wyglądzie może być inny.
-
-
* {
-
padding:0;
-
margin:0;
-
}
-
-
img {
-
border:0;
-
}
-
-
body {
-
background:#f4f3ef;
-
text-align:center;
-
}
-
-
#page {
-
width:800px;
-
text-align:left;
-
margin:0 auto;
-
}
-
-
#page ul {
-
list-style-type:none;
-
width:100%;
-
padding:20px 0 0 0;
-
}
-
-
ul ul {
-
background:url(img/tlo.png);
-
padding:0!important;
-
}
-
-
li {
-
font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
-
word-spacing:3px;
-
vertical-align:middle;
-
}
-
-
div.text {
-
width:780px;
-
padding:10px;
-
line-height:20px;
-
text-align:justify;
-
font:11px Tahoma, Arial, Helvetica, sans-serif;
-
letter-spacing:1px;
-
color:#7a7a7a;
-
background:url(text.png) repeat-x top;
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
border-radius: 5px;
-
}
-
-
div.text p {
-
margin:0 0 10px 0;
-
}
-
-
div.text ul {
-
list-style-type:none;
-
}
-
-
div.text ul li {
-
font:12px Helvetica, Tahoma, Arial, Geneva, sans-serif!important;
-
margin:2px 0!important;
-
}
-
-
div.text ul li a {
-
color:#585858;
-
font-weight:bold;
-
text-decoration:none;
-
}
-
-
div.text ul li a:hover {
-
color:#08a2b9;
-
}
-
-
.kategoria a.link {
-
display:block;
-
width:780px;
-
padding:22px 0 5px 20px;
-
font:22px "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
-
font-weight:bold;
-
color:#fafafa;
-
text-decoration:none;
-
margin:0 0 2px 0;
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
border-radius: 5px;
-
height:47px;
-
text-shadow: 1px 1px 1px #5d5d5d;
-
}
-
-
.kategoria a.link:hover {
-
color:#ffffff;
-
text-decoration:none;
-
}
-
Całkowita szerokość zakładek i zawartości, która się pojawia po kliknięciu na nie uzależiona jest od od diva w jakim się znajduje czyli od diva #page. Ma on nadaną konkretną szerokość i wyśrodkowany jest on względem okna przeglądarki.
Odrobina CSS3
CSS3 niestety na obecną chwilę nie jest jeszcze obsługiwany przez wszystkie przeglądarki internetowe. Te, które radzą sobie z nim całkiem sprawnie to:
- Firefox (od wersji 3 w górę)
- Google Chrome
- Safari
- Opera (wersja 9.64 obsługuje zaledwie kilka możliwości jakie daje nam CSS3)
W menu akordeonowym zostały wykorzystane takie efekty jak:
1. Cień pod napisem
-
-
text-shadow: 1px 1px 1px #5d5d5d;
-
2. Zaokrąglone rogi
-
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
border-radius: 5px;
-
Efekt końcowy zabawy htmlowo-cssowej podejrzeć można w wersji Demo
jQuery
Do w pełni działajacych zakładek brakuje nam jeszcze podłączenie odpowiednich skryptów JS.
W sekcji należy zamieścić odnośnik do jQuery:
-
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
oraz skrypt, z funkcją dzięki której zakładki zachowują się zgodnie z naszymi założeniami.
-
<script type="text/javascript" src="js/menu.js"></script>
Nasz skrypt, który decyduje o pojawianiu się i znikaniu zawartości wygląda następująco:
-
-
$(document).ready(function() {
-
$("ul.fade").not(":first").hide();
-
$("a.link").click(function(){
-
$(".fade:visible").hide();
-
$(this).parent().next(‘.fade’).fadeIn();
-
return false;
-
});
-
});
-
gdzie:
-
$("ul.fade).not(":first").hide();
-
Po wczytaniu skryptu ukrywa nam wszystkie podtreści zakładek poza pierwszą, która zawsze będzie pokazana i tym samym sugeruje userom, że kliknięcie w następną zakładkę pokaże się jej zawartość.
-
$(".fade:visible").hide();
Zagnieżdżone ul o klasie .fade będzie ukazywane po wcześniejszym kliknięciu na a.link.
Nadanie klasy pojawiającemu się ul dodatkowo zabezpiecza nas przed sytuacją kiedy w treści mamy następne ul i nie chcemy aby one dziedziczyły to zachowanie.
Został również zastosowany efekt fadeIn dla pojawiających się zawartości menu.
-
$(this).parent().next(‘.fade’).fadeIn();
Więcej o fade’ach przeczytać możecie w artykule: “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”.
Jeżeli chcemy aby zawartość pojawiała się nam po najeździe na zakładkę, a nie dopiero po kliknięciu należy w tym fragmencie js’a
-
$("a.link").click(function(){
podmienić click na hover:
-
$("a.link").hover(function(){
Hover sprawi, że menu to zachowywać się będzie identycznie jak to zamieszczone na www.apple.com.
Jeszcze jednym efektem dla urozmaicenia wyglądu tego menu jest zwiększenie krycia po najechaniu kursorem na .kategoria a.link.
-
-
$(".kategoria a.link").fadeTo("fast", .8);
-
$(".kategoria a.link").hover(function(){
-
$(this).fadeTo("fast", 1);
-
},function(){
-
$(this).fadeTo("fast", .8);
-
});
-
Tym sposobem tak oto wygląda całkowity kod JS, który przyczynia się do ozywienia menu akordeonowego:
-
-
$(document).ready(function() {
-
$("ul.fade").not(":first").hide();
-
$("a.link").click(function(){
-
$(".fade:visible").hide();
-
$(this).parent().next(‘.fade’).fadeIn();
-
return false;
-
});
-
-
$(".kategoria a.link").fadeTo("fast", .8);
-
$(".kategoria a.link").hover(function(){
-
$(this).fadeTo("fast", 1);
-
},function(){
-
$(this).fadeTo("fast", .8);
-
});
-
-
});
-
W taki sposób przestawia się tworzenie akoreonowego menu,
mam nadzieje, że artykuł ten okaże się dla Was pomocny.
Artykuł stworzony dla serwisu Vivee.info
