problem with slidetoggle

problem with slidetoggle

In this website i try to use a navigation with a pulldown menu. Unfortunately i'm totally new to using js and i have no idea how to solve problems like this. May can you help me with either giving me instructions about how to solve problems generally or/and solving the given problem for me? Thanks

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>

  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Unbenanntes Dokument</title>
  7. <script src="jquery-1.8.0.min.js"></script>
  8. <script src="my_jquery_src.js"></script>
  9. <link href="CSS/Vorlage.css" rel="stylesheet" type="text/css" />
  10. </head>

  12. <body>

  14. <!--Äußerer Rahmen-->
  15. <div id="wrap">

  17. <!--Navigationsleiste-->
  18. <div id="navigation">

  20. <!--Home-->
  21. <a href="">
  22. <div id="home" >
  23. <h1>Home</h1>
  24. </div>
  25. </a>

  27. <!--Allgemeines-->
  28. <div id="pulldown">
  29. <a href="">
  30. <div id="allgemeines">
  31. <h1>Home</h1>
  32. </div>
  33. </a>
  34. <div id=menu>
  35. <div></div>
  36. <div></div>
  37. <div></div>
  38. <div></div>
  39. <div></div>
  40. <div id="last"></div>
  41. </div>
  42. </div>

  1. $(document).ready(function(){
  2.   $("#allgemeines").click(function(){
  3.     $("#menu").slidetoggle("slow");
  4.   });
  5.  });

  1. @charset "utf-8";

  3. html {
  4.     margin: 0;
  5.     padding: 0;
  6. }

  8. body  {
  9.     margin: 0;
  10.     padding: 0;
  11.     text-align: center; 
  12.     color: #797979;
  13.     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  14.     font-size: 11px;
  15.     background-color: #FFF;
  16.     font-weight: normal;
  17. }

  19. #wrap {
  20.     width: 930px;
  21.     margin-top: 50px;
  22.     margin-right: auto;
  23.     margin-bottom: 0;
  24.     margin-left: auto;
  25.     top: 0px;
  26.     position: relative;
  27. }

  29. #navigation{
  30.     width: 930px;
  31.     height: 30px;
  32.     background-image:url(../JPGs/Navi.jpg);
  33.     z-index:1;
  34. }

  36. #home{
  37.     margin-left:10px;
  38. }

  40. #home , #about_us , #contact , #newsletter , #agb , #impressum , #pulldown{
  41.     width: 130px;
  42.     height: 30px;
  43.     background-image: url(../JPGs/NaviBtn.jpg);
  44.     float:left;
  45. }

  47. #menu{
  48.     display:none
  49. }

  51. #wrap #navigation #pulldown div {
  52.     height: 30px;
  53.     width: 130px;
  54. }

  56. #wrap #navigation #menu div{
  57.     background-color:#ffe600;
  58. }

  60. #wrap #navigation #menu #last{
  61.     background-image:url(../JPGs/NaviBtnLast.jpg);
  62. }

  64. #wrap #navigation #menu #last:hover , #wrap #navigation #menu #last:active{
  65.     background-image:url(../JPGs/NaviBtnLastActive.jpg);
  66. }



  70. #home:hover , #allgemeines:hover , #about_us:hover  , #contact:hover  , #newsletter:hover  , #agb:hover  , #impressum:hover , #home:active , #allgemeines:active , #about_us:active  , #contact:active  , #newsletter:active  , #agb:active  , #impressum:active{
  71.     background-image:url(../JPGs/NaviBtnActive.jpg);
  72. }

  74. #wrap #navigation #menu div:active , #wrap #navigation #menu div:hover {
  75.     background-image:url(../JPGs/NaviBtn.jpg);
  76. }

  78. #home:hover h1 , #pulldown #allgemeines:hover h1 , #about_us:hover h1  , #contact:hover h1  , #newsletter:hover h1  , #agb:hover h1 , #impressum:hover h1 , #wrap #navigation #pulldown div:hover , #home:active h1 , #allgemeines:active h1 , #about_us:active h1  , #contact:active h1  , #newsletter:active h1  , #agb:active h1  , #impressum:active h1 , #wrap #navigation #pulldown div:active h1{
  79.     color:#000099;
  80. }

  82. #home h1 , #allgemeines h1 , #about_us h1 , #contact h1 , #newsletter h1 , #agb h1 , #impressum h1 , #wrap #navigation #menu div h1 {
  83.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  84.     font-size: 18px;
  85.     text-decoration: underline;
  86.     position: absolute;
  87.     top: 4px;
  88. }

  90. #home h1{
  91.     left: 51px;
  92. }

  94. #allgemeines h1{
  95.     left: 181px;
  96. }

  98. #about_us h1{
  99.     left: 298px;
  100. }

  102. #contact h1{
  103.     left: 432px;
  104. }

  106. #newsletter h1{
  107.     left: 550px;
  108. }

  110. #agb h1{
  111.     left: 707px;
  112. }

  114. #impressum h1{
  115.     left: 811px;
  116. }

  118. #changing_pictures{
  119.     width:930px;
  120.     height:500px;
  121.     position:absolute;
  122.     top:900px;
  123.     left:0px;
  124.     z-index:0;
  125. }

  127. a {
  128.     color: #797979;
  129.     text-decoration: none;
  130. }

  132. h1 {
  133.     color: #858585;
  134.     font-size: 22px;
  135.     font-style: italic;
  136.     font-weight: bolder;
  137.     margin-top: 0px;
  138.     margin-right: 20px;
  139.     margin-bottom: 0px;
  140.     margin-left: 0px;
  141.     float: right;
  142.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  143. }

  145. h1:first-letter {
  146.     margin-left: 0px;
  147. }

  149. h2 {
  150.     font-size: 16px;
  151.     font-weight: bold;
  152.     margin-top: 0px;
  153.     margin-right: 0px;
  154.     margin-bottom: 5px;
  155.     margin-left: 0px;
  156. }

  158. h3 {
  159.     font-size: 12px;
  160.     font-weight: bold;
  161.     padding: 0px;
  162.     margin-top: 5px;
  163.     margin-right: 0px;
  164.     margin-bottom: 5px;
  165.     margin-left: 0px;
  166. }

  168. img {
  169.     border-top-style: none;
  170.     border-right-style: none;
  171.     border-bottom-style: none;
  172.     border-left-style: none;
  173. }

  175. p {
  176.     margin-top: 5px;
  177.     margin-right: 0px;
  178.     margin-bottom: 5px;
  179.     margin-left: 0px;
  180.     font-weight: normal;
  181. }

  183. strong {
  184.     font-weight: bold;
  185. }

  187. ul {
  188.     margin-top: 3px;
  189.     margin-bottom: 3px;
  190.     padding-left: 50px;
  191. }