arturro1984
14-11-2013, 10:03
Witam serdecznie
Na swojej joomli mam z lewej strony menu. Chciałbym, aby ono było rozwijane i w związku z tym napisałem na podstawie książki "CSS według Erica Meyera" skrypt znajdujący się poniżej. I teraz mam problem z osadzeniem go. W "Moduły: Moduł Menu" w "Przyrostku klas CSS menu" wpisałem nazwę "nav". I wszystko wygląda ładnie, jednak nic się nie rozwija :(
Czy ktoś z szanownych forumowiczów mógłby pomóc? Z góry dziękuję!
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>aaa</title>
<style type="text/css"> body { background: #EEE; color: #000; behavior: url(csshover.htc); } h1 { color: #AAA; border-bottom: 1px solid; margin-bottom: 0; } #main { color: #AAA; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid; } div#nav { float: left; width: 270px; background: #FDD; margin: -1px 0 0 -1px; } div#nav ul { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; margin: 0px; padding: 0; width: 270px; background: #2c1f79; border: 1px solid #AAA; } div#nav li { position: relative; list-style: none; margin: 0px; border-bottom: 1px solid #CCC; /* szara ramka */ } div#nav ul ul { position: absolute; top: 0; left: 270px; display: none; } div#nav ul.level1 li.submenu:hover ul.level2 { display: block; } div#nav ul.level2 li.submenu:hover ul.level3 { display: block; } div#nav li.submenu { background: #2c1f79; } div#nav li a { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em; } div#nav>ul a { width: auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; } div#nav li:hover { background: #2c1f79; } div#nav li.submenu:hover { background-color: #2c1f79; } </style>
</head>
<body><div id="nav"><ul class="level1"><li><a href="/">Home</a></li><li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/stratey">Strategy</a> <li><a href="/services/optimize">Optimize</a> <li><a href="/services/guidance">Guidance</a> <li><a href="/services/training">Training</a> </ul></li><li><a href="/events/">Events</a></li><li class="submenu"><a href="/pubs/">Pubs</a><ul class="level2"><li> <li><a href="/pubs/artices/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/1/">Articles</a></li> <li><a href="/pubs/tuts/2">Tutorials</a></li> <li><a href="/pubs/tuts/3">Articles</a></li> <li><a href="/pubs/tuts/4">Tutorials</a></li> </ul> </li> </li><li><a href="/">Home</a></li><li><a href="/services/">Services</a></li></li></li></ul><li><a href="/services/">Services</a></li></ul> </body></html>
Na swojej joomli mam z lewej strony menu. Chciałbym, aby ono było rozwijane i w związku z tym napisałem na podstawie książki "CSS według Erica Meyera" skrypt znajdujący się poniżej. I teraz mam problem z osadzeniem go. W "Moduły: Moduł Menu" w "Przyrostku klas CSS menu" wpisałem nazwę "nav". I wszystko wygląda ładnie, jednak nic się nie rozwija :(
Czy ktoś z szanownych forumowiczów mógłby pomóc? Z góry dziękuję!
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>aaa</title>
<style type="text/css"> body { background: #EEE; color: #000; behavior: url(csshover.htc); } h1 { color: #AAA; border-bottom: 1px solid; margin-bottom: 0; } #main { color: #AAA; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid; } div#nav { float: left; width: 270px; background: #FDD; margin: -1px 0 0 -1px; } div#nav ul { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; margin: 0px; padding: 0; width: 270px; background: #2c1f79; border: 1px solid #AAA; } div#nav li { position: relative; list-style: none; margin: 0px; border-bottom: 1px solid #CCC; /* szara ramka */ } div#nav ul ul { position: absolute; top: 0; left: 270px; display: none; } div#nav ul.level1 li.submenu:hover ul.level2 { display: block; } div#nav ul.level2 li.submenu:hover ul.level3 { display: block; } div#nav li.submenu { background: #2c1f79; } div#nav li a { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 6.5em; } div#nav>ul a { width: auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF; } div#nav li:hover { background: #2c1f79; } div#nav li.submenu:hover { background-color: #2c1f79; } </style>
</head>
<body><div id="nav"><ul class="level1"><li><a href="/">Home</a></li><li class="submenu"><a href="/services/">Services</a> <ul class="level2"> <li><a href="/services/stratey">Strategy</a> <li><a href="/services/optimize">Optimize</a> <li><a href="/services/guidance">Guidance</a> <li><a href="/services/training">Training</a> </ul></li><li><a href="/events/">Events</a></li><li class="submenu"><a href="/pubs/">Pubs</a><ul class="level2"><li> <li><a href="/pubs/artices/">Articles</a></li> <li class="submenu"><a href="/pubs/tuts/">Tutorials</a> <ul class="level3"> <li><a href="/pubs/tuts/1/">Articles</a></li> <li><a href="/pubs/tuts/2">Tutorials</a></li> <li><a href="/pubs/tuts/3">Articles</a></li> <li><a href="/pubs/tuts/4">Tutorials</a></li> </ul> </li> </li><li><a href="/">Home</a></li><li><a href="/services/">Services</a></li></li></li></ul><li><a href="/services/">Services</a></li></ul> </body></html>