eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwMenu rozwijane na UL czy DL? - ręce mi opadły
Ilość wypowiedzi w tym wątku: 5

  • 1. Data: 2011-11-25 14:35:30
    Temat: Menu rozwijane na UL czy DL? - ręce mi opadły
    Od: Szyk <s...@o...pl>

    Witam

    Chcę mieć stronę z menu po lewej strony. Na początek chciałbym, żeby
    było ono dwupoziomowe, przy czym drugi poziom był by ukryty i rozwijany
    tylko po kliknięciu (dla ścisłości: przy starcie strony było by
    rozwijane pierwsze menu drugiego poziomu).

    Nigdzie nie czytając zrobiłem "po swojemu" menu na UL ale nie jestem z
    tego zadowolony. Bo nie wiedzieć czemu style przechodzą mi z
    zagnieżdżonego UL (pod menu 2 poziomu) na kolejny element LI menu
    pierwszego poziomu (chodzi o style obramowania - LI pierwszego poziomu
    chcę mieć w ramkach typu solid a LI drugiego poziomu chcę mieć
    rozdzielone linią dashed) - trudno w to uwierzyć dla tego na końcu tej
    wiadomości zamieszczam pełen plik przykładowy.

    Elementy UL i LI mają własne klasy (do stylów wyglądu) i ID (do zwijania
    i rozwijania - tylko UL mają ID). I przykładowo jak mam rozwinięte pod
    menu "coś tam 1" to style "coś tam 2" zmienia się na styl elementów LI z
    widocznego "pod menu" nad nim. To się dzieje zarówno pod Chrome, FF oraz
    IE. Przeglądałem kod i nie widzę żadnych nie sparowanych tagów ani
    błędne zagnieżdżonych.

    Nie mogąc sobie poradzić z tymi stylami dla UL zacząłem czytać o "menu
    rozwijanym" i na stronie
    http://www.kurshtml.edu.pl/skrypty/skrypt,menu_rozwi
    jane.html autor robi
    je na liście definicyjnej DL.

    Wiec mam pytanie:
    Czy takie menu jakie ja chcę powinno się robić na elemencie DL czy UL?

    A jeśli ktoś doświadczony miałby chwilkę i mógł rzucić okiem na te źle
    działające menu i orzekłby co jest błędne, to był bym wdzięczny.

    dzięki i pozdro
    Szyk


    ps. niżej pełny plik z moim źle działającym menu (jest to tylko jeden plik)

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
    <head><title>SE</title>
    <meta name="Keywords" content="keyword1, keyword2"/>
    <style type="text/css">html
    {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    body
    {
    margin: 10px;
    padding: 0;

    font-family: Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 12px;
    color: #000000;
    background-color: #95B555;
    }

    *#MainMenu, *#LanguagesMenu
    {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 0px none #000000;
    }

    *#MainMenu, *#LanguagesMenu, *.SubMenu
    {
    float: left;
    list-style: none;


    top: 0px;

    width: 180px;
    display: block;

    margin: 0px;
    padding: 0px;

    font-family: Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 18px;
    font-weight: bold;

    text-decoration: none;
    background-color: #95B555;
    color: #000000;
    }


    *#MainMenu
    {
    left: 0px;
    }

    *#LanguagesMenu
    {
    float: right;
    }


    li.MenuItem a:link, li.MenuItem a:visited, li.SubMenuItem a:link,
    li.SubMenuItem a:visited
    {
    display: block;
    padding: 10px;

    text-decoration: none;
    background-color: #95BC55;
    color: #000000;
    }


    li.MenuItem a:hover, li.SubMenuItem a:hover
    {
    color: #EB6404;
    }


    li.SubMenuItem a:link, li.SubMenuItem a:visited
    {
    font-weight: normal;

    border-left: 20px solid #95BC55;
    }

    li.MenuItem
    {
    border-bottom: 1px solid #000000;
    }

    li.SubMenuItem
    {
    border-bottom: 1px dashed #000000;
    }

    </style>
    <script type="text/javascript">function MenuMediator()
    {
    this.mCurrentPage = "";

    this.setCurrentPage = function(aPageName)
    {
    // hide old sub menu
    if(this.mCurrentPage.length && document.getElementById("SubMenu"
    + this.mCurrentPage))
    document.getElementById("SubMenu" +
    this.mCurrentPage).style.display = "none";

    this.mCurrentPage = aPageName;

    // show current sub menu
    if(document.getElementById("SubMenu" + this.mCurrentPage))
    document.getElementById("SubMenu" +
    this.mCurrentPage).style.display = "";

    //document.getElementById("VisiblePage").innerHTML =
    document.getElementById(this.mCurrentPage).innerHTML
    ;
    return false;
    };
    }
    </script>

    <body>
    <ul id="MainMenu">
    <li class="MenuItem"><a href="" onclick="return
    lMenuMediator.setCurrentPage('1');">menu1</a>
    <ul class="SubMenu" id="SubMenu1" style="display:none">
    <li class="SubMenuItem"><a>sub menu1</a></li>
    <li class="SubMenuItem"><a>sub menu2</a></li>
    <li class="SubMenuItem"><a>sub menu3</a></li>
    <li class="SubMenuItem"><a>sub menu4</a></li>
    </ul>
    </li>
    <li class="MenuItem"><a href="" onclick="return
    lMenuMediator.setCurrentPage('2');">menu2</a>
    <ul class="SubMenu" id="SubMenu2" style="display:none">
    <li class="SubMenuItem"><a>sub menu1</a></li>
    <li class="SubMenuItem"><a>sub menu2</a></li>
    <li class="SubMenuItem"><a>sub menu3</a></li>
    <li class="SubMenuItem"><a>sub menu4</a></li>
    </ul>
    </li>
    <li class="MenuItem"><a href="" onclick="return
    lMenuMediator.setCurrentPage('3');">menu3</a>
    <ul class="SubMenu" id="SubMenu3" style="display:none">
    <li class="SubMenuItem"><a>sub menu1</a></li>
    <li class="SubMenuItem"><a>sub menu2</a></li>
    <li class="SubMenuItem"><a>sub menu3</a></li>
    <li class="SubMenuItem"><a>sub menu4</a></li>
    </ul>
    </li>
    </ul>
    <script type="text/javascript">
    var lMenuMediator = new MenuMediator();
    lMenuMediator.setCurrentPage('1');
    </script>

    </body>
    </html>


  • 2. Data: 2011-11-26 14:00:44
    Temat: Re: Menu rozwijane na UL czy DL? - ręce mi opadły
    Od: Szyk <s...@o...pl>

    Oki doki!!! Rozgryzłem temat!
    Problem był w tym, że elementy MainMenu LanguagesMenu SubMenu miały
    wspólny styl. Trzeba było wyłączyć i odchudzić styl SubMenu i potem już
    było z górki...


    dzięki za zainteresowanie i pozdro all :)
    Szyk


  • 3. Data: 2011-11-26 14:01:59
    Temat: Re: Menu rozwijane na UL czy DL? - ręce mi opadły
    Od: Szyk <s...@o...pl>

    A tak odpowiadając na postawione pytanie. To odpowiedź brzmi:
    Da się menu zrobić na UL i DL i działają równie dobrze.

    jeszcze raz dzięki i pozdro all
    Szyk


  • 4. Data: 2011-11-26 18:16:39
    Temat: Re: Menu rozwijane na UL czy DL? - ręce mi opadły
    Od: Peter May <p...@o...pl>

    W dniu 2011-11-26 15:01, Szyk pisze:
    > A tak odpowiadając na postawione pytanie. To odpowiedź brzmi:
    > Da się menu zrobić na UL i DL i działają równie dobrze.

    Da się też na table, div i paru jeszcze tagach. Ale czy to dobrze? Nie.

    --
    Peter


  • 5. Data: 2011-11-28 11:47:38
    Temat: Re: Menu rozwijane na UL czy DL? - ręce mi opadły
    Od: Szyk <s...@o...pl>

    W dniu 2011-11-26 19:16, Peter May pisze:
    > W dniu 2011-11-26 15:01, Szyk pisze:
    >> A tak odpowiadając na postawione pytanie. To odpowiedź brzmi:
    >> Da się menu zrobić na UL i DL i działają równie dobrze.
    >
    > Da się też na table, div i paru jeszcze tagach. Ale czy to dobrze? Nie.

    To jakich tagów powinno się użyć żeby było prawidłowo, zgodnie z
    zaleceniami i zgodnie ze standardami?

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: