CSS Menü wie Windows Explorer

Dieses Thema im Forum "Webentwicklung" wurde erstellt von dalank, 13. November 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 13. November 2008
    hi leute
    kann mir jemand helfen?
    ich will mit CSS ein menü programmieren
    wenn das denn möglich ist

    und an einer stelle komm ich ned weiter

    ich will so eine menüstruktur wie der "windows explorer" aufgebaut ist siehe bild (link)

    {bild-down: http://www.akademie.de/img/assets/1010/7644_14638_explorerarbeiten.gif}



    also nochmal ich will ein menü programmieren so ähnlich wie links im bild das menü ist...

    un jetz will ich wissen wie der befehl heißt, mit dem man die unterordner einbleden bzw ausbleden kann

    also mehr oder weniger die funktion des Plus und Minus Zeichen im bild


    ich hoff jeder hat verstanden was ich rüber bringen wollte

    mfg dalank


    //EDIT: ich hab hier mal was gefunden was mit java funzt muss ich das auch so machen?
    oder ist irgendeine variante über CSS möglich

    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
     
  2. 13. November 2008
    AW: Menü CSS HILFE

    Das musst du über JavaScript regeln. Und zwar, wie du richtig herausgefunden hast, über die Eigenschaft visibility von Layern
     
  3. 13. November 2008
    AW: Menü CSS HILFE

    also führt kein weg vorbei an java?

    dann werd ich mich mal in dem berreich en bissle mehr erkundigen
    weil ich hab erst seit kurzem angefangen so stück für stück ein bissle mehr dazu zu machen / lernen

    danke
     
  4. 13. November 2008
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Menü CSS HILFE

    1. heißt es javascript, java ist was komplett anderes^^
    und 2. könntest du das ganze auch mit php machen was aber bedeuten würde das du jedes mal die seite neu laden musst, wäre mit einem nicht sehr elegantem frame möglich

    wenns was professionelles werden soll, würde ich dir raten zu der js version noch ne php version zu baun, da man js abstellen kann, und wenn das menu auf einer seite nicht funktionert ist wird der user nicht viel spaß an deiner seite haben und schnell deine konkurenz aufsuchen, bei der er besser klar kommt

    gruß encud

    edit: hab hier noch was auf meiner festplatte gefunden
    https://www.xup.in/dl,56428917/tree_component.rar/

    kannst du dir ja mal angucken ist im prinzip genau das was du haben willst... aber bin mir gerade nichrt sicher ob man das einfach so in ne hp einbinden darf oder ob das ne lizenz hat... aber zum erlernen kannste sicher mal rein gucken. viel spaß damit^^
     
  5. 13. November 2008
    AW: Menü CSS HILFE

    Wie encud sagt, es ist JavaScript - also halb so schlimm =D

    Wenn du eine JS-Bibliothek wie JQuery (einfach *.js Datei runterladen und mit einem <script>-Tag im head-Bereich einfügen) ist es recht einfach.

    visualjquery bietet dir eine große Übersicht über die Funktionen, was du brauchst ist zu finden unter:
    Effects > Basics > hide()
    Effects > Basics > show

    Damit sich das Bild von einem - in ein + umwandelt brauchst du
    Attributes > Att > attr(key, value) (der key ist in dem Fall das "src" und value die Bildurl).
     
  6. 14. November 2008
    AW: Menü CSS HILFE

    Danke schon mal
    bewertet hab ich euch beide..

    ich guck jetz mal wie ich es mache...
    morgen mal beim javaSCRIPT einarbeiten oder so...... sry wegen dem java


    achja @ p0w3rn4t0r
    ich brauch das + & - nicht
    das war nur so en beispiel

    trotzdem thx
     
  7. 16. November 2008
    AW: Menü CSS HILFE

    Layout 2 von Segert Webpublishing . START

    dl vom design: SELFHTML: Fertige Layouts / Layout Nummer 7

    Theorethisch geht das ja auch ohne js... aber wuerd halt immer ne neue Seite machen ausser man arbeitet mit i frames oder?
     
  8. 16. November 2008
    AW: Menü CSS HILFE

    Kann man aber schöner mit AJAX machen
     
  9. 16. November 2008
    AW: Menü CSS HILFE

    ajax ist für ein menü über proportioniert, für ein menü reicht js
    das allerdings würde ich auf jeden fall benutzen, eben wegen der sache mit dem neu laden
     
  10. 18. November 2008
    AW: Menü CSS HILFE

    Code:
     function anzeigen(bla){
     if(document.getElementById(bla).style.display=='none') 
     document.getElementById(bla).style.display='block'; 
     else document.getElementById(bla).style.display='none';}
    und dann machst am besten für die verzeichnisstrukturen mehrere div's, die du aufklappen willst und gibst denen verschiedene id's z.b. link1 id="1" usw... dann machst n onclick="anzeigen('id')" rein. und natürlich noch ein event fürs zuklappen ;-)
     
  11. 19. November 2008
    AW: Menü CSS HILFE

    ich muss mir mal wieder zeit nehmen

    hab zz viel um die ohren

    wie ist das hier bei alternate.de gemacht?

    wenn man da auf "mehr Details" klickt

    http://www.alternate.de/html/product/Grafikkarten_NVIDIA_PCIe/XFX/GTX280/274121/?baseId=120284

    danke nochmal an die zahlreichen lösungswege...


    mfg dalank
     
  12. 19. November 2008
    AW: Menü CSS HILFE

    Dort wird mit JQuery gearbeitet.

    Habe jetzt nicht konkret im Quelltext nach den Zeilen geschaut, aber es wird vermutlich toggle sein, evtl. noch mit einem load.
     
  13. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    jaa das sieht ja eig ganz sauber aus oder?
    un kann man soviel javascript deaktiviern wie man will oder?

    geht immer oder?
     
  14. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    Nein?

    Das ganze ist pures JavaScript (evtl. noch mit AJAX) - und wenn man es deaktiviert dann sollte es nicht gehen ^^
     
  15. 20. November 2008
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: CSS Menü wie Windows Explorer

    aha
    gut

    ähm den link was du mir da geschickt hast,
    ich blick da nich ganz durch

    CSS Menü wie Windows Explorer - RR:Board

    also eingebunden hab ichs aber iwiekomm ich nich klar mim eingeben ?
     
  16. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    Ich weiß jetzt ehrlich gesagt nicht genau, was dein Problem ist.

    Du hast einen versteckten div-Layer, in dem der Inhalt steht (angenommen mit der id="test").
    Code:
    function changeit()
    {
     $("#test").toggle();
    }
    Und der Button braucht eben einen
    Code:
    onclick="javascript:changeit();"
    soweit verstanden? habe mich dort verschrieben, du braucht toggle und nicht hide/show.
     
  17. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    also so steht der code auf der HP jQAPI - Alternative jQuery Documentation Browser
    wenn ich mir den quelltext anschau


    Code:
    <script>
    [B]window.onload = (function(){try{[/B]
    
     $("button").click(function () {
     $("p").toggle();
     });
    
    [B] }catch(e){}}); [/B]
    </script> 
    

    was sagen die zwei zeilen aus die Fett sind?
     
  18. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    window.onload => folgendes wird direkt beim Laden der Seite ausgeführt (in diesem Fall eine Funktion)

    Und zu try ... catch(e) schreibt SelfHTML etwas.
    In diesem Fall wird nichts gethrowt. Es ist quasi eine Überprüfung, ob der obige Code ausgeführt wurde, wenn nein, wird nichts gemacht (konkret in deinem Beispiel).
     
  19. 20. November 2008
    AW: Menü CSS HILFE

    Java ist nicht JavaScript!

    Spoiler
    Es ist ein weit verbreitetes Vorurteil, dass Java und JavaScript das Gleiche sind. Viele, selbst sogenannte Webdesigner oder Programmierer, sind der Auffassung, dass Sie, nur weil sie zwei Zeilen JavaScript schreiben können, die Programmiersprache Java beherrschen. Nicht etwa, um jemand anderen zu verwirren, sondern einfach auf Grund der Tatsache, dass sie Java und JavaScript als eins auffassen.

    Diese Seite soll aufklären. Es soll allen endgültig aufzeigen, das Java und JavaScript NICHT ein und das Selbe sind. Das diese beiden Programmiersprachen soviel gemeinsam haben, wie eine Kuh und ein Elefant (mir fällt gerade nicht wirklich ein sinnvoller Vergleich ein *g).

    Wie weit verbreitet dieses Unwissen ist, kann man an vielen Stellen erkennen. So gibt es zum Beispiel in einem großen deutschen Javaforum (Link) ein Forum für "Verirrte". Das Schärfste aber, was ich je gesehen habe, war JavaScript-Code auf einem Buch über Java. Das muss man sich mal vorstellen: Auf einem Buch, was einem die Programmiersprache Java beibringen soll wird JavaScript-Code abgedruckt. Ich würde mir das Buch nicht kaufen!

    Na gut - schauen Sie sich in Ruhe um und lernen Sie den Unterschied kennen. Und wann immer Sie einen selbsternannten Profi über Java reden hören, wenn er doch von JavaScript redet verweisen Sie ihn mit einem Lächeln auf diese Seite!

    Übrigens ...

    [G]css menu wie im windows explorer[/G]

    http://www.ivanpeters.com/index.htm?page=%2Fjoust%2F
    +Titel+\/title\n);StatZeile=(StatZeile==)?Titel:StatZeile

    // FrameSet-Definition A: Fuer Browser mit aktivem JavaScript
    document.write(frameset frameborder=0 framespacing=0 border=0 onload=start() onresize=neumalen() cols=+Menubreite+,*)
    if(KlapFrame==1){document.write(frameset frameborder=0 framespacing=0 border=0 rows=*,50)}
    document.write(frame name=menuFrame SRC=leer.htm marginwidth=0 marginheight=0 scrolling=auto)
    if(KlapFrame==1){document.write(frame name=klappFrame src=leer.htm marginwidth=0 marginheight=0 scrolling=no)}
    if(KlapFrame==1){document.write(/frameset)}
    document.write(frame name=+ZielFrame+ src=+(location.search?location.search.substring(1):Startseite)+ marginwidth=8 marginheight=8 scrolling=auto)
    document.write(/frameset)

    function start(){
    ladeDaten()
    maleMenu()
    if(KlapFrame==1){maleKlappFrame()}}

    function neumalen(){
    maleMenu()
    if(KlapFrame==1){maleKlappFrame()}}

    WH6=\ width=16 height=16 align=top border=0 alt=\
    WH9=.gif\ width=19 height=16 align=top border=0 alt=\
    WHA=.gif\ width=19 height=16 align=top
    BU=img src=\+BildURL
    oMO=\ onMouseOver=\window.status=
    LHg=Layout+hgStil
    rt=; return true\ onMouseOut=\window.status=+StatZeile+; return true\
    jsp=a href=\javascript arent.a

    function maleMenu(){
    m=frames[menuFrame].window.document
    m.open(text/html)
    m.write(html\nhe+ad\n!-- \nvon JS-Menue V1.4.1 dynamisch erstellter HTML-Code\n
     
  20. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    also das trag ich in den Head bereich ein ne?



    Code:
    <script src="jquery-1.2.6.min.js"></script>
    </head>
    
    <script>
    function changeit()
    {
     $("#menü_2").toggle();
    }
    </script>

    und jetz schreib ich in den Div tag
    onclick="javascript:changeit();"
    das dazu oder wie?
     
  21. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    Ja, wobei ich keine Sonderzeichen in IDs benutzen würde (also "menue_2").
     
  22. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    und dann sollte es funktionieren?

    dann guck ich mal
     
  23. 20. November 2008
    AW: CSS Menü wie Windows Explorer

    hi, die langeweile mal wieder
    http://murdoc.eu/javascripts/explorer/

    ich verwende dazu simples DOM, funktioniert im IE7 und GECKO.
    viel spaß.

    hier der source:
    -> javascript & prototype-framework (prototype gibts hier)
    Code:
    Event.observe(window, 'load', function() {
     var toggle = new Element('span', { className: 'button', alt: 'hidden' }).insert('+');
     $$('#menu/ul/li.sub').each(function(li) {
     var span = li.down('span');
     var click = $(toggle.cloneNode(true));
     li.insertBefore(click, span); 
     click.observe('click', function() {
     var alt = this.getAttribute('alt');
     if(!alt || alt == 'hidden') {
     $(this.parentNode).down('ul.sub').show();
     this.setAttribute('alt', 'visible');
     this.update('-');
     } else {
     $(this.parentNode).down('ul.sub').hide();
     this.setAttribute('alt', 'hidden');
     this.update('+');
     }
     });
     });
    });
    -> html ul-menu
    HTML:
    <div id="menu">
     <ul>
     <li><span class="title">Item1</span></li>
     <li class="sub">
     <span class="title">Item2</span>
     <ul class="sub" style="display:none;">
     <li><span class="title">Item2.1</span></li>
     <li><span class="title">Item2.2</span></li>
     <li class="sub">
     <span class="title">Item2.3</span>
     <ul class="sub" style="display:none;">
     <li><span class="title">Item2.3.1</span></li>
     <li><span class="title">Item2.3.2</span></li>
     <li class="sub">
     <span class="title">Item2.3.3</span>
     <ul class="sub" style="display:none;">
     <li><span class="title">Item2.3.3.1</span></li>
     </ul>
     </li>
     </ul>
     </li>
     </ul>
     </li>
     <li><span class="title">Item3</span></li>
     <li class="sub">
     <span class="title">Item4</span>
     <ul class="sub" style="display:none;">
     <li><span class="title">Item4.1</span></li>
     <li><span class="title">Item4.2</span></li>
     </ul>
     </li>
     </ul>
    </div>
    -> css fürs menu
    Code:
    #menu {
     border: 1px solid #000;
     padding: 4px;
     width: 200px;
     background-color: #f9f9f9;
     margin: 10px;
    }
    
    #menu ul {
     margin: 0;
     margin-left: 15px;
     padding: 0;
     list-style: none;
    }
    
    #menu ul li span.title {
     font-size: 11px;
     padding-left: 19px; /* platz für icon */
     background-image: url('folder.png');
     background-repeat: no-repeat;
     background-position: top left;
     line-height: 18px;
    }
    
    #menu ul li.sub span.button {
     position: absolute;
     margin-left: -15px;
     margin-top: 2px;
     cursor: pointer;
     font-size: 10px;
     font-weight: bold;
     width: 10px;
     height: 10px;
     text-align: center;
     padding-bottom: 2px;
     padding-left: 1px;
     border: 1px solid #dfdfdf;
     background-color: #fff;
    }
     
  24. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.