Navigation auf-/ zuklappbar + drag&drop

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • hab dir den code nochmal aufs wesentliche reduziert

    siehe anhang

    Quellcode

    1. <html><head>
    3. <link href="demos.page_dateien/rico.css" media="all" rel="Stylesheet" type="text/css">
    4. <link href="demos.page_dateien/openrico.css" media="all" rel="Stylesheet" type="text/css">
    5. <link href="demos.page_dateien/rico_header.css" media="all" rel="Stylesheet" type="text/css">
    6. <link href="demos.page_dateien/ricoTests.css" media="all" rel="Stylesheet" type="text/css">
    7. <script src="demos.page_dateien/prototype" type="text/javascript"></script>
    8. <script src="demos.page_dateien/rico" type="text/javascript"></script>
    9. <script src="demos.page_dateien/util" type="text/javascript"></script>
    11. <title>Rico</title></head>
    13. <body onload="javascript:bodyOnLoad()">
    15. <script>
    17. var onloads = new Array();
    18. function bodyOnLoad() {
    19. new Rico.Effect.Round( null, 'roundNormal' );
    20. new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
    21. for ( var i = 0 ; i < onloads.length ; i++ )
    22. onloads[i]();
    23. }
    24. showMenuContext()
    25. </script>
    29. <script>
    30. var saveHeight;
    31. var showing = true;
    33. function toggleSlide() {
    34. if ( showing )
    35. { slideMenuUp(); showing = false; }
    36. else
    37. { slideMenuDown(); showing = true; }
    38. }
    40. function slideMenuUp() {
    41. var menu = $('demosMenu');
    42. saveHeight = menu.offsetHeight;
    44. menu.style.overflow = "hidden";
    45. new Rico.Effect.Size( menu, null, 1, 120, 8 );
    47. $('demoPanelLink').innerHTML = "Show demo panel";
    48. }
    50. function slideMenuDown() {
    51. var menu = $('demosMenu');
    52. new Rico.Effect.Size( menu, null, saveHeight, 120, 8, {complete:function() { $(menu).style.overflow = "visible"; }} );
    53. $('demoPanelLink').innerHTML = "Hide demo panel";
    54. }
    55. </script>
    56. <!-- I did have this as float:right but it screws up in firefox -->
    62. <h2 style="padding-bottom: 0px;">ACCORDION EXAMPLE</h2>
    64. <p style="display: inline;">Single click title bar for any tab to show its content.</p>
    66. <div style="border-bottom: 1px solid rgb(31, 102, 155); margin-top: 6px; border-top-width: 1px; border-top-style: solid;" id="accordionExample">
    68. <div id="panel1">
    69. <div style="font-weight: normal; background-color: rgb(107, 121, 165); color: rgb(206, 215, 239);" id="panel1Header" class="accordionTabTitleBar">
    70. Overview
    71. </div>
    72. <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel1Content" class="accordionTabContentBox">
    73. <br>This example illustrates how to use the Rico.Accordion behavior to transform a set of
    74. divs into a first class accordion component.<br><br>
    76. The Rico.Accordion behavior makes use of the Effect.AccordionSize which is an effect that simultaneously
    77. grows the height of one element while shrinking the height of another. The Rico.Accordion behavior adds
    78. the necessary event handlers on the respective divs to handle the visual aspects of expanding, collapsing
    79. and hovering.
    80. </div>
    81. </div>
    83. <div id="panel2">
    84. <div style="font-weight: normal; background-color: rgb(107, 121, 165); color: rgb(206, 215, 239);" id="panel2Header" class="accordionTabTitleBar">
    85. HTML Code
    86. </div>
    87. <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel2Content" class="accordionTabContentBox">
    88. <br>The HTML structure is an outer div that holds all of the panels. Then, each panel is just a
    89. couple of DIVs (one for the header and one for the content) wrapped in an outer DIV.
    91. <pre>&lt;div id="accordionDiv"&gt;
    92. &lt;div id="overviewPanel"&gt;
    93. &lt;div id="overviewHeader"&gt;
    94. Overview
    95. &lt;/div&gt;
    96. &lt;div id="panel1Content"&gt;
    97. ... content text ...
    98. &lt;/div&gt;
    100. &lt;/div&gt;
    101. &lt;/div&gt;
    102. </pre>
    103. </div>
    104. </div>
    106. <div id="panel3">
    107. <div style="font-weight: bold; background-color: rgb(99, 105, 156); color: rgb(255, 255, 255);" id="panel3Header" class="accordionTabTitleBar">
    108. Rico Code
    109. </div>
    111. <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; height: 227px; overflow: visible;" id="panel3Content" class="accordionTabContentBox">
    112. <br>To attach the accordion behavior to the accordion container div, construct a Rico.Accordion
    113. object and pass the container to it. Thats it!
    114. <pre>new Rico.Accordion( $('accordionDiv') );
    115. -or-
    116. new Rico.Accordion( $('accordionDiv'), {panelHeight:300} );</pre>
    117. The second example specifies the height of the accordion panels. There are many other
    118. configuration parameters that can be specified to modify various visual aspects of the
    119. accordion. The panelHeight is the attribute that is most commonly overridden.
    120. </div>
    121. </div>
    123. <div id="panel4">
    124. <div style="font-weight: normal; background-color: rgb(107, 121, 165); color: rgb(206, 215, 239);" id="panel4Header" class="accordionTabTitleBar">
    125. Important Note
    126. </div>
    128. <div style="border-style: solid; border-color: rgb(31, 102, 155); border-width: 0px 1px; margin: 0px; overflow: hidden; height: 1px; display: none;" id="panel4Content" class="accordionTabContentBox">
    129. <br>The content div for each panel should not be styled to have borders, margins, or padding.
    130. When padding/margin is required, nest another DIV inside the content div and style it accordingly.
    131. Also, the panel content should not grow beyond the panelHeight attribute of the configuration
    132. parameter. On Firefox/Mac the scrollbar for an overflow area will cause the scrollbar to
    133. always be visible--even when the panel is collapsed. You can resolve this by setting the
    134. visibility of the contents when the panel starts to collapse or expand.<br>&nbsp;
    135. </div>
    136. </div>
    138. </div>
    140. <script> onloads.push( accord ); function accord() { new Rico.Accordion( 'accordionExample', {panelHeight:227} ); } </script>
    143. </body></html>
    Alles anzeigen
    Dateien

  • hm.. du meinst jetzt den wordpress admin bereich, oder?
    ich dachte du meinst das teil von wordpress.de (das genauso aussieht, wie das beispiel oben)

    der wordpress admin code ist nämlich gaaanz simpel
    ohne diesen rollovereffekt und ohne, dass die 3 flächen sich variable nach unten oder oben bewegen um den inhalt immer an ähnlicher position zu behalten

    hier ein beispiel von Max123 aus dem Thread JavaScript Text verbergen & anzeigen

    "Max123" schrieb:

    Demo

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. function show (member) {
    5. if (document.getElementById) {
    6. if (document.getElementById(member).style.display == "block") {
    7. document.getElementById(member).style.display = "none";
    8. } else {
    9. document.getElementById(member).style.display = "block";
    10. }
    11. }
    12. }
    13. </script>
    15. </head><body>
    17. <a href="javascript:show('B')">B anzeigen</a><br>
    18. <table id="B" style="display:none">
    19. <tr><td>B's Details</td></tr>
    20. </table>
    22. <a href="javascript:show('C')">C anzeigen</a><br>
    23. <table id="C" style="display:none">
    24. <tr><td>C's Details</td></tr>
    25. </table>
    27. <a href="javascript:show('A')">A anzeigen</a><br>
    28. <table id="A" style="display:none">
    29. <tr><td>A's Details</td></tr>
    30. </table>
    33. </body></html>
    Alles anzeigen

  • hey.. danke, das habe ich auch gelesen.
    das ist ja kein ajax *fg*

    so in der art habe ich auch was bei dynamicpages.com gefunden, aber nur javascript.

    Wie im Amdinbereich von wordpress würde ich es gerne aufbauen.

    switchbar. soll offenbleiben beim link klicken- und die navigation soll selber anpassbar sein, also eben genau diese funktionen wie im wordpress.

    das rauszufiltern habe ich einfach nicht geschafft.

  • hab jetzt das script von Max123 mit AJAX Features versehen..
    aber ich nutze selber WordPress2.. weiß aber noch nicht genau, was du meinst.. vielleicht hilt dir das ja weier:

    func.php musst du selber erstellen
    les dazu mein Wiki Tutorial: [coderwiki]HowTos/Ajax-Inhalte-mit-PHP-nachladen[/coderwiki]

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. <!--
    5. function createXMLHttpRequest() {
    7. var ua;
    9. if(window.XMLHttpRequest) {
    10. try {
    11. ua = new XMLHttpRequest();
    12. } catch(e) {
    13. ua = false;
    14. }
    15. } else if(window.ActiveXObject) {
    16. try {
    17. ua = new ActiveXObject("Microsoft.XMLHTTP");
    18. } catch(e) {
    19. ua = false;
    20. }
    21. }
    22. return ua;
    23. }
    25. var req = createXMLHttpRequest();
    27. function sendRequest(digit) {
    28. show(digit);
    29. req.open('get', 'func.php?s='+ digit);
    30. req.onreadystatechange = handleResponse;
    31. req.send(null);
    32. }
    34. function handleResponse() {
    36. if(req.readyState == 4){
    37. var response = req.responseText;
    38. var update = new Array();
    40. if(response.indexOf('||' != -1)) {
    41. update = response.split('||');
    42. for(i=0; i<update.length; i+=2) {
    43. document.getElementById(update[i]).innerHTML = update[i+1];
    44. }
    45. }
    46. }
    47. else
    48. alert("loading" + ajax.readyState);
    49. }
    51. function show (member) {
    52. if (document.getElementById) {
    53. if (document.getElementById(member).style.display == "block") {
    54. document.getElementById(member).style.display = "none";
    55. } else {
    56. document.getElementById(member).style.display = "block";
    57. }
    58. }
    59. }
    60. //-->
    61. </script></head><body>
    63. <a href="#" onClick="sendrequest('B')">B anzeigen</a><br>
    64. <table id="B" style="display: none;">
    65. <tr><td>B's Details</td></tr>
    66. </table>
    68. <a href="#" onClick="sendrequest('C')">C anzeigen</a><br>
    69. <table id="C" style="display: none;">
    70. <tr><td>C's Details</td></tr>
    71. </table>
    73. <a href="#" onClick="sendrequest('A')">A anzeigen</a><br>
    74. <table id="A" style="display: none;">
    75. <tr><td>A's Details</td></tr>
    76. </table>
    79. </body></html>
    Alles anzeigen

  • Hey erstmal ein dickes Lob.

    Du setzt Dich wirklich ein, sowas findest man selten.

    In den Downloadfiles findet man eine menge beispiele.

    Ich habe dieses hier genommen:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <title>Untitled Document</title>
    8. <script src="prototype.js" type="text/javascript"></script>
    9. <script src="scriptaculous.js" type="text/javascript"></script>
    11. </head>
    12. <body>
    13. <style type="text/css">
    14. #menu {
    15. width: 300px;
    16. border: 1px #000 solid;
    17. }
    18. .menu_header {
    19. background-color: #00CC99;
    20. color: #FFFFFF;
    21. }
    22. .menu_block {
    23. background-color: #006699;
    24. color: #FFFFFF;
    25. overflow:hidden;
    26. }
    27. .menu_block div {
    28. }
    29. .close_block {
    30. position: relative;
    31. width: 100%;
    32. bottom: 0px;
    33. height: 15px;
    34. text-align: center;
    35. display: block;
    36. }
    37. </style>
    38. <div id="menu">
    39. <div class="menu_header" id="menu_header1"><a href="#" onClick="new Effect.SlideDown('menu_block1'); return false;">HEADER 1</a></div>
    40. <div class="menu_block_container" id="menu_block_container1">
    41. <div class="menu_block" id="menu_block1"><div>
    42. text<br>
    43. text<br>
    44. text<br>
    45. text<br>
    46. text<br>
    47. text<br>
    48. text<br>
    49. <a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block1'); return false;">close</a></div></div>
    50. </div>
    51. <div class="menu_header" id="menu_header2"><a href="#" onClick="new Effect.SlideDown('menu_block2'); return false;">HEADER 2</a></div>
    52. <div class="menu_block_container" id="menu_block_container2">
    53. <div class="menu_block" id="menu_block2"><div>
    54. text<br>
    55. text<br>
    56. text<br>
    57. text<br>
    58. text<br>
    59. text<br>
    60. text<br>
    61. <a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block2'); return false;">close</a></div></div>
    62. </div>
    63. </div>
    64. </body>
    65. </html>
    Alles anzeigen