CSS overflow erzeugen

untaimed1898

Hallo,

ich habe ein Menü-Sidebar, welche ich rechts positioniert habe.
Ungefähr so:

HTML

<div id="sidebar_right">
           <nav>
                <a id="closeSidebar" href="#">Seitenleiste schließen</a> 
                <ul>
                    <li>Menüpunkt 1</li>
                    <li>Menüpunkt 2</li>
                    <li>Menüpunkt 3</li>
                </ul>
            </nav>

</div>
<div id="content">
<!-- Eigentlicher Inhalt der Seite -->
</div>

Alles anzeigen

Code

#sidebar_right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;


    max-width: 15%;

}


#content {
 max-width: 75%;
margin: 5%;
}

Alles anzeigen

Ich möchte nun neben den Link "Seitenleiste" schließen ein Icon anzeigen, welches aus der Sidebar herausragt.
Ähnlich wie hier:

Hat jemand Tipps, wie ich das am besten umsetzen kann?
Bin für jede Hilfe dankbar

basti1012

Soll dein Menü immer da oben in der Ecke auf position:fixed stehen ? Oder soll das mal ein und ausfahren oder so?
Weil sieht man nicht so oft das einer das Menü da so fixed positioniert.

Dein Code verär ja nch nicht so viel wie das Menü aussehen soll. Du hast da jetzt 3 Menü Punkte die übereinander stehen das wahrs ja. Soll der Close Button immer da drüber sichtbar sein ? Oder soll das ganze Menü ausfahren und dann erst sichtbar sein ?
Vieleicht könntest du mal nee Skizze machen wie es komplett aussehen soll und wie das Menü geöffnet werden soll usw...
Daswürde uns schon etwas mehr helfen. Weil so wie es jetzt ist kann ich dir viel erzählen was aber auch noch nicht viel bringt weil dein Menü ja bestimmt noch nicht fertig ist oder ?

untaimed1898

Ja das Menü soll fixed stehen.
Im Prinzip handelt es sich um Anwendung auf einer einzigen Seite.
Das Menü rechts soll über die gesamte Höhe der Anwendung gehen und beim klick auf einen entsprechenden Menüpunkt springt man dann zu der jeweiligen Stelle springen.
Außerdem soll das Menü aus- und einklappbar sein, was ich jedoch mit javaScript umsetzen werde.

Der Close button verschwindet dann auch beim einklappen, dafür sieht man dann einen Button zum wieder einblenden.

Habe versucht das ganze mal per Skizze darzustellen:

basti1012

Ich hatte in der Zeit wo du zurück geschrieben hast das gebastelt https://basti1012.bplaced.net/index.php?ordn…erflow_erzeugen
Kommt der sache ja schon mal näher.
Das mit den hinspringen macht man an besten mit ankern.
Mit einklapbares Menü meinst du so wie man in jeden Top Menü hat ?
Warum willst du das mit JS machen das geht ja auch mit CSS wenn ich dich richtig verstehe

untaimed1898

wow danke ich werde mir das gleich mal anschauen. Genau so meinte ich das

Will ein bisschen JS lernen, deshalb wollte ich das mit JS machen, aber versuche auch zu verstehen, wie du das mit CSS gemacht hast:)

Danke nochmal !!!

basti1012

Das man Js lernen will kann ich gut verstehen. Man sollte aber drauf verzichten wenn es geht . Es gibt immer noch Leute die kein JS aktiviert haben und wenn das so ist können die das Menü nicht mehr nutzen. Deshalb sollte man wenn es geht immer mit css lösen oder auch php. Oder zumindest eine Lösung finden die beides erlaubt.

Zum Js lernen ist es ja vieleicht nicht verkehrt. Doch wenn du es geschafft hast kopierst du dir es und legst es weg . Dann versucht du das gleiche nochmal mit Css und stellst das Online.
So würde ich es machen. Doch wissen muss es jeder selber wie er es gerne hätte. Da will ich keinen rein reden.

Aber wer heute noch ohne JS Surft muss mit rechnen das einige Seiten gar nicht laufen

CSS overflow erzeugen

Tags

Benutzer online in diesem Thema