Pamoka, kaip padaryti su jQuery gražiai išsiskleidžiantį meniu.
Demo puslapis:
žiūrėtiParsisiųsti demo failus:
siųstisArchyvo kodas - manualai.ltTaigi pradedame nuo to, kad sukuriame mažą HTML puslapiuką:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertikaliai išsiskliaidžiančio meniu pamoka | Manualai.lt</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="button">
<img src="images/mygtukas.png" width="184" height="32" class="menu_class" />
<ul class="the_menu">
<li><a href="#">Manualai.lt pradžia</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</div>
</div>
</body>
</html>
Jame, kaip matome tėra keli div'ai:
1) container - laiko visą puslapį per centrą (kad centravimas veiktų ant IE v5-6 reiktų pridėti table elementą).
2) header - laiko savyje antraštę
3) the_menu - laiko meniu elementus
Meniu aprašytas su list HTML tagais <ul> ir <li>.
<ul class="the_menu">
<li><a href="#">Manualai.lt pradžia</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>Į HTML dokumentą yra įtraukti vienas css stilių failas: style.css
<link href="style.css" rel="stylesheet" type="text/css" />CSS failo source'as (spauskite ant "Vidinis tekstas"):
[spoiler]@charset "utf-8";
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}
#container {
margin: auto;
width: 700px;
}
#header {
background-image: url('/images/antraste.jpg');
background-repeat: no-repeat;
height: 82px;
width: 700px;
}
#button {
height: 32px;
width: 184px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
.menu_class {
border:1px solid #1c1c1c;
}
.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;
}
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
[/spoiler]
ir pora JavaScript failų.
jQuery biblioteka - jquery.js:
<script type="text/javascript" src="js/jquery.js"></script>ir slider.js:
<script type="text/javascript" src="js/slider.js"></script>slider.js kodas yra tikrai trumpas ir lengvai suprantamas:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});Paaiškinimai:
Pirma eilutė nurodo skriptui laukti kol visas puslapis bus užkrautas:
$(document).ready(function () {Antra eilutė surenka visus img elementus su klase menu_class ir prideda "event listeners" pelės paspaudimo evento laukimą ar kaip čia išsireiškus
$('img.menu_class').click(function () {Trečia eilutė surenka ul elementus su klase the_menu ir jiems prideda efektą slideToggle vidutiniu greičiu.
$('ul.the_menu').slideToggle('medium');Na ir paskutinės uždaro funkcijas:
});
});Kaip matote, viskas labai paprasta
jei kyla klausimų - nebijokit klausti ;]
pamokos orginalas