Webmaster & Internet
heute mal ein Tutorial zu jQuery.
Das wohl beliebteste JavaScript-Framework bietet unzählige Möglichkeiten auf sehr einfache Weise coole und professionelle Websites zu erstellen. Download
Im folgenden werden Drop-Down-Menüs und eine sog. Social-Network-Bar erstellt.
Drop-Down-Menu:
Code javascript:
1 2 3 4 5 6 7 | $(document).ready(function() {
$(document).find(".menu").hover(function() {
$(this).find(".submenu").stop(true, true).slideDown("slow");
}, function() {
$(this).find(".submenu").stop(true, true).slideUp("slow");
});
}); |
- $(document).ready(function() {... das Standardkonstrunk von jQuery, es bewirkt, dass der Code erst ausgeführt wird, wenn das dokument - inklusive Ressourcen wie Bildern - komplett geladen ist
- $(document).find(".menu").hover(function() {... für alle Elemente mit class="menu" gilt:
bei mouseover wird DAS EINGESCHLOSSENE submenu erst "slow" runtergeslidet und dann gleich wieder herauf - stop(true, true) bewirkt, dass bei schneller Mausbewegung nicht ewig danach noch hoch und runter geslidet wird
Dazu hier jetzt das Komplettbeispiel:
Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <html>
<head>
<title>First steps in jQuery</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).find(".menu").hover(function() {
$(this).find(".submenu").stop(true, true).slideDown("slow");
}, function() {
$(this).find(".submenu").stop(true, true).slideUp("slow");
});
});
</script>
<style>
.navbar{
width: 450;
margin-left: auto;
margin-right: auto;
}
.menu{
width: 150px;
float: left;
}
.menu a{
font-weight: bold;
text-decoration: none;
color: #000;
}
.menu a:hover{
color: #555;
}
.topmenu{
background-color: #EFE;
padding: 5px;
text-align: center;
font-size: 20px;
}
.submenu{
background-color: #EEE;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
display: none;
line-height: 1.5;
font-size: 16px;
}
</style>
</head>
<body>
<div class="navbar">
<div class="menu">
<div class="topmenu">
<a href="#">Home</a>
</div>
</div>
<div class="menu">
<div class="topmenu">
<a href="#">Tutorials</a>
</div>
<div class="submenu">
<a href="#">Java </a><br />
<a href="#">HTML </a><br />
<a href="#">CSS </a><br />
<a href="#">PHP </a><br />
<a href="#">Batch </a><br />
<a href="#">NASM </a><br />
<a href="#">C++ </a><br />
<a href="#">Shell </a>
</div>
</div>
<div class="menu">
<div class="topmenu">
<a href="#">Kontakt</a>
</div>
<div class="submenu">
<a href="#">Mail-Formular </a><br />
<a href="#">Guestbook </a><br />
<a href="#">Impressum </a>
</div>
</div>
</div>
</body>
</html> |
Social-Network-Bar:
Dazu benötigen wir noch ein zusätzliches Plugin: jqDock
Eigentlich übernimmt das Plugin schon die ganze Arbeit (Darstellung der Icons wie die der Programme beim Mac), also brauchen wir nur noch Graphiken.
Diese sollten folgende Kriterien erfüllen:
- Schatten
- Tranzperenz
- Rundung
Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html>
<head>
<script type='text/javascript' src='jquery-1.6.2.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#sotialbar').jqDock();
});
</script>
</head>
<body>
<div id='sotialbar' style="position: fixed; bottom: 15px; width: 500px; margin-left: -250px; left: 50%;">
<img src='facebook.png' />
<img src='twitter.png' />
<img src='google.png' />
<img src='youtube.png' />
<img src='rss.png' />
</div>
</body>
</html> |
Ansonsten kann ich noch folgende sotial Icon-Collections empfehlen: klick, klick (jedoch nicht so gut für dieses Projekt geeignet)
Einzige sonstige Besonderheit:
position: fixed; bewirkt, dass das ganze beim scrollen immer an der selben stelle bleibt.
Gruß javaDeveloper2011
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung