HTML Menü nach Klick aufklappen

[orschiro]

Hallo Leute,

wie lässt es sich realisieren, dass sich ein Menü bzw. einfach sonstige Informationen erst bei Klick auf ein bestimmtes Element öffnen?

Das Ganze würde in dem Sinne einem Spoiler ähneln, sprich ich klicke auf das Element, in dem Fall den Spoiler, und die restlichen Informationen werden sichtbar.

Ich habe bis jetzt nur Ansätze mit Mousehovers gesehen, die auch leicht mit CSS realisierbar wären, aber eben nicht dem entsprechen, was ich suche.

Ich bedanke mich schon mal für eure Lösungsansätze.

 

[glotzkowski]

AW: [HTML] Menü nach Klick aufklappen

vieleicht hilft dir ja das hier weiter

klickmich klickmich

 

[claW.]

AW: [HTML] Menü nach Klick aufklappen

am einfachsten geht das wohl über einen toggle:

function Toggle( id )
{
	if( document.getElementById( id ).style.display == 'none' )
		document.getElementById( id ).style.display = '';
	else
		document.getElementById( id ).style.display = 'none';
}

die frage ist natürlich: willst du jetzt ein menü oder willst du nur weitere informationen anzeigen lassen?

 

[orschiro]

AW: [HTML] Menü nach Klick aufklappen

die frage ist natürlich: willst du jetzt ein menü oder willst du nur weitere informationen anzeigen lassen?

Das Ganze sollte letzten Endes so funktionieren, dass weitere Informationen zu einem Begriff unter diesem erscheinen, sobald man auf diesen klickt.

Ließe sich dass nur mittels Javascript realisieren oder auch mittels einer reinen CSS Variante?

 

[glotzkowski]

AW: [HTML] Menü nach Klick aufklappen

am schnellsten und einfachsten geht das von Claw
wobei das von mir eher etwas übersichtlicher und vieleicht etwas schicker ist und auch einfacher für anfänger

das wäre mit CSS und Java realisierbar

 

[Backslash]

AW: [HTML] Menü nach Klick aufklappen

Eine reine CSS Lösung wäre imo nur per hover möglich, nicht mit einem Klick.

 

[orschiro]

AW: [HTML] Menü nach Klick aufklappen

Da einige User Javascript deaktiviert haben sollte es nun doch eine Lösung mit Mousehover sein.

Dabei dachte ich an folgendes:

HTML Code:
<ul class="test" style="list-style:none;">
<li>Schau weg
<ul>
<li>Hallo</li>
</ul>
</li>
</ul>

CSS Code:
.test li ul { display:none; }
.test li:hover ul, .test li.sfhover ul { display:block; }

Da der IE 6 jedoch kein Mousehover unterstützt, müsste man hier nun einen Javascript Code einpflegen, nur wie gehe hier vor, da ich nur Klassen und keine klare ID habe?

Der Code wäre der Folgende:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

 

[claW.]

AW: [HTML] Menü nach Klick aufklappen

die funktion von vorhin kannst du ja verwenden um die box anzeigen zu lassen. im hintergrund kannst du dann ja auch mit einem hover arbeiten, sodass wenn du auf den link klickst der hover einfach angezeigt wird (natürlich beim klick, nicht beim darüberfahren).

ich hab grad mal ein altes script rausgesucht. wenn du den block positionieren willst, könntest du folgende funktionen benutzen:

var mouseX = mouseY = 0;

function getMouseXY( event )
{
  mouseX = event.pageX;
  mouseY = event.pageY;
}

document.onmousemove = getMouseXY;

function CALENDAR()
{
  // show the calendar
  this.show = function()
  {
    this.calendarobj.style.removeProperty( 'display' );
    this.calendarobj.style.setProperty( 'display', 'block', null );
  }
  
  // show the calendar at a defined position
  this.showat = function( x, y )
  {
    this.calendarobj.style.removeProperty( 'left' );
    this.calendarobj.style.removeProperty( 'top' );
    this.calendarobj.style.setProperty( 'left', x + 'px', null );
    this.calendarobj.style.setProperty( 'top', y + 'px', null );
    
    this.show();
  }
  
  // show the calendar at the cursor position
  this.showatcursor = function( expandright )
  {
    this.showat( ( expandright ? mouseX - this.calendarWidth : mouseX ), mouseY );
  }
  
  // hide the calendar
  this.hide = function()
  {
    this.calendarobj.style.removeProperty( 'display' );
    this.calendarobj.style.setProperty( 'display', 'none', null );
  }
}

du müsstest das natürlich noch n bisschen anpassen, damit es deinen wünschen entspricht.

 

[claW.]

AW: [HTML] Menü nach Klick aufklappen

der ie unterstützt hover, allerdings müsstest du mit links rumtricksen (<a href="#"> o.ä.).