Dropdown menu met JQuery

Status
Niet open voor verdere reacties.

Rawox

Gebruiker
Lid geworden
11 jun 2008
Berichten
94
Hey,,

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 ;)
 
Zonder naar de code gekeken te hebben raad ik je deze plugin aan.

Deze lijkt mij precies te doen wat jij wilt.
Kwestie van het CSS aanpassen zodat het op jouw idee lijkt.
 
Wat bedoel je daar precies mee?

Iets van een IFRAME ofzo?
En hoe wil je de scrollbalk aanpassen dan?
 
DHTML Drop down menu?

Nu is het eindelijk gelukt, ik moet mn drop down nog een beetje pimpen maar hij doet het ;)... ik wil alleen dat ie over de hele pagina doorloopt net zoals bijvoorbeeld met de gradient op: http://members.freewebs.com/, maar dan met mijn menu balk... kan dit, enn hoe??
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan