Menu z boku i inne

Jak obiecałam menu z boku. Ale zaczniemy od podstaw.
Na początek coś prostego.
Jak generalnie zrobić coś koło forum. Coś co jest na tle i nie ma nic wspólnego z jakimkolwiek elementem forum. Na przykład informacja o tym kto wykonał styl forum. Mały prostokąt w rogu. Co ja sama stosuję przy każdym zamówieniu, oznaczając w ten sposób swoje prace. Najważniejsze w tym jest to, żeby kod zarówno styl css jak i kod html wkleić do tego pierwszego pola (konfiguracja forum -> strona główna). Właśnie to w sumie powoduje, że ten prostokąt jest na zewnątrz forum a nie gdzieś wewnątrz.

No i najpierw zabierzmy się może za css, bo to jest chyba tutaj najważniejsze i warunkuje wszystko. Jak ten prostokąt będzie wyglądać, gdzie będzie się znajdować itd.
Na początek musimy zająć się pozycjonowaniem. W tym przypadku ustalamy position:fixed. Jest to prawdopodobnie najbezpieczniejsze rozwiązanie w tej chwili.
Tak więc mamy

.prostokat1{
position:fixed;}

Przy relatywnej pozycji posługujemy się nie marginami, paddingami lecz po prostu top, bottom, left, right określają nam przesunięcie danego elementu. Z tym, że w tym przypadku bynajmniej przy moich dłuższych zabawach to zaobserwowałam - to nie jest żadna moja wiedza czy coś, jak wprowadzam was w błąd to ktoś mi może nastukać, no ale bynajmniej u mnie to działa - określając bottom:10px ten element nasz jest oddalony o 10px od dołu ekranu. Dając zaś right:10px ten element jest oddalony o 10px od prawej strony.
My chcemy ten o to element mieć w prawym, dolnym rogu.

.prostokat1{
position:fixed;
bottom:10px;
right:10px;}

Tak więc pozycją już się zajęliśmy no i teraz możemy w dowolny sposób ozdobić ten prostokąt.

.prostokat1 {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 8px;
letter-spacing: 1px;
font-weight: bold;
color: #000000;
font-family: calibri;
background-color: #FFFFFF;
padding: 4px;
border: 1px dashed #514a4d;
text-transform: uppercase;
text-decoration: none;
}
<div class="prostokat1"></div>

Teraz zrobimy wysuwane z boku "menu".
Trochę będzie z tym zabawy ale zacznijmy od podstaw czyli jak zwykle od stylu css no i z góry powiem to nie jest trudne! Nie potrzeba nam w tym przypadku żadnych skryptów, te będą potrzebne przy panelu bocznym. całkowicie bocznym wysuwanym po kliknięciu. Ale teraz najprostsze wysuwane po najechaniu z boku menu.
No i zaczynamy od stylu.
Tym razem jednak najpierw zajmijmy się jego wyglądem potem będziemy go pozycjonować i robić efekty. Więc jakiś prosty ładny, sympatyczny prostokąt.

.menu{border-right:10px solid #19160C;
border-left:none;
border-bottom: 3px solid #E3E8B6;
border-top: 3px solid #E3E8B6;
width:150px;
height:200px;
background-color:#EAE8CB;}

I mamy sobie taki o prostokąt.
No i na początek ustawiamy mu pozycję dokładnie position określamy na fixed. Bo dzięki temu możemy schować to nasze menu poza ramy ekranu.
Umiejscawiamy powiedzmy tak koło góry powiedzmy w odległości 50px od górnej krawędzi.
I teraz najważniejsze. Chcemy zostawić widoczne jedynie to prawe obramowanie. Dlatego ustawiamy left:-150px; i zostaje nam widoczne jedynie te 10px, które przypada na ramkę.
Więc połączmy to.

.menu{border-right:10px solid #19160C;
border-left:none;
border-bottom: 3px solid #E3E8B6;
border-top: 3px solid #E3E8B6;
width:150px;
height:200px;
background-color:#EAE8CB;
position:fixed;
top:50px;
left:-150px;
display:block;}

No i teraz mamy ten o to prostokąt schowany.
Teraz robimy menu:hover i wprawi menu w ruch. Na początek ustalmy jak nam się będzie ten prostokąt przesuwał i w jakim tempie. Proponuję 3 sekundy bo to będzie ładne i żeby zwalniało na koniec.

.menu:hover{
webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
transition: 3s ease-out;}

Ma się nam wysunąć prawie całe menu zostawmy, żeby za ekranem były 3-4px

.menu:hover{
webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
transition: 3s ease-out;
left:-3px;}

I skleimy to teraz razem

.<style>menu{border-right:10px solid #19160C; border-left:none; border-bottom: 3px solid #E3E8B6; border-top: 3px solid #E3E8B6; width:150px; height:200px; background-color:#EAE8CB; position:fixed; top:50px; left:-150px; display:block;} .menu:hover{ webkit-transition: 3s ease-out; -moz-transition: 3s ease-out; -o-transition: 3s ease-out; transition: 3s ease-out; left:-3px;} </style> <div class="menu"></div>

No i to byłoby tym razem na tyle.
A efekty o tutaj proszę zobaczyć KLIK