Objekt per Mausklick anzeigen und schließen

Hallo,

Bin gerade dabei eine „Wordpress-Seite“ aufzubauen, aber dass sei erstmal dahingestellt den hier geht es um den Header der rein aus HTML/CSS und Java bestehen soll.

Meine Webseite soll bzw. hat eine Desktop-Version als auch eine Mobile-Version die bei Bildschirmgröße/Fenstergröße:985px umschaltet. Funktioniert alles wunderbar…

In der Desktop-Version wird die Suche im Banner angezeigt und die Navigation ist geöffnet unter dem Banner
In der Mobile-Version ist die Suche und die Navigation versteckt und wird über einen Button (Div-Tag) geöffnet.

Hier erstmal der Link zu meiner Seite: " http://minestarm.lima-city.de/ "

Jetzt geht es erstmal nur um die Mobile-Version, denn ich möchte sobald man den „Menü-Button“ anklickt, dass sich das Menü öffnet und die Suche schließt falls geöffnet. Andersrum sobald man den „Suchen-Button“ anklickt möchte ich dass sich die Suche öffnet und die Navigation schließt falls geöffnet. Klickt man ein weiteres Mal auf den jeweiligen Button schließt sich das zuvor geöffnete Objekt (Suche/Navigation). Zusätzlich sollen sich noch die CSS-Eigenschaften der Button ändern wenn das jeweilige Objekt (Suche/Navigation) geöffnet ist.

Aktuell habe ich nur geschafft, dass sich per Klick das Objekt öffnet und per weiterer Klick wieder schließt.

Das hier sind die "Button´s („menue“ und „sfm“ … „navi“ ist die ID für die Navigation und „sboxm“ ist die Suche)
[HTML]

[/HTML]

Das ist mein bisheriges Script (ehrlich gesagt auch nur aus dem Inet zusammengebastelt)
[HTML][/HTML]

Bin leider mit JavaScript nur wenig bis garnicht vertraut. Das wäre auch mit das einzigste Java was ich auf meiner Seite brauche. HTML und CSS bin ich doch schon sehr viel mehr erfahren. Würde mich sehr freuen wenn mir jemand helfen könnte. Den Code hab ich vereinfacht damit unwichtige Elemente nicht für Verwirrung sorgen… Falls ich was vergessen habe bitte Bescheid sagen.

MfG minestarm

Bevor du mir solchen feinheiten anfängst, solltest du erst einmal deine Seite optimieren. Das Logo deiner Seite, welches schätzungsweise in maximal 200 x 200 px angezeivt wird sollte auch nicht größer als 200 x 200 pixel sein! Wenn du es irgendwo auf der Seite nochmal in größer anzeigen willst solltest du es in verschieden großen versionen auf deinem Webhoster ablegen. Mit meiner Verbindung, welche nicht unbedingt langsam ist brauche ich 10 Sekunden um deine Seite aufzubauen. Soll heißen das die meisten Leute deine Seite schon schließen werden, bevor sie überhaupt komplett angezeigt wird.

Ich kann dir nur empfehlen daran zu arbeiten, dass seine Seite schneller aufgerufen werden kann, bevor du dir über die Funktionalität sorgen machst.

Lg