Edycja wyglądu menu w css

wersja skryptu MyBB:1.6.11
adres forum:handballpro.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, od tygodnia staram się stworzyć na swoim forum menu w css-ie. Udało mi się stworzyć coś takiego:

Jednak problem dotyczy wyglądu. Chciałbym, aby jakaś dobra duszyczka przerobiła mi mój plik odpowiedzialny za wygląd tego menu. Plik znajduje się w załączniku, ale jego kod wygląda tak:

#menu {

  text-align: left;

  overflow: hidden;

  font-family: calibri, tahoma;

  }



  ul#menu li {

  border: 1px solid #d5d5d5;

  list-style-type: none;

  float: left;


  margin-left: 3px;

  }



  ul#menu li:hover {

  border: 1px solid #d5d5d5;

  list-style-type: none;

  float: left;


  margin-left: 3px;

  }



  ul#menu li a {

  display : block;

  padding : 4pt;

  text-decoration : none;

  }



  ul#menu li li a {

  width: 160px;

  }



  ul#menu li li:hover {


  }



  ul#menu li ul {

  overflow: hidden;

  display: none;

  }



  ul#menu li:hover ul {

  position: absolute;


  padding: 0;
  
  display : block;

  width: 160px;

  }

Plik ten otrzymałem od pewnego znajomego, który jednak uznał, że nie ma zbytnio czasu, aby dokładnie pomóc mi przy tworzeniu wyglądu mojego menu. Pragnę, aby wyglądało ono tak jak moje top-menu:

czyli pasek na samej górze forum, chodzi o wielkość czcionki, jej kolor, wygląd tych buttonów itp. Próbowałem przez około 4 godziny kombinować z badaniem elementów top-menu i przenoszenia jego danych do swojego pliku, ale szło mi to bardzo nieudolnie. Liczę na jakąś pomoc lub chociaż wskazówki, gdyż zdaję sobie sprawę, że jest z tym trochę roboty. Może chociaż wyjaśnienia tego: "#menu", "ul#menu li" na zasadzie "#menu" -> ogólny wygląd menu, "ul#menu li" -> ... Moje forum jest aktualnie zamknięte, ale nagłówek jest dostępny dla gości, jeśli jednak trzeba otworzyć to proszę napisać.

CSS czytasz od tyłu czyli jak masz np:

#menu ul li a {coś tam}

to jest to dla elementu "a" zawartego w "li", które jest zawarte w "ul" i zawarte dalej w unikalnym selektorze "#menu".

od rana próbuję to przerobić tak jak powiedziałeś i nic mi nie idzie, ale bez przeróbek też to jakoś działa

Kolega, zauważ, że w panelu user masz już jeden dropdown. Dlaczegoby tego nie wykorzystać. Wejdź tam i w kodzie:

    jQuery(document).ready(function(){
        jQuery("#top").BackToTop();
        jQuery(".user-slide").Wysun({przycisk: ".dd1", efekt : "fade", czas : "1000"});
        jQuery("#inbox").click(function(){
            jQuery("#login-box").fadeIn(300);
            jQuery(".login-shadow").fadeIn(300);
            jQuery(".login-shadow, .btn-close").click(function(){
                jQuery("#login-box").fadeOut(300);
                jQuery(".login-shadow").fadeOut(300);
            });
        });
    });

    jQuery.fn.BackToTop = function(){
        var back = jQuery(this);
        jQuery(window).scroll(function(){jQuery(this).scrollTop() == 0? back.finish().fadeOut(500) : back.finish().fadeIn(500);});
        jQuery(this).click(function(){jQuery("html, body").animate({ scrollTop: '0px' }); back.finish().fadeOut(500);});
    };

Dopisz po

jQuery(".user-slide").Wysun({przycisk: ".dd1", efekt : "fade", czas : "1000"});

to:

jQuery("#mslide1").Wysun({przycisk: ".dd2", efekt : "fade", czas : "1000"});
jQuery("#mslide1").Wysun({przycisk: ".dd3", efekt : "fade", czas : "1000"});
jQuery("#mslide1").Wysun({przycisk: ".dd4", efekt : "fade", czas : "1000"});

Zależy ile potrzebujesz.

Potem w htmlu w każdym li dodaj kod, pamiętając o zmianie liczby w id:

<ul id="mslide1" class="user-slide">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
</ul>

A do każdego nadrzędnego a dopisz klasę odpowiadającą numerowi dropdowna. Np:

<a href="#" class="dd2"></a>

Nie wiem czy będzie działać na 100%, bo nie sprawdzałem, ale jakby coś nie tak to daj znać.

Wszystko rozumiem, tylko czy mógłbyś dokładnie opisać to: "Wejdź tam i w kodzie" -> powiesz gdzie dokładnie? Szukam tego w public html w jscriptach i w szablonach stylu, ale nie mogę znaleźć.

Szablony/Niezgrupowane Szablony/headerinclude

Const dokładnie o to mi chodziło, dobry trop złapałeś, jeszcze tylko bym prosił o poprawki i masz moją dozgonną wdzięczność. Zrobiłem wszystko zgodnie z zaleceniami i mój kod wygląda tak:

        <nav><ul class="main-menu">
            <div class="container">
                <ul id="menu">
                    <li><a href="http://handballpro.pl/forumdisplay.php?fid=47"><i class="icon-bullhorn"></i> Newsy</a></li>
                    <li><a href="http://ratings.fide.com/calculator_rtd.phtml"><i class="icon-mobile-phone"></i> Kalkulator</a></li>
                    <li class="separate"> <i class="icon-th-large"></i> </li>

                    <li><a href="#" class="dd2"> Handball 4 vs 4 <i class="icon-caret-down"></i></a>
                <ul id="mslide1" class="user-slide">
                    <li><a href="#" title="">1 podstrona</a></li><br>
                    <li><a href="#" title="">2 podstrona</a></li><br>
                    <li><a href="#" title="">3 podstrona</a></li><br>
                    <li><a href="#" title="">4 podstrona</a></li><br>
                </ul></li>

                    <li><a href="#" class="dd3"> SpeedGol 1 vs 1 <i class="icon-caret-down"></i></a>
                <ul id="mslide2" class="user-slide">
                    <li><a href="#" title="">5 podstrona</a></li><br>
                    <li><a href="#" title="">6 podstrona</a></li><br>
                    <li><a href="#" title="">7 podstrona</a></li><br>
                    <li><a href="#" title="">8 podstrona</a></li><br>
                </ul></li>

                    <li><a href="#" class="dd4"> Liga 1 vs 1 <i class="icon-caret-down"></i></a>
                <ul id="mslide3" class="user-slide">
                    <li><a href="#" title="">9 podstrona</a></li><br>
                    <li><a href="#" title="">10 podstrona</a></li><br>
                    <li><a href="#" title="">11 podstrona</a></li><br>
                    <li><a href="#" title="">12 podstrona</a></li><br>
                </ul></li>

                </ul></div>
            </ul></nav>

Po wejściu na stronę lub jej odświeżeniu przedstawia się to tak:

I tu mamy 1 bug po lewej, ponieważ nie powinien się wyświetlać ten panel. Klikam więc obojętnie gdzie na stronę i ramka z lewej znika:

Teraz 2 bug, gdy klikam na swój login otwierają się oba okna naraz:

3 bug: po kliknięciu na "Handball 4 vs 4" wyświetla się tak:

Po kliknięciu na "SpeedGol 1 vs 1" lub " Liga 1 vs 1" wyświetla się to samo, a według kodu powinno wyświetlać się "Podstrona 5" itd. a nie "Podstrona 1-4"

No i już na koniec jakby się jeszcze dało, a jeśli nie to tragedii nie będzie. Żeby te okna po kliknięciu wyświetlały się bezpośrednio pod klikaną kategorią np. pod "Handball 4vs4" oraz żeby były tej samej wysokości co okno panelu użytkownika.

Dodaj do:

.main-menu li, .top-menu li{
position: relative;
}

---

No i popraw ten kawałek kodu:

        jQuery("#mslide1").Wysun({przycisk: ".dd2", efekt : "fade", czas : "1000"});
        jQuery("#mslide1").Wysun({przycisk: ".dd3", efekt : "fade", czas : "1000"});
        jQuery("#mslide1").Wysun({przycisk: ".dd4", efekt : "fade", czas : "1000"});

Na taki:

        jQuery("#mslide1").Wysun({przycisk: ".dd2", efekt : "fade", czas : "1000"});
        jQuery("#mslide2").Wysun({przycisk: ".dd3", efekt : "fade", czas : "1000"});
        jQuery("#mslide3").Wysun({przycisk: ".dd4", efekt : "fade", czas : "1000"});

Oraz te id w ulach.

Błąd numer 3 i 4 poprawiony. Czy da się jeszcze naprawić to, żeby po kliknięciu w swój nick nie otwierały się wszystkie panele na raz? Oraz to, że po wejściu na stronę nie wyświetlały się wszystkie panele?

Do .user-slide dodaj

display: none;

To Ci się te wszystkie menu nie będzie od razu pokazywać. Dopiero po naciśnięciu.

Pomogło, dzięki. Z 4 problemem poradziłem sobie sam, więc temat uważam za rozwiązany. Chciałbym jeszcze tylko się dowiedzieć jak zmienić to menu, aby otwierało się po najechaniu, a nie kliknięciu. Oraz jak zbliżyć do siebie te podstrony:

by wyglądały tak:

Zamień

jQuery("#inbox").click(function(){

na

jQuery("#inbox").hover(function(){

Nie działa, zmieniłem to w headerinclude, czy gdzieś jeszcze powinienem?

hm. ale w tej chwili to cały kod masz źle, bo gdzie nie kliknie to z lewej jedno i to samo się otwiera.

.click (odpowiada za kliknięcie)
.hover (za najechanie myszką)

nie wiem czemu nie działa.

Popraw kod najpierw a w wolnej chwili coś pokombinuję jak podejrzę kod u Ciebie.

Przypadkiem zauważyłem, że po najechaniu na "Logowanie" otwiera się panel logowania, więc może w złym miejscu kazałeś zmienić to click na hover. Aktualnie przywróciłem wszystko do początkowego stanu, czyli tego z .click