{"id":92,"date":"2008-03-26T15:15:32","date_gmt":"2008-03-26T13:15:32","guid":{"rendered":"http:\/\/www.hermione.de\/blog\/?p=92"},"modified":"2008-04-01T14:25:33","modified_gmt":"2008-04-01T12:25:33","slug":"animiertes-menu-jquery","status":"publish","type":"post","link":"http:\/\/blog.hermione.de\/?p=92","title":{"rendered":"Animiertes Menu [jquery]"},"content":{"rendered":"<h4>Animiertes Menu mit jquery<\/h4>\n<ul id=\"mmenu\">\n<li class=\"mmenu\">links\n<ul>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<\/ul>\n<\/li>\n<li class=\"mmenu\">mitte\n<ul>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<\/ul>\n<\/li>\n<li class=\"mmenu\">rechts\n<ul>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<li>abc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"ccc\">content &#8230;<\/p>\n<p><!--more--><\/p>\n<h4>javascript teil<\/h4>\n<table class=\"rosa\">\n<tr>\n<td>\n<pre><code>&lt;script type=\"text\/javascript\" src=\"jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n  $(document).ready(function() {\r\n\r\n      var toggle = function(direction, display) {\r\n         return function() {\r\n            var self = this;\r\n            var ul = $(\"ul\", this);\r\n            if( ul.css(\"display\") == display &amp;&amp; !self[\"block\" + direction] ) {\r\n               self[\"block\" + direction] = true;\r\n               ul[\"slide\" + direction](\"slow\", function() {\r\n                  self[\"block\" + direction] = false;\r\n               });\r\n            }\r\n         };\r\n      }\r\n      $(\"li.mmenu\").hover(toggle(\"Down\", \"none\"), toggle(\"Up\", \"block\"));\r\n      $(\"li.mmenu ul\").hide();\r\n\r\n   });\r\n\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<h4>css teil<\/h4>\n<p>Das Menu soll beim Aufklappen den nachfolgenden Content ueberdecken und ihn nicht nach unten schieben. <strong>position Angaben<\/strong> loesen das Problem<\/p>\n<table class=\"rosa\">\n<tr>\n<td>\n<pre><code>#mmenu {\r\n   list-style-type: none;\r\n   padding: 0px;\r\n   margin: 0px;\r\n}\r\n\r\n#mmenu a {\r\n   text-decoration: none;\r\n   font-family: Verdana,sans-serif;\r\n   font-weight: normal;\r\n   font-size: small;\r\n   color: white;\r\n}\r\n\r\n#mmenu ul {\r\n   list-style-type: none;\r\n   padding: 0px;\r\n   margin: 0px;\r\n   position: absolute;\r\n}\r\n\r\nli.mmenu {\r\n   float: left;\r\n   width: 14em;\r\n   text-indent: .7em;\r\n\r\n   border-top: 1px solid #aaa;\r\n   border-left: 1px solid #aaa;\r\n   background: #666;\r\n   padding: 1px 0px;\r\n}\r\n\r\nli.mmenu li {\r\n   border-top: 1px solid #aaa;\r\n   background: #666;\r\n   padding: 1px 0px;\r\n   width: 14em;\r\n}\r\n\r\nli.mmenu:hover {\r\n   background: #bbb;\r\n}\r\n\r\nli.mmenu li:hover {\r\n   background: #bbb;\r\n}\r\n\r\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n<h4>links<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.hermione.de\/gf\/mmenu.html\">das Menu (Quellcode siehe hier)<\/a><\/li>\n<li><a href=\"http:\/\/docs.jquery.com\/Cookbook\/Navigation\">jquery Cookbook Navigation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Animiertes Menu mit jquery links abc abc abc abc mitte abc abc abc abc rechts abc abc abc abc content &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/92"}],"collection":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":0,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}