Menu rozwijane na UL czy DL? - ręce mi opadły - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Menu rozwijane na UL czy DL? - ręce mi opadły › Menu rozwijane na UL czy DL? - ręce mi opadły

Data: 2011-11-25 14:35:30
Temat: Menu rozwijane na UL czy DL? - ręce mi opadły
Od: Szyk <s...@o...pl> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
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>