Rozwijany panel użytkownika rozwala belkę.

wersja skryptu MyBB: 1.6.9
adres forum: Testowe!
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Witam. Robię właśnie sobie panel użytkownika rozwijany (tym poradnikiem.). Wszystko ładnie działa, ale gdy rozwinę tenże panel to cała belka idzie w dół i się rozwala (Możecie sami zobaczyć.)

Dane konta testowego:
Login: Tester
Hasło: test123

Nie mogę się z tym uporać :<

Przy okazji logowanie do kitu. Czarne litery na czarnym tle.

Przy okazji tym też się zajmuję

---

@Replay?

---

@Łefłesz?

---

Ps. Jak ustawić że gdy się rozwinie panel to strzałka zmieni się na "do góry"? BO cały czas mam tylko strzałkę skierowaną w dół.

https://webboard.pl/thread-18185.html
https://webboard.pl/thread-11531.html - zapewno chcesz Taki efekt
https://webboard.pl/wiki.php?rozwijany-p...wania.html

Nie chcę zwijanego panelu bocznego bo już go mam. Chcę rozwijany/zwijany panel użytkownika jak na I.P.B bądź tutaj. I nie chcę zwijanego panelu logowania..

Rozwija.

<div id="main_menu">
<!-- Zawartość menu -->
</div>

Link/przycisk do rozwijania

<div id="menu_toggle" class="show_hide" rel="#main_menu"><a href="#">LINK</a></div>

global.css

#main_menu {
    position: relative;
    top: 15px;
    right: 20px;
    z-index: 100;
    display: none;
}

headerinclude

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="{$mybb->settings['bburl']}/jscripts/hide.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
   jQuery('.show_hide').showHide({            
        speed: 250,  // speed you want the toggle to happen    
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: ' ',// the button text to show when a div is closed
        hideText: ' ' // the button text to show when a div is open
                    
    });
});
</script>

Plik hide.js wrzuc do folderu jscripts na serwerze FTP.

Ja to już mam! Tylko gdy rozwijam rozwija mi się na całą szerokość i rozwala belkę!...

Screen jak to u mnie wygląda:



Screen jak chciałbym żeby to wyglądało:

Lub przynajmniej podobnie.

A to może kwestia tego, by w pliku .css określić:

max-width: 200px;

Nie wiem jak wygląda to w praktyce, nie oglądałem poradnika, ale jeśli jest plik css, to wydaje się najrozsądniejsze. Jednak mnie to wygląda na jakiś błąd...

Zmien

#main_menu {
     z-index: 100;
     display: none;
     background: #FFFFFF;
}

na

#main_menu {
    position: relative;
    top: 15px;
    right: 20px;
    z-index: 100;
    display: none;
}

a moze zapodasz kod?

Matslom napisał 18.05.2013, 08:36:
Pomaganie w taki sposób nikomu nie pomoże, bo sam nie wiesz co wypisujesz.

Dobra. Jeden problem za mną (nami?) Tylko teraz dalej poszerza belkę w dół. (Pomógł post carbona)

---

Ps. mybbtheme Ty znasz się coś na css w ogóle?

Matslom napisał 18.05.2013, 08:34:
Sądząc po jego własnej stronie i to, że sprzedaje na niej kradzione style to śmiem wątpić, że umie cokolwiek.

Hm, robiłem to według tego poradnika od Nidrax'a i nie przypominam sobie, żebym miał takie problemy.
Pierwsze co musisz to określić wysokość i szerokość tego wysuwanego pola (klasa sub_menu) oraz ustawić marginesy. Tutaj moja klasa sub_menu, porównaj i zobacz ewentualnie gdzie masz błąd:

position: absolute;
background: #FCFCFC;
background: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0px, rgba(244, 244, 244, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(252, 252, 252, 1)), color-stop(100%,rgba(244, 244, 244, 1)));
background: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: -o-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: -ms-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f4f4f4',GradientType=0 );
border-bottom: 1px solid #DDD;
padding: 5px 9px 5px 9px;
margin-top: 35px;
margin-left: 19px;
border-top: 3px solid #116AB8;
border-bottom: 3px solid #116AB8;
border-right: 1px solid #116AB8;
border-left: 1px solid #116AB8;

No to teraz to samo:

max-height: 400px;

Matslom. Ok jest tylko teraz jest cały czas wysunięty. :/

Zapewne przez moją nieuwagę, zapomniałem dodać

display: none;

do klasy. Uczyń to.

Matslom
Rozwiązałem ten problem. Tak wygląda moja klasa:

#main_menu {
position: absolute;
z-index: 100;
     display: none;
background: #FCFCFC;
background: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0px, rgba(244, 244, 244, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(252, 252, 252, 1)), color-stop(100%,rgba(244, 244, 244, 1)));
background: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: -o-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: -ms-linear-gradient(top, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0px,rgba(244, 244, 244, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f4f4f4',GradientType=0 );
border-bottom: 1px solid #DDD;
padding: 5px 9px 5px 9px;
border-top: 3px solid #116AB8;
border-bottom: 3px solid #116AB8;
border-right: 1px solid #116AB8;
border-left: 1px solid #116AB8
}

---

Oczywiście cały czas testuje i naprawiam gdy skończę napiszę "poradnik" na prawidłowe rozwijanie

---

Ok zrobiłem ten panel tylko mam teraz parę ale. (Ps. wiem że 1 wątek = 1 problem ale to tyczy się tego samego)

1. Jak dodać że jak się kliknie w awatar to przenosi na profil?

2. Jak ustawić tekst od początku a nie od końca awatara?

3. Jak ustawić że jak się rozwinie panel to strzałka zmieni się z "arrowdown" na "arrowup"?

---

@Refresh?

---

@2 rozwiązane. Jeszcze 1 i 3 ktoś pomoże?