-
Path: news-archive.icm.edu.pl!news.icm.edu.pl!wsisiz.edu.pl!newsfeed2.atman.pl!newsfe
ed.atman.pl!goblin3!goblin1!goblin.stu.neva.ru!postnews.google.com!news2.google
.com!npeer03.iad.highwinds-media.com!news.highwinds-media.com!feed-me.highwinds
-media.com!nx02.iad01.newshosting.com!newshosting.com!newsfeed.neostrada.pl!unt
-exc-02.news.neostrada.pl!unt-spo-b-01.news.neostrada.pl!news.neostrada.pl.POST
ED!not-for-mail
Date: Fri, 25 Nov 2011 15:35:30 +0100
From: Szyk <s...@o...pl>
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:8.0) Gecko/20111105 Thunderbird/8.0
MIME-Version: 1.0
Newsgroups: pl.comp.www
Subject: Menu rozwijane na UL czy DL? - ręce mi opadły
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
Lines: 205
Message-ID: <4ecfa79c$0$8460$65785112@news.neostrada.pl>
Organization: Telekomunikacja Polska
NNTP-Posting-Host: 83.8.49.143
X-Trace: 1322231708 unt-rea-b-01.news.neostrada.pl 8460 83.8.49.143:51009
X-Complaints-To: a...@n...neostrada.pl
Xref: news-archive.icm.edu.pl pl.comp.www:399857
[ ukryj 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>
Następne wpisy z tego wątku
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2025-02-21 Warszawa => Key Account Manager IT <=
- 2025-02-21 Warszawa => Data Engineer (Tech Lead) <=
- 2025-02-21 Aliexpress zaczął oszukiwać na bezczelnego.
- 2025-02-21 Warszawa => System Architect (Java background) <=
- 2025-02-21 Kula w łeb
- 2025-02-21 Warszawa => System Architect (background deweloperski w Java) <=
- 2025-02-21 Warszawa => Solution Architect (Java background) <=
- 2025-02-21 Lublin => JavaScript / Node / Fullstack Developer <=
- 2025-02-21 Pawel S
- 2025-02-21 Warszawa => Key Account Manager (Usługi HR) <=
- 2025-02-21 Katowice => Senior Field Sales (system ERP) <=
- 2025-02-21 Chrzanów => Programista NodeJS <=
- 2025-02-21 Wrocław => Konsultant wdrożeniowy Comarch XL/Optima (Księgowość i
- 2025-02-21 Warszawa => Administrator Systemów Windows IT <=
- 2025-02-21 Wrocław => Specjalista ds. Sprzedaży (transport drogowy) <=