Hey,,
Ik heb nu deze code:
CSS:
ik kan het niet aan t werk krijgen,, weet iemand anders het ms? als je iets nodig hebt post het dan ff
Ik heb nu deze code:
HTML:
<!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>Animated Drop Down Menu with jQuery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_gallery li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_gallery').slideToggle('medium');
});
$('ul.menu_gallery li a').mouseover(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
$('ul.menu_gallery li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
$("ul.menu_contact li:even").addClass("alt");
$('img.menu_head2').click(function () {
$('ul.menu_contact').slideToggle('medium');
});
$('ul.menu_contact li a').mouseover(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
$('ul.menu_contact li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>
</head>
<body>
<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_gallery">
<li><a href="#">Posters</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<img src="images/navigate.png" width="184" height="32" class="menu_head2" />
<ul class="menu_contact">
<li><a href="#">Posters</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
Code:
@charset "utf-8";
/* CSS Document */
body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul, li{margin:0; padding:0; list-style:none;}
.menu_head{border:1px solid #998675;padding-top: 0cm}
.menu_head2{border:1px solid #998675;padding-top: 0cm}
.menu_gallery {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_gallery li{background:#493e3b;}
.menu_gallery li.alt{background:#362f2d;}
.menu_gallery li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_gallery li a:hover{text-decoration: underline;}
.menu_contact {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_contact li{background:#493e3b;}
.menu_contact li.alt{background:#362f2d;}
.menu_contact li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_contact li a:hover{text-decoration: underline;}
ik kan het niet aan t werk krijgen,, weet iemand anders het ms? als je iets nodig hebt post het dan ff
